Ajax 的全面總結

最新 11-03

Ajax在前端開發中有著舉足輕重的地位，關於Ajax的使用和注意事項一直是一個重要的話題，藉此機會，本文希望對Ajax做一個全面的總結，徹底揭開Ajax的神秘面紗。

一.什麼是Ajax

Ajax(Asynchronous JavaScript and XML),可以理解為JavaScript執行非同步網路請求。通俗的理解的話就是，如果沒有Ajax技術，改變網頁的一小部分（哪怕是一行文字、一張圖片）都需要重新載入一次整個頁面，而有了Ajax之後，就可以實現在網頁不跳轉不刷新的情況下，在網頁後台提交數據，部分更新頁面內容。

二.Ajax的原生寫法

1.XMLHttpRequest對象

XMLHttpRequest 對象用於在後台與伺服器交換數據，能夠在不重新載入頁面的情況下更新網頁，在頁面已載入後從伺服器請求數據，在頁面已載入後從伺服器接收數據，在後台向伺服器發送數據。所以XMLHttpRequest對象是Ajax技術的核心所在。

2.實現流程

創建 XMLHttpRequest對象——>打開請求地址，初始化數據——>發送請求數據——>監聽回調函數狀態——>收到伺服器返回的應答結果。

下面用具體的代碼進行解釋：

3.原生寫法中的注意點

(1).open() 的第三個參數中使用了 "true",該參數規定請求是否非同步處理，默認是非同步。True 表示腳本會在 send() 方法之後繼續執行，而不等待來自伺服器的響應。

(2).關於readyState

(3).關於status 由伺服器返回的 HTTP 狀態代碼，200 表示成功，而 404 表示 "Not Found" 錯誤。當 readyState 小於 3 的時候讀取這一屬性會導致一個異常。(後面會有http狀態碼的詳細解讀)

三.JQuery中的Ajax

JQuery對原生Ajax做了很好的封裝，使用起來非常簡單方便,具體的很多方法如 $.ajax，$.post， $.get， $.getJSON等能根據不同需要進行調用，寫法更加簡潔，但是為了兼顧各個方法在這裡我以一個通用的方法 $.ajax為例做一個簡單的解析,按照下面的模式寫好各個參數,就能成功進行Ajax的請求了,可能在實際中使用 $.post， $.get 這兩個方法使用比較多，但是理解$.ajax 這個通用的方法能對封裝原理有很好的認識。

四.GET or POST？

作為Ajax最常用的兩種數據提交方式，GET和POST有著自己的特點和適用場景，正確區分GET和POST的不同並根據實際需要進行選用在開發中十分重要，簡單但是關鍵！

先上一張GET 和 POST的比較圖，從這張圖中可以看出兩者之間的差別：

從表格中拎出關鍵點：1.傳遞數據的方式不同：get是直接把請求數據放在url的後面，是可見的，post的請求數據不會顯示在url中，是不可見的。 2.數據長度和數據類型的差異：get有數據長度的的限制，且數據類型只允許ASCII字元，post在這兩方面都沒有限制。 3.安全性的差異：get不安全，post更安全。

由此得出的兩者的使用場景：get使用較方便，適用於頁面之間非敏感數據的簡單傳值，post使用較為安全，適用於向伺服器發送密碼、token等敏感數據。

五.success和complete的區別

JQuery封裝的Ajax回調函數中，success、error、complete是最常用的三個，其中，success和error很好區別，一個是請求成功調用的，另一個是請求失敗調用的，從字面上就可以理解。但是success和complete容易混淆，在這裡特別做一個說明：

success:請求成功後回調函數。

complete:請求完成後回調函數 (請求成功或失敗時均調用)。

注意到括弧裡面了嗎，沒錯，區別就在於complete只要請求完成，不論是成功還是失敗均會調用。也就是說如果調用了success，一定會調用complete；反過來調用了complete，不一定會調用success。(狀態碼404、403、301、302...都會進入complete，只要不出錯就會調用)

六.XML -> JSON

Ajax中的是 "x" 指的就是XML。

xml:可擴展標記語言，標準通用標記語言的子集，是一種用於標記電子文件使其具有結構性的標記語言。

xml作為一種數據交互格式，廣泛用在計算機領域，然而，隨著json的發展，json以其明顯的優勢已經漸漸取代了xml成為現在數據交互格式的標準，所以在這裡，想強調的是，json現在是主流的數據交互格式，前後端的交互標準，無論是前端提交給後台的數據，還是後台返回給前端的數據，都最好統一為json格式，各自接收到數據後再解析數據即可供後續使用。所以 "Ajax" 實際上已經發展為 "Ajaj"

七.JSON和JSONP

json 和 jsonp 看起來只相差了一個「p」，然而實際上根本不是一個東西，千萬別以為是差不多的兩個概念。

json：(JavaScript Object Notation, JS 對象標記) 是一種輕量級的數據交換格式。

jsonp：一種藉助元素解決主流瀏覽器的跨域數據訪問問題的方式。

八.Ajax跨域訪問

ajax很好，但不是萬能的，ajax的請求與訪問同樣會受到瀏覽器同源策略的限制，不能訪問不同主域中的地址。所以，為了解決這一問題，實現跨域訪問，有很多種方式，上述提到的jsonp就是一種流行的方式，還有其他一些方式，我在這裡就不展開說了，只是想說明ajax的使用也是有條件的，任何技術的實現都不會是沒有限制的。跨域訪問時一個很重要的知識點，之前專門寫過一篇關於跨域訪問的總結，還挺詳細的，可以移步查看： javascript中實現跨域的方式總結

九.再議HTTP狀態碼

前面提到的"200"、"404"只是http狀態碼中常見的兩個，當瀏覽者訪問一個網頁時，瀏覽者的瀏覽器會向網頁所在伺服器發出請求。當瀏覽器接收並顯示網頁前，此網頁所在的伺服器會返回一個包含HTTP狀態碼的信息頭（server header）用以響應瀏覽器的請求。

需要掌握的常見http狀態碼大致有以下一些：

十.不可忽視的HTTP頭文件

http請求中的一個重要關注點就是請求頭和響應頭的內容，從這兩個頭文件中可以看出很多東西，當我們用發送一個ajax請求的時候，如果沒有達到預期的效果，那麼就需要打開瀏覽器的調試工具，從NetWork中找到相應的ajax請求，再通過查看請求頭和響應頭的信息，大體會知道這次請求的結果是怎麼樣的，結合響應的主體內容，可以很快找到問題。所以學會看http的頭文件信息是前端開發中必須掌握的一個技能，下面就來看看具體的頭文件信息。

1.請求頭信息：