摘要：實(shí)現(xiàn)流程創(chuàng)建對(duì)象打開(kāi)請(qǐng)求地址，初始化數(shù)據(jù)發(fā)送請(qǐng)求數(shù)據(jù)監(jiān)聽(tīng)回調(diào)函數(shù)狀態(tài)收到服務(wù)器返回的應(yīng)答結(jié)果。請(qǐng)求完成后回調(diào)函數(shù)請(qǐng)求成功或失敗時(shí)均調(diào)用。

Ajax在前端開(kāi)發(fā)中有著舉足輕重的地位，關(guān)于Ajax的使用和注意事項(xiàng)一直是一個(gè)重要的話(huà)題，借此機(jī)會(huì)，本文希望對(duì)Ajax做一個(gè)全面的總結(jié)，徹底揭開(kāi)Ajax的神秘面紗。

Ajax(Asynchronous JavaScript and XML),可以理解為JavaScript執(zhí)行異步網(wǎng)絡(luò)請(qǐng)求。通俗的理解的話(huà)就是，如果沒(méi)有Ajax技術(shù)，改變網(wǎng)頁(yè)的一小部分（哪怕是一行文字、一張圖片）都需要重新加載一次整個(gè)頁(yè)面，而有了Ajax之后，就可以實(shí)現(xiàn)在網(wǎng)頁(yè)不跳轉(zhuǎn)不刷新的情況下，在網(wǎng)頁(yè)后臺(tái)提交數(shù)據(jù)，部分更新頁(yè)面內(nèi)容。

XMLHttpRequest 對(duì)象用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)，能夠在不重新加載頁(yè)面的情況下更新網(wǎng)頁(yè)，在頁(yè)面已加載后從服務(wù)器請(qǐng)求數(shù)據(jù)，在頁(yè)面已加載后從服務(wù)器接收數(shù)據(jù)，在后臺(tái)向服務(wù)器發(fā)送數(shù)據(jù)。所以XMLHttpRequest對(duì)象是Ajax技術(shù)的核心所在。

創(chuàng)建 XMLHttpRequest對(duì)象——>打開(kāi)請(qǐng)求地址，初始化數(shù)據(jù)——>發(fā)送請(qǐng)求數(shù)據(jù)——>監(jiān)聽(tīng)回調(diào)函數(shù)狀態(tài)——>收到服務(wù)器返回的應(yīng)答結(jié)果。

下面用具體的代碼進(jìn)行解釋?zhuān)?/p>

var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();//在這里創(chuàng)建 XMLHttpRequest對(duì)象
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.open("GET",url,true); //請(qǐng)求的方式和請(qǐng)求地址
  xmlhttp.send(null);//發(fā)送請(qǐng)求
  xmlhttp.onreadystatechange=state_Change;//監(jiān)聽(tīng)回調(diào)函數(shù)
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change() //這里是回調(diào)函數(shù)
{
if (xmlhttp.readyState==4&&xmlhttp.status==200)
     //當(dāng)滿(mǎn)足這兩個(gè)條件時(shí)表示請(qǐng)求成功,完成響應(yīng) 4 = "loaded", 200 = OK  
  { 
    var data=xmlhttp.responseText; //拿到服務(wù)器返回的數(shù)據(jù)
        // ...our code here...在這里進(jìn)行數(shù)據(jù)返回后的操作
  }else
    {
    alert("Problem retrieving XML data");
    }
}

(1).open() 的第三個(gè)參數(shù)中使用了 "true",該參數(shù)規(guī)定請(qǐng)求是否異步處理，默認(rèn)是異步。True 表示腳本會(huì)在 send() 方法之后繼續(xù)執(zhí)行，而不等待來(lái)自服務(wù)器的響應(yīng)。

(2).關(guān)于readyState

(3).關(guān)于status
由服務(wù)器返回的 HTTP 狀態(tài)代碼，200 表示成功，而 404 表示 "Not Found" 錯(cuò)誤。當(dāng) readyState 小于 3 的時(shí)候讀取這一屬性會(huì)導(dǎo)致一個(gè)異常。(后面會(huì)有http狀態(tài)碼的詳細(xì)解讀)

