前面的文章我們系統介紹了js中的數組、字符串、函數、數據結構、BOM、DOM、事件、表單，今天我們來了解一下js中的作為前端開發與後臺的交互。需要代碼的朋友可以百度搜索“欒鵬全棧”到我CSDN博客下載和複製代碼。

只要編程語言能夠支持網卡端口的監聽和發送，理論上都是可以實現服務器後臺設計的。也因此造成了實現後臺的語言偏多，而web前端語言以html/css/js為主。所以在這裡我們不涉及後臺的設計，只介紹在web前端設計中前端數據的發送和後臺數據的接收。

純粹的前端工程師已經不存在了，做前端開發必須要了解必要的後臺、數據庫知識，以及與後臺的交互設計，其中你需要知道的名詞包括JSON、AJAX、序列化、推送、comet、SSE、WebSocket。

JSON

js對象

key和value間用冒號連接，不同的key-value鍵值對之間用逗號連接，最後一個value後不加符號。

json對象

json對象與js對象的對象字面量的區別在於屬性必須加引號。

JSON中對象可以嵌套。每個JSON對象使用{}包含。toJSON函數是對象序列化時調用的虛函數。

json數組

JSON數組，每一個元素都是json對象。

json對象操作

json對象與js對象操作方法相同，也是支持屬性的增刪查改操作。

json數組操作

json數組與js數組操作方法相同

序列化

將js對象、json對象、json數組轉化json字符串。

JSON.stringify將對象(js的或JSON的)轉化為JSON字符串(稱為序列化)。可以序列化對象或對象數組。會自動濾出值為underfined的屬性。

JSON.stringify函數第二個參數是過濾器，表示只保留name和age兩個屬性，也可以以函數作為過濾器。第三個參數是換行縮進，可為數字縮進空格數目，最大縮進為10，可為字符串，表示縮進字符串。

調用stringify，執行順序：toJSON虛函數或對象本身->函數過濾器->存在屬性進行序列化->縮進參數進行格式化。

反序列化

將json字符串轉化為json對象、json數組。

JSON.parse將字符串轉化為js對象或數組，可以使用函數控制轉化操作。

Ajax

Ajax的核心是XmlHttpRequest。我們通過對該對象的操作來進行異步的數據請求。jQuey中使用.ajax，.post等，Angular中使用$http。

創建XHR對象

狀態變化事件

onreadystatechange()狀態變化函數。readyState的取值0為未初始化，未調用open，1已open未send，2已send未回覆，3回覆部分，4全部回覆。在後臺使用推送機制的話，前端會間斷的收到推送數據，狀態為3。responseText包含曾經的所有推送數據，所以每次讀取應該根據舊數據長度查找最新的數據的位置。

響應完成事件

無論什麼響應，接收完成就觸發。

響應異常事件

進度事件

lengthComputable表示進度信息是否可用，position表示已接收數，totalSize表示預期接收數。

請求初始化

opet()準備啟動請求，參數：請求類型post或get，請求地址，是否異步發送。同步的話會等待程序返回方可繼續。

發送請求

發送請求，如果是同步，會直到響應完畢才會繼續運行。參數：請求主體。xhr.abort()取消異步請求。

獲取響應

responseText返回數據，responseXML在響應類型為text/xml和application/xml時返回XML的響應數據。getResponseHeader讀取服務器返回在自定義頭部信息。statusText表示HTTP狀態描述，各瀏覽器不同。

超時函數

請求數據序列化

FormData對象序列化表單，也可以通過new FormData()，創建空的對象。append添加鍵值對，可以在包含file的表單中直接添加文件。

comet

Ajax的出現使客戶端與服務器端傳輸數據少了很多，但還是基於http協議，無法擺脫http協議要求的請求/響應的模式。對於某些需要及時更新的推送通知業務，人們便提出了“反向Ajax”。

Comet的實現主要有兩種方式，基於Ajax的長輪詢（long-polling）方式和基於 Iframe 及 htmlfile 的流（http streaming）方式。而這些大部分功能在後臺完成，前端要做的就是通過ajax請求成功後，在XMLHttpRequest的onreadystatechange函數中持續獲取數據。

SSE

SSE是一種允許服務端向客戶端推送新數據的HTML5技術。與由客戶端每隔幾秒從服務端輪詢拉取新數據相比，這是一種更優的解決方案。

EventSource對象參數為入口點，必須與創建對象的頁面同源(url模式，域、端口)。連接斷開會自動建立,或者使用source.close()強制斷開。open事件在連接建立時觸發，message事件在接收到新數據時觸發，error事件在無法建立連接時觸發。推送數據保存在event.data中。

WebSocket

Websocket是一個全新的、獨立的協議，基於TCP協議，與http協議兼容、卻不會融入http協議。他被設計出來的目的就是要取代輪詢和 Comet 技術。

總結