陳廣鵬 ·XMLHttpRequest 介紹
在上一節(jié)我們已經(jīng)粗略的講過(guò)了 XMLHttpRequest 是 Ajax 的核心技術(shù)。是的，可以說(shuō)，沒(méi)有 XMLHttpRequest 這樣的技術(shù)存在，Ajax 就是不完整的，甚至可以說(shuō)就不會(huì)有 Ajax 這樣的技術(shù)存在。那么，什么是 XMLHttpRequest 呢？
1. XMLHttpRequest 的由來(lái)
首先倒推到 1999 年間，這一年，Microsoft 在 Internet Explorer 5.0 中首次使用了一個(gè)技術(shù)。通過(guò)這個(gè)技術(shù)，瀏覽器頁(yè)面可以不用通過(guò)頁(yè)面重載或者表單提交，就可以將信息發(fā)送到服務(wù)器，完成信息的交互。這個(gè)技術(shù)就是 ActiveX 對(duì)象，即 XMLHTTP。
這個(gè)技術(shù)發(fā)布之后，得到了業(yè)界的一致歡迎。直到 2000 年的時(shí)候，基本成為了一種標(biāo)準(zhǔn)。同時(shí)，Mozilla 、Opera 等也相繼實(shí)現(xiàn)了一種具有相同接口的原生對(duì)象，即我們現(xiàn)在所看到的 XMLHttpRequest 。后來(lái)，XMLHttpRequest 也成為了這個(gè)技術(shù)的名稱(chēng)。
2. 什么是 XMLHttpRequest
XMLHttpRequest 實(shí)質(zhì)上就是一種具有發(fā)送異步請(qǐng)求功能的技術(shù)，是一個(gè)可以在 javaScript 、JScript 、VBScript 等腳本語(yǔ)言中使用的 API 對(duì)象。它可以通過(guò)異步發(fā)送 HTTP 請(qǐng)求，完成前后端的交互。在我們的客戶(hù)端界面上，無(wú)刷新交互只是一種表現(xiàn)，而異步發(fā)送請(qǐng)求才是這個(gè)技術(shù)的根本。
目前為止，XMLHttpRequest 早已成為正式的規(guī)范。并且在大多數(shù)瀏覽器上都得到了支持。
3. XMLHttpRequest 的屬性和方法
接下來(lái)我們會(huì)對(duì) XMLHttpRequest 的屬性和方法做一個(gè)簡(jiǎn)單的展開(kāi)學(xué)習(xí)，主要是認(rèn)識(shí)一下 XMLHttpRequest 到底提供了一些什么功能屬性。為之后的學(xué)習(xí)做一個(gè)基本的概念性了解。
3.1 XMLHttpRequest 的屬性
3.1.1 標(biāo)準(zhǔn)屬性
| 屬性名 | 備注 |
|---|---|
| onreadystatechange | 當(dāng) readyState 發(fā)生變化時(shí)候觸發(fā) |
| readyState | 請(qǐng)求狀態(tài)碼。 |
| response | 返回一個(gè) Blob 、ArrayBuffer 、Document 或 DOMString。類(lèi)型受 responseType 影響。 |
| responseText | 返回一個(gè) DOMString。請(qǐng)求不成功或者未發(fā)送情況下返回 null。 |
| responseType | 響應(yīng)類(lèi)型。 |
| responseURL | 返回序列化 URL，URL 為空則返回空字符串。 |
| responseXML | 返回一個(gè) Document。請(qǐng)求未發(fā)送、不成功或者解析失敗，返回 null。 |
| status | 請(qǐng)求的響應(yīng)狀態(tài)。 |
| statusText | 返回一個(gè) DomString， 包含 http 響應(yīng)狀態(tài)。 |
| timeout | 超時(shí)。定義一個(gè)最大的請(qǐng)求響應(yīng)時(shí)間。 |
| ontimeout | 超時(shí)調(diào)用事件。 |
| upload | 上傳過(guò)程。 |
| withCredentials | 指定跨域請(qǐng)求是否帶有授權(quán)信息。 |
3.1.2 非標(biāo)準(zhǔn)屬性
| 屬性名 | 備注 |
|---|---|
| channel | 一個(gè) nsIChannel，當(dāng)執(zhí)行請(qǐng)求時(shí)，對(duì)象使用的通道。 |
| mozAnon | 布爾值。為 true 情況下，請(qǐng)求在將在沒(méi)有身份驗(yàn)證 header 頭和 cookie 的情況下發(fā)送。 |
| mozSystem | 布爾值。為 true 情況下，請(qǐng)求將不強(qiáng)制執(zhí)行同源策略。 |
| mozBackgroundRequest | 布爾值。指示是否是服務(wù)器的請(qǐng)求。 |
3.2 XMLHttpRequest 的方法
3.2.1 標(biāo)準(zhǔn)方法
| 方法名 | 備注 |
|---|---|
| abort | 中止請(qǐng)求 |
| getAllResponseHeaders | 返回所有用 CRLF 分隔的響應(yīng)頭的字符串的形式。沒(méi)有收到響應(yīng)則返回 null。 |
| getResponseHeader | 返回指定響應(yīng)頭的字符串。未收到響應(yīng)，或者響應(yīng)不存在該報(bào)頭，返回 null。 |
| open | 初始化一個(gè)請(qǐng)求。 |
| overrideMimeType | 重寫(xiě) MIME 類(lèi)型。 |
| send | 發(fā)送請(qǐng)求。 |
| setRequestHeader | 設(shè)置 HTTP 請(qǐng)求頭。 |
3.2.2 非標(biāo)準(zhǔn)方法
| 方法名 | 備注 |
|---|---|
| openRequest | 初始化一個(gè)請(qǐng)求。 |
3.3 XMLHttpRequest 的事件
| 事件名 | 備注 |
|---|---|
| abort | 停止請(qǐng)求的時(shí)候觸發(fā)。 |
| error | 當(dāng)請(qǐng)求發(fā)生錯(cuò)誤的時(shí)候觸發(fā)。 |
| load | 請(qǐng)求成功完成的時(shí)候觸發(fā)。 |
| loadend | 請(qǐng)求結(jié)束的時(shí)候觸發(fā)。 |
| loadstart | 收到響應(yīng)數(shù)據(jù)的時(shí)候觸發(fā)。 |
| progress | 接收數(shù)據(jù)開(kāi)始周期時(shí)候觸發(fā)。 |
| timeout | 超時(shí)未接收到數(shù)據(jù)的時(shí)候觸發(fā)。 |
4. 兼容性
即便 XMLHttpRequest 在絕大多數(shù)瀏覽器都得到支持，但仍有部分對(duì)象屬性和方法不被少數(shù)瀏覽器所兼容。我們可以通過(guò) Can I use 進(jìn)行查閱。下面給出一個(gè)截至當(dāng)前為止 XMLHttpRequest 在各瀏覽器上的兼容性表格進(jìn)行參照。
5. 小結(jié)
- XMLHttpRequest 現(xiàn)在已經(jīng)成為了標(biāo)準(zhǔn)，并且被絕大部分的瀏覽器所支持，兼容性好。
- XMLHttpRequest 擁有豐富的屬性、方法及事件調(diào)用，滿(mǎn)足我們對(duì)異步請(qǐng)求的大部分需求。
2025 imooc.com All Rights Reserved |