前后端：比如我們是從前端看到這個視頻，但是視頻存儲是在后端服務(wù)器上的，包括bilibili的賬號密碼都是在后端服務(wù)器上的。后端負責(zé)底層數(shù)據(jù)的存儲和軟件交互的邏輯，什么是軟件交互邏輯？一鍵三連就是，這個視頻權(quán)重變高，就會推送給更多的人。點贊→權(quán)重，這就是一個邏輯。

DOM：前端向后端發(fā)出請求，后端返回HTML文件，瀏覽器就是將該文件解析成DOM樹。這些節(jié)點之間存在相應(yīng)的關(guān)系（父子節(jié)點、鄰居節(jié)點）節(jié)點也有著各自的屬性，根據(jù)DOM樹,瀏覽器計算每個元素的幾何屬性,如寬高、位置等,這一步稱為布局(layout)。瀏覽器就會依據(jù)這些信息進行網(wǎng)頁的排序和渲染從而生成最終的界面。（關(guān)鍵要理解：頁面不是HTML從服務(wù)端發(fā)送來就是這樣的，首先是要經(jīng)過瀏覽器將其解析為DOM樹，再根據(jù)DOM樹的屬性和節(jié)點關(guān)系進行布局）

JavaScript正是操作dom節(jié)點來改變HTML頁面的

前后端之間傳輸數(shù)據(jù)的格式就是JSON。前端通過AJAX請求后端接口,后端將數(shù)據(jù)處理成JSON格式返回給前端,前端再解析JSON數(shù)據(jù)進行頁面渲染和交互操作。這種模式已經(jīng)成為目前最常見的前后端交互方式之一。JSON使用JavaScript語法來描述數(shù)據(jù)對象,但是JSON格式的數(shù)據(jù)和JavaScript代碼是不同的（JSON和字典的區(qū)別：JSON和字典在一些方面確實相似。首先，它們都使用鍵值對的形式來組織數(shù)據(jù)。JSON使用鍵值對來表示數(shù)據(jù)的屬性和值，字典也是由鍵值對組成的數(shù)據(jù)結(jié)構(gòu)。這種鍵值對的形式使得數(shù)據(jù)可以按照特定的標(biāo)識進行訪問和操作。其次，JSON和字典都支持嵌套結(jié)構(gòu)。JSON中的值可以是簡單的數(shù)據(jù)類型，也可以是對象或數(shù)組，這使得可以構(gòu)建復(fù)雜的數(shù)據(jù)結(jié)構(gòu)。字典中的值也可以是任意類型，包括嵌套的字典或其他數(shù)據(jù)結(jié)構(gòu)，從而實現(xiàn)多層次的數(shù)據(jù)表示。此外，JSON和字典都可以通過鍵來訪問和操作對應(yīng)的值。在JSON中，可以使用鍵來獲取特定屬性的值；在字典中，可以通過鍵來獲取對應(yīng)的值。盡管它們有相似之處，但需要注意的是，JSON是一種通用的數(shù)據(jù)交換格式，可以在不同的編程語言和系統(tǒng)之間進行數(shù)據(jù)交互。字典則是一種數(shù)據(jù)結(jié)構(gòu)，通常是特定編程語言的內(nèi)置類型或標(biāo)準(zhǔn)庫提供的功能。它們在使用方式和應(yīng)用場景上有一些差異，需要根據(jù)具體情況選擇合適的數(shù)據(jù)表示和操作方式。）這里還要補充一下什么叫對象？對象就是類的實例化，類是抽象的，對象是具體的。比如汽車是類，某一輛汽車就是對象（千萬不要以為對象是類的一部分，比如認(rèn)為汽車零件是對象）

AJAX

傳統(tǒng)的Web應(yīng)用模式是前端發(fā)送HTTP請求,后端返回完整的HTML頁面。但隨著Web應(yīng)用越來越復(fù)雜,這種模式展示一些問題:

• 整頁加載不夠靈活,每次互動都需要重新加載頁面，比如我在B站搜索視頻，很多內(nèi)容其實是不需要變的，只需要發(fā)送需要改變的JSON請求就是了。
• 前后端耦合嚴(yán)重,后端負責(zé)主要的邏輯處理。

因此,AJAX模式應(yīng)運而生:

• 前端使用JavaScript發(fā)送異步請求,獲取數(shù)據(jù)。
• 后端只返回數(shù)據(jù),通常是JSON格式,不再返回完整HTML。
• 前端使用JavaScript渲染頁面,實現(xiàn)局部刷新。

