AJAX學習筆記 - 通訊格式

番茄西紅柿發布于2019-08-22 11:51 / 543人閱讀

摘要：本文章記錄本人在深入學習中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復習。格式數據極其的冗長。但是使用格式還是可能比實際的數據占用更多的空間。該字符串通過或者轉換為一個本地的對象。

本文章記錄本人在深入學習Javascirpt AJAX中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復習。

避免使用 XML

沒有哪種格式從始至終比其他格式都更好。根據傳送數據的類型、在頁面上使用的目的不同，某種格式數據可能下周更快，另一種數據可能解析更快。

XML格式數據極其的冗長。因為每個離散的數據片段需要大量的XML結構，所有有效的數據的比例非常低。XML語法還有輕微的模糊。

還有，解析XML是非常占程序員的精力的。你需要提前了解詳細的結構和確切地知道如何解開這個結構，然后細心地將他們寫入js對象中。

謹慎使用 HTML 格式

js是能夠較快的把一個大數據結構轉化為簡單的html，但是服務器完成同樣的工作的速度更加快。一種技術考慮是在服務器端構建整個html，然后將其傳遞給客戶端，js只是簡單的下載它并且放入innerHTML。

什么情況下使用html格式：

html是一種詳細的數據格式，比XML更加的冗長。數據本身的最外層可以有嵌套的html標簽，每個標簽都具有id class等其他的屬性。但是使用html格式還是可能比實際的數據占用更多的空間。正因如此。只有在客戶端CPU比帶寬更受限的時候才使用這個技術。

有一種格式是包含最少數量的結構，需要在客戶端解析數據。如JSON等將這種格式下載到客戶機非常塊，然而這一過程需要引擎花費更多的時間將他們轉化成html以顯示在頁面上。這是需要很多字符的操作，而字符的操作也是js最慢的操作之一。

在服務器上創建html，這種格式在線操作數據量大，下載時間長，不過一旦下載完，只需要一個操作就可以顯示在頁面上。這種格式與其他幾種格式的差別：“解析”在這種情況下指的是將html插入dom的操作。此外，html不能像本地js數組那樣輕易迅速地進行迭代操作。

html格式的缺點

html傳輸量大，需要的解析時間也很長。將html插入到dom的單一操作看似簡單，只有一行代碼，卻需要時間加載很多數據。一句話總結html格式：作為數據格式，它緩慢且臃腫。

推薦使用 JSON

JSON是一種輕量級易與解析的數據格式，它按照js的對象和數組的字面量格式來書寫。下面的代碼是用JSON編寫的用戶列表：

[
    {
        "name": "john",
        "age": 15
    },
    {
        "name": "wall",
        "age": 22
    },
    {
        "name": "ben",
        "age": 8
    }
]

JSON的優點：

相比與XML，JSON有許多優點：在總響應報文中，結構占用的空間更小。數據占用的更多。JSON對大多數的服務端編程語言/解碼庫之間有著很好的互操作性。JSON在客戶端的解析工作微不足道，可將更多的代碼的時間放在其他數據的處理上。

使用JSONP：

當你使用XHR的時候，JSON數據作為一個字符串返回。該字符串通過eval()或者JSON.parse()轉換為一個本地的對象。當使用動態腳本標簽插入的時候，JSON數據被視另一個js文件并作為本地碼執行。為做到這一點，數據必須被包括在回調函數之中。這就是所謂的JSON填充或JSONP。下面是用JSONP編寫的用戶列表：

parseJSON([
    {
        "name": "john",
        "age": 15
    },
    {
        "name": "wall",
        "age": 22
    },
    {
        "name": "ben",
        "age": 8
    }
])

JSONP文件大小和下載時間與XHR測試基本相同，而解析時間幾乎塊了10倍。標準JSONP的解析時間為0，因為根本就用不著解析，他已經是本地格式了。

最快的JSON格式就是使用數組的JSONP格式，雖然這種格式只比使用XHR的JSON略快，但是這種差異隨著列表尺寸的增大而增大。如果所從事的項目需要一個由10000以上的單元構成的列表，那么使用JSONP比使用JSON快多了。

JSONP的問題:

要避免使用JSONP還有一個與性能無關的原因：JSONP必須是可執行的js，利用動態腳本注入技術可以在任何網站上被任何人調用。從另一個角度來說，JSON在運行之前并不是有效的js，使用XHR時只是被當作字符串獲取。不要將任何敏感的數據編碼設置為JSONP，因為無法確定他是否包含私密信息、隨機的url或者cookie。

最后，如果文章有什么錯誤和疑問的地方，請指出。與sf各位共勉！

云服務器 GPU云服務器 ajax格式學習筆記學習筆記一基礎學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92327.html

重學前端學習筆記（十一）--瀏覽器工作解析（一）

摘要：緊跟在后面的是請求頭，每行用冒號分隔名稱和值按下兩次回車，收到服務端回復響應部分第一行被稱作，它也分為三個部分，協議和版本狀態碼和狀態文本。對前端來說系列的狀態碼是非常陌生的，原因是的狀態被瀏覽器庫直接處理掉了，不會讓上層應用知曉。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要...

paulli3 2019-08-02 16:17 評論0 收藏0
重學前端學習筆記（十一）--瀏覽器工作解析（一）

摘要：緊跟在后面的是請求頭，每行用冒號分隔名稱和值按下兩次回車，收到服務端回復響應部分第一行被稱作，它也分為三個部分，協議和版本狀態碼和狀態文本。對前端來說系列的狀態碼是非常陌生的，原因是的狀態被瀏覽器庫直接處理掉了，不會讓上層應用知曉。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要...

付永剛 2019-08-30 10:49 評論0 收藏0
重學前端學習筆記（十一）--瀏覽器工作解析（一）

摘要：緊跟在后面的是請求頭，每行用冒號分隔名稱和值按下兩次回車，收到服務端回復響應部分第一行被稱作，它也分為三個部分，協議和版本狀態碼和狀態文本。對前端來說系列的狀態碼是非常陌生的，原因是的狀態被瀏覽器庫直接處理掉了，不會讓上層應用知曉。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要...

alighters 2019-08-26 18:26 評論0 收藏0