XMLHttpRequest - 用于与服务器进行交互
XMLHttpRequest
(XHR)对象用于与服务器进行交互。您可以从 URL 检索数据,而不必刷新整个页面。这使网页可以更新页面的一部分,而不会中断用户的操作。 XMLHttpRequest
在 AJAX 编程中大量使用。
尽管它的名字叫 XMLHttpRequest
,但是它可以用来检索任何类型的数据,而不仅仅是 XML。
如果您的通信需要涉及从服务器接收事件数据或消息数据,请考虑通过 EventSource 接口使用服务器发送的事件。
构造函数
XMLHttpRequest()
构造函数初始化 XMLHttpRequest
。必须在任何方法调用之前调用它。
属性
该接口还继承了 XMLHttpRequestEventTarget
和 EventTarget
的属性。
XMLHttpRequest.onreadystatechange
一个 EventHandler
,只要 readyState
属性更改,就会调用它。
XMLHttpRequest.readyState
只读
返回 unsigned short
,即请求的状态。
XMLHttpRequest.response
只读
返回一个 ArrayBuffer
,Blob
,Document
,JavaScript 对象或 DOMString
,取决于包含响应实体主体的 XMLHttpRequest.responseType
的值。
XMLHttpRequest.responseText
只读
返回一个 DOMString
,以文本形式包含对请求的响应;如果请求未成功或尚未发送,则返回 null
。
XMLHttpRequest.responseType
一个枚举值,定义了响应的类型。
XMLHttpRequest.responseURL
只读
返回响应的序列化 URL,如果 URL 为 null
,则返回空字符串。
XMLHttpRequest.responseXML
只读
返回一个 Document
,其中包含对请求的响应;如果请求不成功,尚未发送或无法解析为 XML 或 HTML,则返回 null
。不适用于工作线程。
XMLHttpRequest.status
只读
返回一个 unsigned short
,表示请求的响应状态。
XMLHttpRequest.statusText
只读
返回一个 DOMString
,表示 HTTP 服务器返回的响应字符串。与 XMLHttpRequest.status
不同,它包括响应消息的整个文本(例如 “200 OK
”)。
注意: 根据 HTTP/2 规范(8.1.2.4[Response Pseudo-Header Fields]),HTTP/2 没有定义一种方式来携带 HTTP/1.1 状态行中包含的版本或原因短语。
XMLHttpRequest.timeout
一个 unsigned long
,表示请求在自动终止之前可以花费的毫秒数。
XMLHttpRequestEventTarget.ontimeout
一个 EventHandler
,每当请求超时时都会被调用。
XMLHttpRequest.upload
只读
一个 XMLHttpRequestUpload
,代表上传的过程。
XMLHttpRequest.withCredentials
一个 Boolean
,表示是否应使用 cookie 或授权标头之类的凭据发出跨站点的 Access-Control
请求。
非标准属性
XMLHttpRequest.channel
只读
一个 nsIChannel
。表示对象在执行请求时使用的通道。
XMLHttpRequest.mozAnon
只读
一个布尔值。如果为 true
,则将发送不带 Cookie 和身份验证标头的请求。
XMLHttpRequest.mozSystem
只读
一个布尔值。如果为 true
,则不会对请求执行相同的原始策略。
XMLHttpRequest.mozBackgroundRequest
一个布尔值。它表示对象是否为后台服务请求。
XMLHttpRequest.mozResponseArrayBuffer
已过时 Gecko 6 只读
一个 ArrayBuffer
。表示以 JavaScript 类型数组 表示请求的响应。
XMLHttpRequest.multipart
已过时 Gecko 22
此功能仅限 Gecko,是一个布尔值,已在 Firefox/Gecko 22 中删除。 请使用服务器发送的事件,Web 套接字或进度事件中的 responseText
。
事件处理程序
所有浏览器都支持将 onreadystatechange
作为 XMLHttpRequest 实例的属性。
之后,各种浏览器中实现了许多其他事件处理程序(onload
,onerror
,onprogress
等)。请参阅使用 XMLHttpRequest。
除了将 on*
属性设置为处理函数外,包括 Firefox 在内的最新浏览器还支持通过标准 addEventListener()
API 来侦听 XMLHttpRequest
事件。
方法
XMLHttpRequest.abort()
如果请求已发送,则中止该请求。
XMLHttpRequest.getAllResponseHeaders()
返回一个字符串, 表示由 CRLF 分隔的所有响应标头,如果没有收到响应,则返回 null
。
XMLHttpRequest.getResponseHeader()
返回一个字符串,包含指定标头文本的字符串,如果尚未收到响应或响应中不存在标头,则返回 null
。
XMLHttpRequest.open()
初始化请求。
XMLHttpRequest.overrideMimeType()
覆盖服务器返回的 MIME 类型。
XMLHttpRequest.send()
发送请求。如果请求是异步的(默认设置),则此方法在发送请求后立即返回。
XMLHttpRequest.setRequestHeader()
设置 HTTP 请求标头的值。您必须在 open()
之后,send()
之前调用。
非标准方法
XMLHttpRequest.init()
从 C ++ 代码初始化要使用的对象。
警告: 不得从 JavaScript 调用此方法。
XMLHttpRequest.openRequest()
初始化请求。此方法将在原生代码中使用;要从 JavaScript 代码初始化请求,请改用 open()
。请参阅 open()
的文档。
XMLHttpRequest.sendAsBinary()
发送二进制数据的 send()
方法的一种变体。
事件
abort
当请求中止时触发,例如程序调用了 XMLHttpRequest.abort()
。也可以通过 onabort
属性处理。
error
当请求遇到错误时触发。也可以通过 onerror
属性处理。
load
XMLHttpRequest
事务成功完成时触发。也可以通过 onload
属性处理。
loadend
请求完成时触发,无论是成功(在 load
之后)还是未成功(在 abort
或 error
之后)。也可以通过 onloadend
属性处理。
loadstart
当请求开始加载数据时触发。也可以通过 onloadstart
属性处理。
progress
请求收到更多数据时定期触发。也可以通过 onprogress
属性处理。
timeout
由于预设时间到期而导致进度终止时触发。也可以通过 ontimeout
属性处理。
规范
规范 | 状态 | 备注 |
---|---|---|
XMLHttpRequest | 现行的标准 | 现行标准,最新版本 |
桌面浏览器兼容性
特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
基础支持 | 1 | 12 12 — 791 | 1 | 7 51 | 8 | 1.2 |
abort | 18 | 12 | 支持 | 5 | 支持 | 1.2 |
abort 事件 | 支持 | ≤79 | 支持 | 未知 | 支持 | 支持 |
error 事件 | 支持 | ≤79 | 支持 | 未知 | 支持 | 支持 |
getAllResponseHeaders | 1 | 12 | 42 | 5 | 支持 | 1.2 |
getResponseHeader | 1 | 12 | 12 | 5 | 8 | 1.2 |
load 事件 | 支持 | ≤79 | 支持 | 未知 | 支持 | 支持 |
loadend 事件 | 支持 | ≤79 | 支持 | 未知 | 支持 | 支持 |
loadstart 事件 | 支持 | ≤79 | 支持 | 未知 | 支持 | 支持 |
onreadystatechange | 1 | 12 | 1 | 5 | 9 | 1.2 |
open | 1 | 12 | 13 | 5 | 8 | 1.2 |
overrideMimeType | 1 | 12 | 支持 | 11 54 | 支持 | 1.2 |
progress 事件 | 支持 | ≤79 | 支持 | 未知 | 支持 | 支持 |
readyState | 1 | 12 | 1 | 7 | 8 | 1.2 |
response | 9 | 12 | 6 | 10 | 11.6 | 5.1 |
responseText | 1 | 12 | 1 | 55 | 8 | 1.2 |
responseType | 31 | 12 | 6 | 10 | 18 | 7 |
responseURL | 37 | 14 | 32 | 不支持 | 24 | 8 |
responseXML | 支持 | 12 | 支持6 | 支持 | 支持 | 支持 |
send | 1 | 12 | 1 | 5 | 8 | 1.2 |
sendAsBinary | 不支持7 | 不支持7 | 2 — 31 | 不支持 | 不支持 | 不支持 |
setRequestHeader | 1 | 12 | 1 | 5 | 8 | 1.2 |
status | 1 | 12 | 1 | 78 | 8 | 1.2 |
statusText | 1 | 12 | 1 | 78 | 支持 | 1.2 |
timeout | 29 | 12 | 12 | 8 | 17 12 — 16 | 6.1 |
timeout 事件 | 支持 | ≤18 | 支持 | 未知 | 支持 | 支持 |
upload | 1 | 12 | 支持 | 未知 | 支持 | 10 |
withCredentials | 3 | 12 | 3.59 | 1010 | 12 | 4 |
移动浏览器兼容性
特性 | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
基础支持 | 1 | 18 | 未知 | 4 | 未知 | 10.1 | 1 |
abort | 支持 | 支持 | 未知 | 支持 | 未知 | 支持 | 支持 |
abort 事件 | 支持 | 支持 | 未知 | 支持 | 未知 | 支持 | 未知 |
error 事件 | 支持 | 支持 | 未知 | 支持 | 未知 | 支持 | 未知 |
getAllResponseHeaders | 支持 | 支持 | 未知 | 42 | 未知 | 支持 | 支持 |
getResponseHeader | 1 | 18 | 未知 | 42 | 未知 | 10.1 | 1 |
load 事件 | 支持 | 支持 | 未知 | 支持 | 未知 | 支持 | 未知 |
loadend 事件 | 支持 | 支持 | 未知 | 支持 | 未知 | 支持 | 未知 |
loadstart 事件 | 支持 | 支持 | 未知 | 支持 | 未知 | 支持 | 未知 |
onreadystatechange | 1 | 18 | 未知 | 4 | 未知 | 10.1 | 1 |
open | 1 | 18 | 未知 | 43 | 未知 | 10.1 | 1 |
overrideMimeType | 支持 | 18 | 未知 | 支持 | 未知 | 支持 | 支持 |
progress 事件 | 支持 | 支持 | 未知 | 支持 | 未知 | 支持 | 未知 |
readyState | 1 | 18 | 未知 | 4 | 未知 | 10.1 | 1 |
response | ≤37 | 18 | 未知 | 6 | 未知 | 12 | 6 |
responseText | 1 | 18 | 未知 | 4 | 未知 | 10.1 | 1 |
responseType | 55 | 55 | 未知 | 50 | 未知 | 42 | 7 |
responseURL | 37 | 37 | 未知 | 32 | 未知 | 24 | 支持 |
responseXML | 支持 | 支持 | 未知 | 支持6 | 未知 | 支持 | 支持 |
send | 1 | 18 | 未知 | 4 | 未知 | 10.1 | 1 |
sendAsBinary | 不支持7 | 不支持7 | 未知 | 4 — 31 | 未知 | 不支持 | 不支持 |
setRequestHeader | 1 | 18 | 未知 | 4 | 未知 | 10.1 | 1 |
status | 1 | 18 | 未知 | 4 | 未知 | 10.1 | 1 |
statusText | 支持 | 18 | 未知 | 4 | 未知 | 支持 | 支持 |
timeout | ≤37 | 29 | 未知 | 14 | 未知 | 18 12 — 16 | 7 |
timeout 事件 | 支持 | 支持 | 未知 | 支持 | 未知 | 支持 | 支持 |
upload | 支持 | 18 | 未知 | 支持 | 未知 | 支持 | 支持 |
withCredentials | ≤37 | 18 | 未知 | 49 | 未知 | 12 | 3.2 |
1. 通过 ActiveXObject('Microsoft.XMLHTTP')
实现
2. 从 Firefox 49 开始,首选项 network.http.keep_empty_response_headers_as_empty_string
默认为false
,设置为 true
情况下,空标头将作为空字符串返回。在 Firefox 49 之前,空标头会被忽略。从 Firefox 50 开始,默认设置为 true
。
3. 从 Firefox 30 开始,不赞成在主线程上执行同步请求,因为它们会对性能和用户体验产生负面影响。因此,除了在 Worker
中,async
参数不得为 false
。
4. 通过 ActiveXObject
实现
5. 在 Internet Explorer 10 之前,仅在请求完成后才能读取 XMLHttpRequest.responseText
的值。
6. 在 Firefox 51 之前,解析接收到的数据时出错,会在 Document
顶部添加一个 <parsererror>
节点,然后返回 Document
。这与规范不一致。从 Firefox 51 开始,这种情况现在可以按照规范正确返回 null
。
7. 有一个 polyfill 可以支持 sendAsBinary()
。
8. Internet Explorer 版本 5 和 6 使用 ActiveXObject()
支持 ajax 调用
9. 从 Firefox 11 开始,在执行同步请求时不再支持使用 withCredentials
属性。尝试这样做会引发 NS_ERROR_DOM_INVALID_ACCESS_ERR
异常。
10. Internet Explorer 版本 8 和 9 使用 XDomainRequest
支持跨域请求(CORS)。
相关链接
XMLSerializer
:将 DOM 树序列化为 XML- 涵盖 XMLHttpRequest 的教程:
- HTML5 Rocks— XMLHttpRequest2 中的新技巧
- 功能策略指令
sync-xhr