這種模式提高了用戶體驗,頁面不需要重新加載就可以更新。并且實現(xiàn)了前后端的分離：后端專注業(yè)務(wù)邏輯,只返回數(shù)據(jù)。前端專注展示,使用前端框架渲染頁面。所以,返回JSON格式的數(shù)據(jù)而不是完整HTML,是當(dāng)前Web應(yīng)用實現(xiàn)前后端分離的常用方式之一。不過傳統(tǒng)模式返回HTML也依然有其適用場景。

傳統(tǒng)的Web應(yīng)用是這樣的:

1. 瀏覽器發(fā)送HTTP請求,請求HTML頁面
2. 服務(wù)器生成完整的HTML頁面,返回給瀏覽器
3. 瀏覽器解析HTML,生成DOM樹
4. JavaScript通過DOM API操作DOM樹實現(xiàn)頁面交互

而現(xiàn)在的Web應(yīng)用中,常采用AJAX模式:

1. 瀏覽器使用JavaScript發(fā)送異步請求,直接請求數(shù)據(jù)(常是JSON格式)
2. 服務(wù)器返回JSON格式的數(shù)據(jù)給瀏覽器
3. 瀏覽器中JavaScript代碼接收到JSON數(shù)據(jù)
4. 然后借助DOM API或框架(如jQuery)將JSON數(shù)據(jù)渲染成HTML
5. 再將生成的HTML插入到DOM樹中

需要解析JSON并構(gòu)建DOM樹主要有以下原因:

1. 瀏覽器無法直接將JSON構(gòu)建為DOM樹

瀏覽器接收到的JSON數(shù)據(jù)只是一段文本,這些數(shù)據(jù)本身不包含任何標(biāo)記語言信息。瀏覽器無法知道如何根據(jù)這些數(shù)據(jù)構(gòu)建DOM樹。

2. 需要根據(jù)JSON的數(shù)據(jù)構(gòu)建界面

JSON本身只包含數(shù)據(jù),不包含表示界面方式的信息。我們需要根據(jù)JSON數(shù)據(jù)生成對應(yīng)的HTML標(biāo)記,然后構(gòu)建成DOM樹,才能通過DOM樹渲染出界面。

3. 便于通過JavaScript操作界面

拿到JSON數(shù)據(jù)后,我們需要通過JavaScript更新界面。而JavaScript只能通過DOM API操作DOM樹。所以我們需要用JSON數(shù)據(jù)構(gòu)建DOM樹,才能通過JavaScript控制界面。

4. 實現(xiàn)數(shù)據(jù)和界面解耦

如果不經(jīng)過解析JSON就直接輸出界面,數(shù)據(jù)和界面會強耦合。通過解析JSON構(gòu)建DOM樹,可以實現(xiàn)數(shù)據(jù)和界面解耦,提高代碼靈活性。

5. 允許按需更新界面

通過操作構(gòu)建的DOM樹,可以只更新界面局部而非整頁。避免不必要的重復(fù)渲染。

總結(jié)來說,JSON本身只是數(shù)據(jù),需要構(gòu)建成DOM樹之后,才能通過JavaScript控制界面更新,實現(xiàn)數(shù)據(jù)和界面解耦,減少重復(fù)渲染,提高性能和靈活性。這是當(dāng)前web開發(fā)中常見的模式。

進一步解釋HTML和JSON的區(qū)別:

- HTML與HTTP請求確實是一體的。傳統(tǒng)的Web應(yīng)用中,每次交互都需要重新請求完整的HTML頁面。這導(dǎo)致頁面需要頻繁重新加載。

- JSON與AJAX請求是分離的。AJAX可以單獨請求JSON格式的數(shù)據(jù),并使用JavaScript局部更新頁面,避免整頁重新加載。所以,HTML+HTTP對應(yīng)于傳統(tǒng)的“全頁面加載”模式。JSON+AJAX對應(yīng)于新 的“單頁應(yīng)用”模式。

- HTML用于定義頁面內(nèi)容結(jié)構(gòu),JSON用于存儲和交換數(shù)據(jù)。

- HTML需要完整加載才能顯示頁面。JSON可以部分加載,JavaScript解析后更新頁面。

- HTML對數(shù)據(jù)和視圖混合在一起。JSON分離了數(shù)據(jù),更靈活。

- 簡言之,HTML+HTTP是過去的傳統(tǒng)模式,JSON+AJAX是當(dāng)前的主流模式。SON配合AJAX可以實現(xiàn)局部更新,減少不必要的數(shù)據(jù)加載,提高性能和用戶體驗HTML代表過去的全頁加載模式,JSON代表當(dāng)前的異步分段加載模式。這是Web應(yīng)用進化到單頁應(yīng)用的一個重要原因。