前端必備——js中前端與後臺的數據交互全解

只要編程語言可以支持網卡端口的監聽和發送，理論上都是能夠實現服務器後臺設計的。也所以形成了實現後臺的語言偏多，而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 技術。

總結