JQuery對(duì)原生Ajax做了很好的封裝，使用起來(lái)非常簡(jiǎn)單方便,具體的很多方法如 $.ajax，$.post， $.get， $.getJSON等能根據(jù)不同需要進(jìn)行調(diào)用，寫(xiě)法更加簡(jiǎn)潔，但是為了兼顧各個(gè)方法在這里我以一個(gè)通用的方法 $.ajax為例做一個(gè)簡(jiǎn)單的解析,按照下面的模式寫(xiě)好各個(gè)參數(shù),就能成功進(jìn)行Ajax的請(qǐng)求了,可能在實(shí)際中使用 $.post， $.get 這兩個(gè)方法使用比較多，但是**理****解$.ajax 這個(gè)通用的方法能對(duì)封裝原理有很好的認(rèn)識(shí)。**

 $.ajax({
       type:   //數(shù)據(jù)的提交方式：get和post
       url:    //請(qǐng)求地址
       async:   //是否支持異步刷新，默認(rèn)是true
       data:    //需要提交的數(shù)據(jù)
       dataType:   //服務(wù)器返回?cái)?shù)據(jù)的類(lèi)型，例如xml,String,Json等
       success:function(data){
       
       }    //請(qǐng)求成功后的回調(diào)函數(shù),參數(shù)data就是服務(wù)器返回的數(shù)據(jù)
       error:function(data){
       }   //請(qǐng)求失敗后的回調(diào)函數(shù)，根據(jù)需要可以不寫(xiě)，一般只寫(xiě)上面的success回調(diào)函數(shù)
    })

作為Ajax最常用的兩種數(shù)據(jù)提交方式，GET和POST有著自己的特點(diǎn)和適用場(chǎng)景，正確區(qū)分GET和POST的不同并根據(jù)實(shí)際需要進(jìn)行選用在開(kāi)發(fā)中十分重要，簡(jiǎn)單但是關(guān)鍵！

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

從表格中拎出關(guān)鍵點(diǎn)：
1.傳遞數(shù)據(jù)的方式不同：get是直接把請(qǐng)求數(shù)據(jù)放在url的后面，是可見(jiàn)的，post的請(qǐng)求數(shù)據(jù)不會(huì)顯示在url中，是不可見(jiàn)的。
2.數(shù)據(jù)長(zhǎng)度和數(shù)據(jù)類(lèi)型的差異：get有數(shù)據(jù)長(zhǎng)度的的限制，且數(shù)據(jù)類(lèi)型只允許ASCII字符，post在這兩方面都沒(méi)有限制。
3.安全性的差異：get不安全，post更安全。

由此得出的兩者的使用場(chǎng)景：get使用較方便，適用于頁(yè)面之間非敏感數(shù)據(jù)的簡(jiǎn)單傳值，post使用較為安全，適用于向服務(wù)器發(fā)送密碼、token等敏感數(shù)據(jù)。

JQuery封裝的Ajax回調(diào)函數(shù)中，success、error、complete是最常用的三個(gè)，其中，success和error很好區(qū)別，一個(gè)是請(qǐng)求成功調(diào)用的，另一個(gè)是請(qǐng)求失敗調(diào)用的，從字面上就可以理解。但是success和complete容易混淆，在這里特別做一個(gè)說(shuō)明：

success:請(qǐng)求成功后回調(diào)函數(shù)。
complete:請(qǐng)求完成后回調(diào)函數(shù) (請(qǐng)求成功或失敗時(shí)均調(diào)用)。

注意到括號(hào)里面了嗎，沒(méi)錯(cuò)，區(qū)別就在于complete只要請(qǐng)求完成，不論是成功還是失敗均會(huì)調(diào)用。也就是說(shuō)如果調(diào)用了success，一定會(huì)調(diào)用complete；反過(guò)來(lái)調(diào)用了complete，不一定會(huì)調(diào)用success。(狀態(tài)碼404、403、301、302...都會(huì)進(jìn)入complete，只要不出錯(cuò)就會(huì)調(diào)用)

