什么是XMLHttpRequest？XMLHttpRequest能用來(lái)做什么？

XMLHttpRequest(簡(jiǎn)稱(chēng) xhr)是瀏覽器提供的 Javascript 對(duì)象，通過(guò)它，可以請(qǐng)求服務(wù)器上的數(shù)據(jù)資源。之前所學(xué)的 jQuery 中的 Ajax 函數(shù)，就是基于 xhr 對(duì)象封裝出來(lái)的。

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

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

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

xhr對(duì)象的readyState屬性

XMLHttpRequest 對(duì)象的 readyState 屬性，用來(lái)表示當(dāng)前 Ajax 請(qǐng)求所處的狀態(tài)。每個(gè) Ajax 請(qǐng)求必然處于以下?tīng)顟B(tài)中的一個(gè)：

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

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

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

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