1、介紹
（1）AJAX（Asynchronous JavaScript and XML）
AJAX 原來是指通過異步 JavaScript 從服務器 XML 文檔獲取數據，然後更新網頁的對應部分，避免刷新整個網頁
後來，這個詞語慢慢成爲在瀏覽器通過腳本與服務器進行通信的代名詞，它在原來的含義上有了更多的拓展
也就是說，只要通過腳本向服務器發送請求獲取數據，這個請求都被稱爲 AJAX 請求
（2）XMLHttpRequest
XMLHttpRequest 是瀏覽器的內置對象，通過這個對象，我們能向服務器發送請求和接收響應，實現數據交換
很多 AJAX 底層都是通過 XMLHttpRequest 對象實現
2、使用
可以通過構造函數 XMLHttpRequest() 創建一個 XMLHttpRequest 對象
XMLHttpRequest 對象常用的屬性如下：
-
readyState：只讀屬性，表示請求的當前狀態若爲
0，表示已經生成請求實例，但未調用open()方法若爲
1，表示已經調用open()方法，但未調用send()方法若爲
2，表示已經調用send()方法，且已收到服務器返回的頭信息若爲
3，表示正在接收服務器返回的數據體若爲
4，表示服務器返回的數據已全部接收完畢，或者發生錯誤 -
response：只讀屬性，表示服務器返回的數據，其類型由responseType的值決定 -
responseType：定義返回數據的類型，它的值是一個字符串若爲
'text'或''，表示服務器返回文本數據若爲
'json'，表示服務器返回 Json 對象若爲
'blob'，表示服務器返回 Blob 對象若爲
'arraybuffer'，表示服務器返回 ArrayBuffer 對象若爲
'document'，表示服務器返回 Document 對象 -
responseText：只讀屬性，表示服務器返回的文本數據，如果請求失敗則爲 null -
responseXML：只讀屬性，表示服務器返回的 Document 對象，如果請求失敗則爲 null -
responseURL：只讀屬性，表示返回數據的服務器的網址 -
status：只讀屬性，表示 HTTP 狀態代碼 -
statusText：只讀屬性，表示 HTTP 狀態信息 -
timeout：定義請求的超時時間，若請求超過該時間，則自動結束此請求 -
withCredentials：一個布爾類型的值，表示在跨域請求時是否帶有授權信息
XMLHttpRequest 對象常用的方法如下：
-
open()：初始化請求，它接收以下五個參數參數
method是一個字符串，表示將要使用的請求方法參數
url是一個字符串，表示發送請求的目標地址參數
async是一個布爾值，表示請求是否需要異步進行，默認爲 true參數
user是一個字符串，表示用於認證的用戶，默認爲空字符串參數
password是一個字符串，表示用於認證的密碼，默認爲空字符串 -
setRequestHeader()：設置請求頭，必須在open()之後send()之前調用 -
overrideMimeType()：將服務器返回的數據解析成指定類型，必須在open()之後send()之前調用 -
send()：發送請求，可以在參數中帶上請求體請求體的類型可以是
null、String、Blob、ArrayBuffer、Document、FormData -
abort()：中止請求 -
getAllResponseHeaders()：獲取所有響應頭 -
getResponseHeader()：獲取指定響應頭
XMLHttpRequest 對象常用的事件如下：
-
readystatechange：readyState發生變化時觸發 -
loadstart：當請求開始時觸發（發出 HTTP 請求） -
loadend：當請求結束時觸發（請求成功或者失敗） -
load：當請求成功時觸發 -
error：當請求錯誤時觸發 -
abort：當請求中止時觸發 -
timeout：當請求超時時觸發 -
progress：監聽上傳和下載進度，該事件對應的事件處理函數帶有一個事件對象，該事件對象有三個屬性屬性
loaded表示已經傳輸的數據量，屬性total表示總數據量屬性
lengthComputable表示加載進度是否可以計算，是一個布爾類型的值
這裏需要注意，下載觸發的是 xhr 對象的 progress 事件，上傳觸發的是 xhr.upload 對象的 progress 事件
3、實例
（1）發送 GET 請求
var xhr = new XMLHttpRequest()
xhr.responseType = 'text'
xhr.open('GET', 'http://www.httpbin.org/get')
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText)
} else {
console.error(xhr.statusText)
}
}
}
xhr.onerror = function() {
console.log('error')
}
xhr.send()
（2）發送 POST 請求
var xhr = new XMLHttpRequest()
xhr.open('POST', 'http://www.httpbin.org/post')
xhr.onload = function() {
console.log(xhr.response)
}
xhr.onerror = function() {
console.log('error')
}
var data = new FormData()
data.append('username', 'admin')
data.append('password', '12345')
xhr.send(data)
（3）接收圖片
var xhr = new XMLHttpRequest()
xhr.open('GET', '/path/to/image.png')
xhr.responseType = 'blob'
xhr.onload = function() {
if (this.status === 200) {
var blob = xhr.response
var img = document.createElement('img')
img.onload = function() { window.URL.revokeObjectURL(img.src) }
ime.src = window.URL.createObjectURL(blob)
document.getElementById('container').appendChild(img)
}
}
xhr.send()
（4）監聽進度
var xhr = new XMLHttpRequest()
xhr.open('GET', '/download/or/upload')
// 用於監聽上傳進度
xhr.onprogress = progressHandler
// 用於監聽上傳進度
xhr.upload.onprogress = progressHandler
function progressHandler(e) {
if (e.lengthComputable) {
console.log(e.loaded / e.total)
} else {
console.log('無法獲取進度')
}
}
xhr.send()
【 閱讀更多 JavaScript 系列文章，請看 JavaScript學習筆記 】