Ajax，全名為Ajax-Asynchronous JavaScript and Xml。是實現(xiàn)客戶端與服務(wù)器端異步交互的主要手段，主要使用在B/S架構(gòu)上。

一.在瀏覽器中一般分為同步交互和異步交互兩種交互模式。

同步交互：

    客戶端向服務(wù)器端發(fā)送請求，到服務(wù)器端進(jìn)行響應(yīng)，這個過程中，用戶是不能做任何其他事情（只能等）。

異步交互：

    客戶端向服務(wù)器端發(fā)送請求，直到服務(wù)器端進(jìn)行響應(yīng)，這個過程中，用戶可以做任何其他事情（不用等）。

二.同步交互和異步交互的區(qū)別：

同步交互：

    1.執(zhí)行速度相對異步交互慢。

    2.響應(yīng)的是完整的HTML頁面。

異步交互：

    1.執(zhí)行速度相對同步交互要快。

    2.響應(yīng)的是部分?jǐn)?shù)據(jù)。

三.Ajax核心對象-----XMLHttpRequest對象，Ajax所有的屬性和方法以及事件都需要在XMLHttpRequest對象中進(jìn)行調(diào)用。

四.如何創(chuàng)建Ajax核心對象

固定套路，就是先定義一個一個創(chuàng)建XMLHttpRequest對象的函數(shù)，在用變量去調(diào)用該函數(shù)進(jìn)行創(chuàng)建。

1. // 定義創(chuàng)建XMLHttpRequest對象的函數(shù)
   
2. function getXhr(){
   
3.         var xhr=null;
   
4.         if(window.XMLHttpRequest){
   
5.                 xhr=new XMLHttpRequest(); //除IE外其他瀏覽器
   
6.         }else{
   
7.                 xhr=new ActiveXObject('Microsoft.XMLHttp') //IE
   
8.         }
   
9.         return xhr;
   
10.         }
    
11. 
    
12. 
    
13. var xhr=getXhr();//創(chuàng)建XMLHttpRequest對象

五.Ajax常用的屬性、方法及事件

屬性：

    readyState - 服務(wù)器端的響應(yīng)狀態(tài)

    status - 服務(wù)器端狀態(tài)碼

    responseText - 服務(wù)器端返回的文本內(nèi)容

    responseXML - 服務(wù)端返回的XML格式數(shù)據(jù)

方法：

    abort() - 請求

    getAllRequestHeaders() - 獲取響應(yīng)的所有http頭

    getRequestHeader() - 獲取指定響應(yīng)的http頭

    setRequestHeader() - 設(shè)置指定請求的http頭

    open(method,url) - 創(chuàng)建鏈接

            method:get/post（常用）

    send() - 發(fā)送鏈接

            如果open的method為get,send里的參數(shù)為null

事件：

    onreadystatechange - 監(jiān)聽事件

            當(dāng)服務(wù)器的狀體改變是就會觸發(fā)該數(shù)據(jù)（readyState）；

六.實現(xiàn)Ajax的異步交互步驟

創(chuàng)建XMLHttpRequest核心對象
        固定寫法 - 獨(dú)立編寫
                與服務(wù)器端建立連接
        使用XMLHttpRequest對象的open(method,url)方法
                method - 設(shè)置當(dāng)前請求的類型
                url - 設(shè)置當(dāng)前請求的地址
        向服務(wù)器端發(fā)送請求
                使用XMLHttpRequest對象的send(請求參數(shù))方法
                請求參數(shù)的格式 - key=value
        接收服務(wù)器端的響應(yīng)數(shù)據(jù)
                使用XMLHttpRequest對象的onreadystatechange事件,監(jiān)聽服務(wù)器端的通信狀態(tài)
                使用XMLHttpRequest對象的readyState屬性,判斷服務(wù)器端的當(dāng)前狀態(tài)(0-4)
                使用XMLHttpRequest對象的status屬性,判斷服務(wù)器端的狀態(tài)碼(200)
                使用XMLHttpRequest對象的responseText屬性,接收服務(wù)器端的響應(yīng)數(shù)據(jù)

1. var xhr=getXhr(); //調(diào)用創(chuàng)建XMLHttpRequset對象函數(shù)
   
2. xhr.open('post','05.php');
   
3. xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
   
4. xhr.send('state=2&provcince='+provinceEle.value);
   
5. xhr.onreadystatechange=function(){
   
6.         if(xhr.readyState==4&&xhr.status==200){
   
7.                 var data=xhr.responseText;
   
8.                 console.log(data);
   
9.         }
   
10. }