Ajax 發送請求

交互過程中，發送請求是第一步。那么，我們將如何構造一個請求呢？

這一章節，我們將一步一步來構建一個 Ajax 請求。學習本節，你將學會：

• 如何通過 XMLHttpRequest 和 ActiveXObject 來構造一個通用的 xhr 對象。

• 如何通過 xhr 對象來發送 GET、 POST 等請求。

• Content-type 在 Ajax 數據發送中的作用。

那么，接下來讓我們進入本節的學習吧。

1. 構造 xhr 對象

首先，我們需要構造一個 xhr 對象。具體方法就是通過 new 來實例化一個 XMLHttpRequest 實例。

const xhr = new XMLHttpRequest();

問題來了，我們知道早期瀏覽器如 IE5、IE6 并沒有直接支持 XMLHttpRequest，如果我們直接使用 XMLHttpRequest 構造函數，很大可能在早期瀏覽器我們會得到一個未定義的報錯。因此，我們需要通過一定兼容性的寫法來解決這個問題。

var xhr;
if (window.XMLHttpRequest) {
    // 如果存在 XMLHttpRequest，就直接使用 XMLHttpRequest
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    // IE
    // 如果不存在 XMLHttpRequest，但存在 ActiveXObject，則考慮 ActiveXObject 的情況
    
    // XMLHttp 版本
    var versions = [
        "Msxml2.XMLHttp.5.0",
        "Msxml2.XMLHttp.4.0",
        "Msxml2.XMLHttp.3.0",
        "Msxml2.XMLHttp",
        "Microsoft.XMLHttp"
    ];
    
    // 通過 for 循環嘗試生成某個 XMLHttp 版本的 ActiveXObject 實例
    // try...catch.. 捕獲并消化掉 ActiveXObject 實例化失敗的錯誤
    try {
        for (var i = 0; i < versions.length; i++) {
            xhr = new ActiveXObject(versions[i]);
            break;
        }
    } catch (error) {}
}

if (!xhr) {
    alert("當前環境不支持初始化Ajax對象");
}

ActiveXObject 屬于微軟的私有拓展對象，只有在 IE 上才會有支持。該對象只能用于實例化自動化對象。 在我們上面的代碼實現中，實例化一個 ActiveXObject 我們會傳入參數 Msxml2.XMLHTTP 或者 Microsoft.XMLHTTP 等，該參數代表著提供對象的應用程序的名稱。

其中，Msxml2.XMLHttp.5.0、Msxml2.XMLHttp.4.0、Msxml2.XMLHttp.3.0、Msxml2.XMLHttp 和 Microsoft.XMLHttp分別代表著 XMLHttp 的高低版本。我們通過 for 循環，在采用正常有效版本的時候跳出循環。同時，使用 try…catch… 來捕獲消化不支持情況下的報錯。

當然，我們也可以包裝我們的 xhr 對象，比如，我們可以通過執行匿名函數：

var xhr = (function() {
    var hr; // 定義一個局部 xhr 對象， 這里命名 hr
    if (window.XMLHttpRequest) {
        hr = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        // IE
        var versions = [
            "Msxml2.XMLHttp.5.0",
            "Msxml2.XMLHttp.4.0",
            "Msxml2.XMLHttp.3.0",
            "Msxml2.XMLHttp",
            "Microsoft.XMLHttp"
        ];
        try {
            for (var i = 0; i < versions.length; i++) {
                hr = new ActiveXObject(versions[i]);
                break;
            }
        } catch (error) {}
    }
    return hr; // 返回我們最后的 xhr 對象，如果宿主環境不提供 XMLHttpRequest 及 ActiveXObject， 返回 undefined
})();

2. 發送一個請求

構建了 xhr 對象之后，我們可以通過方法的調用來進行請求的發送。

xhr.open('GET', 'http://www.example.com');
xhr.send();

這是最簡單最典型的發送請求的做法。只需要短短 2 行代碼，我們就可以執行一個請求發送動作。

實際上 XMLHttpRequest.open 這個方法的參數不止兩個這么少，一共有 5 個參數：

xhrReq.open(method, url, async, user, password);

這些參數分別代表著：

• method: 代表HTTP請求的方法名，比如 GET、POST、 PUT 和 DELETE。
• url: 一個DomString，代表著要想向其發送請求的 url。
• async: 表示是否異步。
• user：用戶名，用于認證用途。
• password：密碼，用于認證用途。

其中，user 和 password 都是用于認證用途。而前 3 個參數是我們經常都會使用到的。這里著重說的是參數 async。默認情況下，async 為 true，代表著請求將是異步的。當然我們也可以設置為 false，這樣我們就可以同步請求了。然而，事實上我們應該盡量不這么做，因為同步的請求會阻塞我們的UI和一切用戶活動，造成的體驗非常不好。

到目前為止，如果你也跟著做的話應該能看到已經可以發送一個 Ajax 請求了，雖然它是失敗的，因為你并沒有正確的服務能夠處理這個請求。如果你在瀏覽器上運行，打開控制臺，你應該會得到這樣的一個效果：

3. GET 請求

在數據交互中，我們經常會使用 GET 請求來查詢數據，現在假設我們有一個簡單的GET請求，查詢接口 http://localhost:8080/simple/get，附帶 query參數 為 mk=慕課網，那么我們可以構建代碼塊：

xhr.open("GET", "http://localhost:8080/simple/get?mk=慕課網");

xhr.send();

查看效果圖：

從上圖可以看到，瀏覽器控制臺面板上顯示，我們進行 GET 發送請求的過程中，在 Headers 上，可以看到 Query String Parameters 附帶的信息完全正確，我們的 GET 請求構造成功。

4. POST 請求

事實上我們除了要查詢數據，提交數據也是非常重要。在 Ajax 中，我們通常使用 POST 方法來進行數據創建工作。

4.1 POST 發送請求

話不多說，上代碼：

xhr.open("POST", "http://localhost:8080/simple/post");

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhr.send("mk=慕課網&class=ajax");

查看效果圖：

基本和上面 GET 請求類似，這里我們構造了一個 POST 請求，請求的 url 為 http://localhost:8080/simple/post，發送請求的參數有兩個，分別為 mk=慕課網 和 class=ajax。從瀏覽器的控制臺面板上可以看到，在 Headers 上，Form Data 部分正是我們要發送的數據，數據發送正常。這里兩個地方需要注意：

• send 方法接受可選參數作為請求主體，即發送到服務器的內容。
• Content-type 需要設置為請求主體類型， 這是因為如果不設置的話會采取默認值，在很多時候服務端可能無法解析參數。

XMLHttpRequest.setRequestHeader() 是請求HTTP 請求頭部的方法，因此設置 Content-type 自然也是通過調用這個方法來實現。該方法需要在 open() 和 send() 之間使用。

4.2 Content-type

這一小節也可以當做附錄來看，主要羅列一些常見的 Content-type 類型，給出一個參照，我們在了解之余，在實際使用 Ajax 的過程中，也可以隨時回來翻看：

5. 小結

• Ajax 主要通過 XMLHttpRequest 來發送請求，必要的時候為了兼容低版本 IE 瀏覽器， 我們可以啟用 ActiveXObject。
• XMLHttpRequest 提供 open 方法，我們可以借助它來實現 GET、POST、PUT、DELETE 等請求。
• Ajax 在向服務端發送數據時，比如 POST 、PUT ， 需要通過 XMLHttpRequest.setRequestHeader() 設置 Content-type 的類型，服務端根據指定 Content-type進行請求主體的解析。