1.什麼是 XMLHttpRequest 物件？

    XMLHttpRequest 物件用於在後臺與伺服器交換資料。

    XMLHttpRequest 物件提供了對 HTTP 協議的完全的訪問，包括做出 POST請求以及普通的 GET 請求的能力。

    XMLHttpRequest 物件是開發者的夢想，因為您能夠：

• 在不重新載入頁面的情況下更新網頁
• 在頁面已載入後從伺服器請求資料
• 在頁面已載入後從伺服器接收資料
• 在後臺向伺服器傳送資料

    所有現代瀏覽器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都內建了 XMLHttpRequest 物件。

    1.1通過一行簡單的 JavaScript 程式碼，我們就可以建立 XMLHttpRequest 物件。

         JavaScript中建立 XMLHttpRequest 物件的語法：

    var xmlhttp=new XMLHttpRequest();

    var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    1.2JavaScript程式碼塊的簡單示例

<script type="text/javascript">
    function loadXMLDoc(url) {
        var xmlhttp=null;
        if (window.XMLHttpRequest) {//適用於所有的新版瀏覽器
            xmlhttp=new XMLHttpRequest();
        } else if (window.ActiveXObject) {//適用於IE5和IE6
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        var formData = new FormData();
        formData.append('phone', '18217767969');
        formData.append('certID', '4211***78');
        if (xmlhttp!=null){
            xmlhttp.onreadystatechange=state_Change;
            xmlhttp.open("GET",url,true);
            xmlhttp.send(formData);
            
        } else {
            alert("你的瀏覽器不支援XMLHTTP");
        }
    }

    function state_Change() {
        if (xmlhttp.readyState==4) {//xhr.readyState：XMLHttpRequest物件的狀態，等於4表示資料已經接收完畢。
            if (xmlhttp.status==200) {//xmlhttp.status：伺服器返回的狀態碼，等於200表示一切正常。
                //業務邏輯處理
                document.getElementById('T1').innerHTML=xmlhttp.responseText;//xmlhttp.responseText：伺服器返回的文字資料
            } else {
                alert("伺服器響應出現了問題");
            }
        }
    }
</script>
 

注意：onreadystatechange 是一個事件控制代碼。它的值 (state_Change) 是一個函式的名稱，當 XMLHttpRequest 物件的狀態發    生改變時，會觸發此函式。狀態從 0 (uninitialized) 到 4 (complete) 進行變化。僅在狀態為 4 時，我們才執行程式碼。

為什麼使用 Async=true ？

    答：我們的例項在 open() 的第三個引數中使用了 "true"，該引數規定請求是否非同步處理。True 表示指令碼會在 send() 方法之後繼續執行，而不必等待來自伺服器的響應。onreadystatechange 事件使程式碼複雜化了。但是這是在沒有得到伺服器響應的情況下，防止程式碼停止的最安全的方法。通過把該引數設定為 "false"，可以省去額外的 onreadystatechange 程式碼。如果在請求失敗時是否執行其餘的程式碼無關緊要，那麼可以使用這個引數(true)。

XMLHttpRequest物件的屬性說明：

* xhr.readyState：表示HTTP 請求的狀態。

 當一個XMLHttpRequest初次建立時，這個屬性的值從0開始，直到接收到完整的HTTP響應，這個值增加到 4。

 5個狀態中每一個都有一個相關聯的非正式的名稱，下表列出了狀態、名稱和含義：

      readyState 的值不會遞減，除非當一個請求在處理過程中的時候呼叫了 abort() 或 open() 方法。每次這個屬性的值增加的時候，都會觸發 onreadystatechange 事件控制代碼。
* xhr.status：由伺服器返回的 HTTP狀態程式碼，如 200 表示成功，而 404 表示 "Not Found" 錯誤。當 readyState 小於 3 的時候讀取這一屬性會導致一個異常。
* xhr.responseText：表示伺服器返回的文字資料。目前為止為伺服器接收到的響應體（不包括頭部），或者如果還沒有接收到資料的話，就是空字串。如果 readyState 小於 3，這個屬性就是一個空字串。當 readyState 為 3，這個屬性返回目前已經接收的響應部分。如果 readyState 為 4，這個屬性儲存了完整的響應體。如果響應包含了為響應體指定字元編碼的頭部，就使用該編碼。否則，假定使用 Unicode UTF-8。
* xhr.responseXML：對請求的響應，解析為 XML 並作為 Document物件返回。
* xhr.statusText：伺服器返回的狀態文字。這個屬性用名稱而不是數字指定了請求的 HTTP 的狀態程式碼。也就是說，當狀態為 200 的時候它是 "OK"，當狀態為 404 的時候它是 "Not Found"。和 status 屬性一樣，當 readyState 小於 3 的時候讀取這一屬性會導致一個異常。
* xhr.onreadystatechange：表示事件控制代碼。每次 readyState 屬性改變的時候呼叫的事件控制代碼函式。當 readyState 為 3 時，它也可能呼叫多次。

2.XMLHttpRequest裡面的常用函式

    2.1XMLHttpRequest.open(method,url,aysnc)：初始化 HTTP 請求引數，例如 URL 和 HTTP 方法，但是並不傳送請求。

     method：用於指定請求的 HTTP 方法。值包括 GET、POST 和 HEAD。

     url：請求的地址。大多數瀏覽器實施了一個同源安全策略，並且要求這個 URL 與包含指令碼的文字具有相同的主機名和埠。

     async ：表示是否使用非同步請求。如果這個引數是 false，請求是同步的，後續send()的呼叫將會導致後續部分阻塞，直到響應完全接收。如果這個引數是 true 或省略，請求是非同步的，且通常需要一個 onreadystatechange 事件控制代碼。

    2.1XMLHttpRequest.setRequestHeader(name,value)：向一個開啟但未傳送的請求設定或新增一個 請求訊息頭。

    name： 設定的頭部的名稱。value：設定頭部的值。

    JavaScript中的示例：

XMLHttpRequest.setRequestHeader("name","北辰");

    2.3XMLHttpRequest.send(body)：傳送一個 HTTP 請求

    body 引數指定了請求體，作為一個字串或者物件。如果請求體不是必須的話，這個引數就為 null。