什么是XMLHttpRequest？XMLHttpRequest能用來做什么？

XMLHttpRequest(簡稱 xhr)是瀏覽器提供的 Javascript 對象，通過它，可以請求服務(wù)器上的數(shù)據(jù)資源。之前所學(xué)的 jQuery 中的 Ajax 函數(shù)，就是基于 xhr 對象封裝出來的。

使用xhr發(fā)起GET請求

使用xhr發(fā)起GET請求需要先創(chuàng)建 xhr 對象，調(diào)用 xhr.open() 函數(shù)和 xhr.send() 函數(shù)，監(jiān)聽 xhr.onreadystatechange 事件。

// 1. 創(chuàng)建 XHR 對象
var xhr = new XMLHttpRequest()
// 2. 調(diào)用 open 函數(shù)，指定 請求方式 與 URL地址
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
// 3. 調(diào)用 send 函數(shù)，發(fā)起 Ajax 請求
xhr.send()
// 4. 監(jiān)聽 onreadystatechange 事件
xhr.onreadystatechange = function() {
    // 4.1 監(jiān)聽 xhr 對象的請求狀態(tài) readyState ；與服務(wù)器響應(yīng)的狀態(tài) status
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 4.2 打印服務(wù)器響應(yīng)回來的數(shù)據(jù)
        console.log(xhr.responseText)
    }
}

xhr對象的readyState屬性

XMLHttpRequest 對象的 readyState 屬性，用來表示當(dāng)前 Ajax 請求所處的狀態(tài)。每個 Ajax 請求必然處于以下狀態(tài)中的一個：

使用xhr發(fā)起帶參數(shù)的GET請求

使用 xhr 對象發(fā)起帶參數(shù)的 GET 請求時，只需在調(diào)用 xhr.open 期間，為 URL 地址指定參數(shù)即可：

// ...省略不必要的代碼
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
// ...省略不必要的代碼

這種在 URL 地址后面拼接的參數(shù)，叫做查詢字符串。