Ajax，全名為Ajax-Asynchronous JavaScript and Xml。是實現客戶端與服務器端異步交互的主要手段，主要使用在B/S架構上。

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

同步交互：

    客戶端向服務器端發送請求，到服務器端進行響應，這個過程中，用戶是不能做任何其他事情（只能等）。

異步交互：

    客戶端向服務器端發送請求，直到服務器端進行響應，這個過程中，用戶可以做任何其他事情（不用等）。

二.同步交互和異步交互的區別：

同步交互：

    1.執行速度相對異步交互慢。

    2.響應的是完整的HTML頁面。

異步交互：

    1.執行速度相對同步交互要快。

    2.響應的是部分數據。

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

四.如何創建Ajax核心對象

固定套路，就是先定義一個一個創建XMLHttpRequest對象的函數，在用變量去調用該函數進行創建。

1. // 定義創建XMLHttpRequest對象的函數
   
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();//創建XMLHttpRequest對象

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

屬性：

    readyState - 服務器端的響應狀態

    status - 服務器端狀態碼

    responseText - 服務器端返回的文本內容

    responseXML - 服務端返回的XML格式數據

方法：

    abort() - 請求

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

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

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

    open(method,url) - 創建鏈接

            method:get/post（常用）

    send() - 發送鏈接

            如果open的method為get,send里的參數為null

事件：

    onreadystatechange - 監聽事件

            當服務器的狀體改變是就會觸發該數據（readyState）；

六.實現Ajax的異步交互步驟

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

1. var xhr=getXhr(); //調用創建XMLHttpRequset對象函數
   
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. }