Ajax的全面總結

Ajax在前端開發中有着舉足輕重的地位，關於Ajax的使用和注意事項一直是一個重要的話題，藉此機會，本文但願對Ajax作一個全面的總結，完全揭開Ajax的神祕面紗。

一.什麼是Ajax

Ajax(Asynchronous JavaScript and XML),能夠理解爲JavaScript執行異步網絡請求。通俗的理解的話就是，若是沒有Ajax技術，改變網頁的一小部分（哪怕是一行文字、一張圖片）都須要從新加載一次整個頁面，而有了Ajax以後，就能夠實如今網頁不跳轉不刷新的狀況下，在網頁後臺提交數據，部分更新頁面內容。

二.Ajax的原生寫法

1.XMLHttpRequest對象

XMLHttpRequest 對象用於在後臺與服務器交換數據，可以在不從新加載頁面的狀況下更新網頁，在頁面已加載後從服務器請求數據，在頁面已加載後從服務器接收數據，在後臺向服務器發送數據。因此XMLHttpRequest對象是Ajax技術的核心所在。

2.實現流程

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

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

var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();//在這裏建立 XMLHttpRequest對象
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.open("GET",url,true); //請求的方式和請求地址
  xmlhttp.send(null);//發送請求
  xmlhttp.onreadystatechange=state_Change;//監聽回調函數
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change() //這裏是回調函數
{
if (xmlhttp.readyState==4&&xmlhttp.status==200)
     //當知足這兩個條件時表示請求成功,完成響應 4 = "loaded", 200 = OK  
  { 
    var data=xmlhttp.responseText; //拿到服務器返回的數據
        // ...our code here...在這裏進行數據返回後的操做
  }else
    {
    alert("Problem retrieving XML data");
    }
}

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 這個通用的方法能對封裝原理有很好的認識。**

$.ajax({
       type:   //數據的提交方式：get和post
       url:    //請求地址
       async:   //是否支持異步刷新，默認是true
       data:    //須要提交的數據
       dataType:   //服務器返回數據的類型，例如xml,String,Json等
       success:function(data){
       
       }    //請求成功後的回調函數,參數data就是服務器返回的數據
       error:function(data){
       }   //請求失敗後的回調函數，根據須要能夠不寫，通常只寫上面的success回調函數
    })

四.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。(狀態碼40四、40三、30一、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：一種藉助「<script>」元素解決主流瀏覽器的跨域數據訪問問題的方式。

八.Ajax跨域訪問

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

九.再議HTTP狀態碼

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

101：切換協議，服務器根據客戶端的請求切換協議
200：請求成功。通常用於GET與POST請求
301：永久重定向
302：臨時重定向
303：與301相似。使用GET和POST請求查看
304：請求資源未修改，使用緩存
307：與302相似。使用GET請求重定向
404：客戶端請求失敗
408：請求超時
500：內部服務器錯誤，沒法完成請求
505:服務器不支持請求的HTTP協議的版本，沒法完成處理

十.不可忽視的HTTP頭文件

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

首先隨便上一張sf中的完成一個搜索結果的http請求，能夠從圖中的右側清楚看到請求頭和響應頭的內容，包括了不少個字段信息，這些字段信息就是咱們須要掌握的知識點，下面挑出其中的重點字段進行分析。

1.請求頭信息：

Accept：客戶端支持的數據類型
Accept-Charset：客戶端採用的編碼
Accept-Encoding：客戶端支持的數據壓縮格式
Accept-Language：客戶端的語言環境
Cookie：客服端的cookie
Host：請求的服務器地址
Connection：客戶端與服務鏈接類型
If-Modified-Since:上一次請求資源的緩存時間，與Last-Modified對應
If-None-Match：客戶段緩存數據的惟一標識，與Etag對應
Referer:發起請求的源地址。

2.響應頭信息：

content-encoding：響應數據的壓縮格式。
content-length：響應數據的長度。
content-language：語言環境。
content-type：響應數據的類型。
Date:消息發送的時間
Age:通過的時間
Etag:被請求變量的實體值,用於判斷請求的資源是否發生變化
Expires：緩存的過時時間
Last-Modified：在服務器端最後被修改的時間
server：服務器的型號

3.二者均可能出現的消息

Pragma：是否緩存(http1.0提出)
Cache-Control:是否緩存(http1.1提出)

4.跟緩存相關的字段

(1) 強制緩存
expire 和 cache-control

(2) 對比緩存
Last-Modified 和 If-Modified-Since
Etag 和 If-None-Match

十一.Ajax的優缺點

1.優勢：

1.頁面無刷新，在頁面內與服務器通訊，減小用戶等待時間，加強了用戶體驗。
2.使用異步方式與服務器通訊，響應速度更快。
3.能夠把一些本來服務器的工做轉接到客戶端，利用客戶端閒置的能力來處理，減輕了服務器和帶寬的負擔，節約空間和寬帶租用成本。
4.基於標準化的並被普遍支持的技術，不須要下載插件或者小程序。

2.缺點：

1.沒法進行操做的後退，即不支持瀏覽器的頁面後退。2.對搜索引擎的支持比較弱。3.可能會影響程序中的異常處理機制。4.安全問題，對一些網站攻擊，如csrf、xxs、sql注入等不能很好地防護。