Ajax中的是 "x" 指的就是XML。
xml:可擴(kuò)展標(biāo)記語(yǔ)言，標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集，是一種用于標(biāo)記電子文件使其具有結(jié)構(gòu)性的標(biāo)記語(yǔ)言。
xml作為一種數(shù)據(jù)交互格式，廣泛用在計(jì)算機(jī)領(lǐng)域，然而，隨著json的發(fā)展，json以其明顯的優(yōu)勢(shì)已經(jīng)漸漸取代了xml成為現(xiàn)在數(shù)據(jù)交互格式的標(biāo)準(zhǔn)，所以在這里，想強(qiáng)調(diào)的是，json現(xiàn)在是主流的數(shù)據(jù)交互格式，前后端的交互標(biāo)準(zhǔn)，無(wú)論是前端提交給后臺(tái)的數(shù)據(jù)，還是后臺(tái)返回給前端的數(shù)據(jù)，都最好統(tǒng)一為json格式，各自接收到數(shù)據(jù)后再解析數(shù)據(jù)即可供后續(xù)使用。所以 "Ajax" 實(shí)際上已經(jīng)發(fā)展為 "Ajaj"

json 和 jsonp 看起來(lái)只相差了一個(gè) “p” ，然而實(shí)際上根本不是一個(gè)東西，千萬(wàn)別以為是差不多的兩個(gè)概念。
json：(JavaScript Object Notation, JS 對(duì)象標(biāo)記) 是一種輕量級(jí)的數(shù)據(jù)交換格式。
jsonp：一種借助“

Accept：客戶(hù)端支持的數(shù)據(jù)類(lèi)型
Accept-Charset：客戶(hù)端采用的編碼
Accept-Encoding：客戶(hù)端支持的數(shù)據(jù)壓縮格式
Accept-Language：客戶(hù)端的語(yǔ)言環(huán)境
Cookie：客服端的cookie
Host：請(qǐng)求的服務(wù)器地址
Connection：客戶(hù)端與服務(wù)連接類(lèi)型
If-Modified-Since:上一次請(qǐng)求資源的緩存時(shí)間，與Last-Modified對(duì)應(yīng)
If-None-Match：客戶(hù)段緩存數(shù)據(jù)的唯一標(biāo)識(shí)，與Etag對(duì)應(yīng)
Referer:發(fā)起請(qǐng)求的源地址。

content-encoding：響應(yīng)數(shù)據(jù)的壓縮格式。
content-length：響應(yīng)數(shù)據(jù)的長(zhǎng)度。
content-language：語(yǔ)言環(huán)境。
content-type：響應(yīng)數(shù)據(jù)的類(lèi)型。
Date:消息發(fā)送的時(shí)間
Age:經(jīng)過(guò)的時(shí)間
Etag:被請(qǐng)求變量的實(shí)體值,用于判斷請(qǐng)求的資源是否發(fā)生變化
Expires：緩存的過(guò)期時(shí)間
Last-Modified：在服務(wù)器端最后被修改的時(shí)間
server：服務(wù)器的型號(hào)

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

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

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

1.頁(yè)面無(wú)刷新，在頁(yè)面內(nèi)與服務(wù)器通信，減少用戶(hù)等待時(shí)間，增強(qiáng)了用戶(hù)體驗(yàn)。
2.使用異步方式與服務(wù)器通信，響應(yīng)速度更快。
3.可以把一些原本服務(wù)器的工作轉(zhuǎn)接到客戶(hù)端，利用客戶(hù)端閑置的能力來(lái)處理，減輕了服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本。
4.基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載插件或者小程序。

1.無(wú)法進(jìn)行操作的后退，即不支持瀏覽器的頁(yè)面后退。
2.對(duì)搜索引擎的支持比較弱。
3.可能會(huì)影響程序中的異常處理機(jī)制。
4.安全問(wèn)題，對(duì)一些網(wǎng)站攻擊，如csrf、xxs、sql注入等不能很好地防御。