XMLHTTPRequest属性、⽅法、事件⼤全详解XMLHTTPRequest属性、⽅法、事件整理⼤全。
xhr 对象的⽅法
open(method:string, url:string, async?:boolean=true, username?:string, password: string)
⽤于创建 HTTP 请求，但请求并未发送。
method, 请求类型，如 GET 、POST 等，⼤⼩写不敏感。
url, URL 地址
async, 是否异步，默认 true。
若为同步请求时
xhr.timeout值必须为 0。
xhr.withCredentials值必须为 false。
spyder下载地址
username, ⽤户名，⼀般不⽤。
password, 密码，⼀般不⽤。
send(body?:Object=null)
定义 HTTP 请求的数据（ body ），当 method 为 GET、HEAD 时，该参数忽略。body 可为 ArrayBuffer、Blob、Document(类似 XML 格式数据)、DOMString（字符串）、FormData（表单）。
。
注意：body 参数会影响请求头部的 content-type 默认值。
如果 data 是 Document 类型，同时也是 HTML Document 类型，则 content-type 默认值为 text/html;charset=UTF-8 ；否则
为 application/xml;charset=UTF-8；
如果 data 是 DOMString 类型，content-type 默认值为 text/plain;charset=UTF-8 ；
如果 data 是 FormData 类型，content-type 默认值为 multipart/form-data; boundary=[xxx]
如果 data 是其他类型，则不会设置 content-type 的默认值
如果⽤ xhr.setRequestHeader()⼿动设置了中 content-type 的值，以上默认值就会被覆盖。
若在断⽹状态下调⽤ xhr.send(data)⽅法，则会抛错：Uncaught NetworkError: Failed to execute 'send' on
'XMLHttpRequest'。⼀旦程序抛出错误，如果不 catch 就⽆法继续执⾏后⾯的代码，所以调⽤ xhr.send(data)⽅法
时，应该⽤ try-catch 捕捉错误。
try{
xhr.send(data)
}catch(e) {
//
};
abort()
若请求已发出，则会终⽌请求，并将 readyState 置为 0.
调⽤后，应将 xhr 对象置为 null 以促进垃圾回收。由于内存原因，不建议重⽤ xhr 对象。
扩展阅读：
overrideMimeType(type:string)
重写 response 的 content-type。功能如同 sponseType，已可以摒弃。
setRequestHeader(header:string, value:string)
设置请求 HTTP 请求头信息。如content-type、cookie、accept-xxx等。
header 参数⼤⼩写不敏感。
必须在open()⽅法后，send()⽅法前调⽤，否则会抛错。
java基础教程27天可调⽤多次，最终值不会覆盖，⽽是采⽤追加append⽅式。
禁⽌设置以下请求头，否则会抛错。
Accept-Charset
Accept-Encoding
Access-Control-Request-Headers
Access-Control-Request-Method
Connection
Content-Length
Cookie
Cookie2
Date
DNT
Expect
Host
Keep-Alive
Origin
Referer
TE
Trailer
Transfer-Encoding
Upgrade
js trim方法
User-Agent
Via
getResponseHeader(header:string)
获取某个指定 header 字段的值。
header 字段不区分⼤⼩写。
有严格安全限制，详见getAllResponseHeaders⽅法。
getAllResponseHeaders()
获取 response 中所有 header 字段。
有严格安全限制。如下：
⽆论跨域或同域请求，⽆法获取Set-Cookie、Set-Cookie2字段值。
跨域请求，只可获取simple response header和Access-Control-Expose-Headers（名词解释见下⽅），否则会报错：Refused to get unsafe header。故若想访问其他字段，需后端添加到 Access-Control-Expose-Headers 中。
simple response header 包括的  header 字段有： Cache-Control, Content-Language, Content-Type,
Expires, Last-Modified, Pragma。
> `Access-Control-Expose-Headers`：跨域请求独有，同域请求⽆。该字段中列举的 `header` 字段为服务器允许暴露给客户端访问的字段。> 句法：```Access-Control-Expose-Headers: <header-name>, <header-name>, ...```
xhr 的属性
readyState
[只读属性]⽤于追踪 xhr 当前的状态，共有 5 种可能的值，分别对应 xhr不同的阶段。
每次 readyState 值变化时，都会触发 adystatechange 事件。
值状态描述
0UNSENT (初始状态，未打
开)
此时 xhr 对象被成功构造， open() ⽅法还未被调⽤
1OPENED (已打开，未发送)open() ⽅法已被成功调⽤，send() ⽅法还未被调⽤。注意：只有 xhr 处于 OPENED 状态，才能调⽤ xhr.setRequestHeader()和 xhr.send() ，否则会报错
2HEADERS_RECEIVED(已
获取响应头)
send() ⽅法已经被调⽤, 响应头和响应状态已经返回
3LOADING (正在下载响应
体)
响应体( response entity body )正在下载中，此状态下 sponse 可能已经有了响应数据
4DONE (整个数据传输过程
结束)
整个数据传输过程结束，不管本次请求是成功还是失败
status 和 statusText
status 属性表⽰ HTTP 响应状态码，如 200、302、400等。
statusText 属性表⽰ HTTP响应状态的描述⽂本，如 OK、Not Found等。
注意，在 load 事件中，不能简单的判断 xhr.status === 200，因为 20x、304等 HTTP 状态码也被认为是请求成功。参考以下代码：
//如果请求成功
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
//do successCallback
}shell常用命令及功能
}
responseType 和 response
可在 xhr.send() 前设置 responseType ，⽤于指定返回的响应数据类型。和 xhr.overrideMimeType() ⽅法效果相同，推荐使⽤ responseType。
IE10/IE11 不⽀持 sponseType 为 json。
部分浏览器不⽀持 sponseType 为 blob。
值描述
""将 responseType 设为空字符串与设置为 text 相同， 是默认类型 （实际上是 DOMString ）。
arraybu
ffer
response 是⼀个包含⼆进制数据的 JavaScript ArrayBuffer 。
blob response 是⼀个包含⼆进制数据的  对象 。
docum ent response 是⼀个 HTML Document 或 XML XMLDocument ，这取决于接收到的数据的 MIME 类型。使⽤ XHR 获取 HTML 请参阅  。
json response 是⼀个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON 解析得到的。
text response 是包含在 DOMString 对象中的⽂本。moz-
chunke d-arraybu ffer 与 arraybuffer 相似，但是数据会被接收到⼀个流中。使⽤此响应类型时，响应中的值仅在 progress 事件的处理程序中可⽤，并且只包含上⼀次响应 progress 事件以后收到的数据，⽽不是⾃请求发送以来收到的所有数据。在 progress 事件处理时访问 response 将返回到⽬前为⽌收到的数据。在 progress 事件处理程序之外访问， response 的值会始终为 null。
ms-stream response 是下载流的⼀部分；此响应类型仅允许下载请求，仅 IE ⽀持。
值描述
responseText
默认值为空字符串 ""
只有当 responseType 为 text、""时，xhr 对象上才有此属性，此时才能调⽤ sponseText ，否则抛错。
只有当请求成功时，才能拿到正确值。以下 2 种情况下值都为空字符串 ""：请求未完成、请求失败。
responseXML
默认值为 null
只有当 responseType 为 text、""、document时，xhr 对象上才有此属性，此时才能调⽤ sponseXML，否则抛错。
只有当请求成功且返回数据被正确解析时，才能拿到正确值。以下 3 种情况下值都为 null ：请求未完成、请求失败、请求成功但返回数据⽆法被正确解析时。
upload
是⼀个XMLHttpRequestUpload对象，⽤于收集传输信息。⽀持事件：
onloadstart
onprogress
onabort
ontimeout
onerror
onload
onloadend
具体触发顺序及条件，参考事件章节。
其中，progress在上传阶段(即xhr.send()之后，adystate=2之前)触发，每 50ms 触发⼀次。可获得上传信息、进度等。
上述事件回调的参数为 XMLHttpRequestEventTarget 对象，详见 事件补充。
timeout
单位毫秒，默认值 0 ，即不设置超时。
计时从onloadstart 事件触发开始（即xhr.send()开始），以onloadend 事件触发为结束。
在 IE 中，只能在调⽤open()⽅法后send()⽅法前设置。其他浏览器⽆此限制，但仍然从xhr.send()⽅法调⽤计时。
不能为同步请求设置 timeout ，否则会报错。
早期较多浏览器不⽀持，可通过 setTImeOut 实现。
withCredentials
boolean 类型，默认值 false， ⽤于跨域请求时将 cookie 加⼊到 request header。
xhr.withCredentials 与  CORS 什么关系jquery下载文件请求
我们都知道，在发同域请求时，浏览器会将  cookie ⾃动加在  request header 中。但在发送跨域请求时，  cookie 并不会⾃动加在  request header 中。
造成这个问题的原因：在  CORS 标准有如下规定，默认情况下，浏览器在发送跨域请求时，不能发送任何认证信息（
credentials）如  cookies 和  HTTP authentication schemes 。除⾮  xhr.withCredentials 为  true。
cookies 也是⼀种认证信息，在跨域请求中，  client 端必须⼿动设置  xhr.withCredentials=true，且  server 端也必须允许
request 能携带认证信息（即  response header 中包含  Access-Control-Allow-Credentials:true），这样浏览器才会⾃动将 cookie 加在  request header 中。
注意，⼀旦跨域  request 能够携带认证信息，  server 端⼀定不能将  Access-Control-Allow-Origin 设置为 *，⽽必须设置为请求页⾯的域名。
xhr 的事件回调
xhr 共有 8 个事件，分别如下：
onloadstart
onprogress
onabort
layers of什么意思
ontimeout
onerror
onload
onloadend
onreadystatechange
事件触发条件
引⽤⾃
事件触发条件
onre
adys
tatec
hang
e
每当adyState改变时触发；但adyState由⾮ 0 值变为 0 时不触发。
onlo
adst
art
调⽤xhr.send()⽅法后⽴即触发，若xhr.send()未被调⽤则不会触发此事件。
onpr ogre ss progress在上传阶段(即xhr.send()之后，adystate=2之前)触发，每 50ms 触发⼀次；progress在下载阶段（即adystate=3时）触发，每 50ms 触发⼀次。
onlo
ad
当请求成功完成时触发，此时adystate=4
onlo
aden
d
当请求结束（包括请求成功和请求失败）时触发
onab
ort
当调⽤xhr.abort()后触发
onti
meo
ut
xhr.timeout不等于 0 ，由请求开始即 onloadstart 开始算起，当到达xhr.timeout 所设置时间请求还未结束即 onloadend ，则触发此事件。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。