xhr返回值_XHR对象

一、XMLHttpRequest对象

var xhr = newXMLHttpRequest(),

i= 0;for(var key inxhr){if(xhr.hasOwnProperty(key)){

i++;

}

}

console.log(i);//0

console.log(XMLHttpRequest.prototype.hasOwnProperty(‘timeout‘)); //true

会发现XMLHttpRequest实例对象没有自身属性，实际上，它的所有属性均来自于XMLHttpRequest.prototype。

追根溯源

xhr => XMLHttpRequest.prototype =>XMLHttpRequestEventTarget.prototype=> EventTarget.prototype => Object.prototype

二、XMLHttpRequest实例的属性

1、readyState

只读，readyState记录了ajax调用过程中所有可能的状态，表示XMLHttpRequest请求当前所处的状态。

0表示未初始化，请求已建立；

1表示初始化，请求已建立，但未发送；

2表示发送数据，请求已发送；

3表示数据传送中，请求处理中，响应的数据还不够齐全；

4表示完成，数据接收完毕。

2、response

只读，表示服务器的响应内容。

3、responseType

表示服务器返回数据的类型，缺省为空字符串，可取 “arraybuffer”，”blob”，”document”，”json”，”text” 共五种类型。

4、responseText

只读，表示服务器响应内容的文本形式。

5、responseXML

只读, responseXML表示xml形式的响应数据, 缺省为null, 若数据不是有效的xml, 则会报错.

6、status

只读，status表示本次请求所得到的HTTP状态码，初始值为0。如果服务器没有显式地指定状态码，那么status将被设置为默认值，即200。基本上，只有2xx和304的状态码，表示服务器返回是正常状态。

200，OK，访问正常301，Moved Permanently，永久移动302，Move temporarily，暂时移动304，Not Modified，未修改307，Temporary Redirect，暂时重定向401，Unauthorized，未授权403，Forbidden，禁止访问404，Not Found，未发现指定网址500，Internal Server Error，服务器发生错误

7、statusText

只读，statusText表示服务器发送的状态提示，包含整个状态信息，比如”200 OK”。

8、timeout

用于指定ajax的超时时长，表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止。如果该属性等于0，就表示没有时间限制。

9、responseURL

responseURL返回ajax请求最终的URL，如果请求中存在重定向，那么responseURL表示重定向之后的URL。

10、withCredentials

withCredentials是一个布尔值，默认为false，表示跨域请求中不发送cookies等信息。当它设置为true时，cookies，authorization headers 或者TLS客户端证书都可以正常发送和接收。显然，它的值对同域请求没有影响，该属性适用于IE10+，opera12+及其他现代浏览器。

xhr.withCredentials = true;

服务器必须显示返回Access-Control-Allow-Credentials这个头信息。

Access-Control-Allow-Credentials: true

11、upload

属性默认返回一个XMLHttpRequestUpload对象，用于上传资源，该对象具有如下方法：

onloadstart

onprogress

onabort

onerror

onload

ontimeout

onloadend

三、XMLHttpRequest实例的方法

1、getResponseHeader()

getResponseHeader方法用于获取ajax响应头中指定字段的值，如果response headers中存在相同的字段，那么它们的值将自动以字符串的形式连接在一起。

2、getAllResponseHeaders()

getAllResponseHeaders方法用于获取所有安全的ajax响应头，响应头以字符串形式返回。每个HTTP报头名称和值用冒号分隔，如key:value，并以\r\n结束。

3、open()

open方法用于指定发送HTTP请求的参数，它的使用格式如下，一共可以接受五个参数。

voidopen(

string method,//表示HTTP动词，比如“GET”、“POST”、“PUT”和“DELETE”。

string url, //表示请求发送的网址。

optional boolean async, //格式为布尔值，默认为true，表示请求是否为异步。

optional string user, //表示用于认证的用户名，默认为空字符串。

optional string password //表示用于认证的密码，默认为空字符串。

);

4、send()

send方法用于实际发出HTTP请求。如果不带参数，就表示HTTP请求只包含头信息，也就是只有一个URL，典型例子就是GET请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是POST请求。

所有XMLHttpRequest的监听事件，都必须在send()方法调用之前设定。

5、setRequestHeader()

setRequestHeader方法用于设置HTTP头信息。该方法必须在open()之后、send()之前调用。如果该方法多次调用，设定同一个字段，则每一次调用的值会被合并成一个单一的值发送。

//指定请求的type为json格式

xhr.setRequestHeader(“Content-type”, “application/json”);//除此之外, 还可以设置其他的请求头

xhr.setRequestHeader(‘x-requested-with‘, ‘‘);

6、overrideMimeType()

overrideMimeType方法用于强制指定response的MIME类型，即强制修改response的Content-Type。

xhr.overrideMimeType(“text/xml; charset = utf-8”);

xhr.send();

四、XMLHttpRequest实例的事件

1、onreadystatechange事件

onreadystatechange事件回调方法在readystate状态改变时触发，默认会传入Event实例。在一个收到响应的ajax请求周期中，会触发4次onreadystatechange事件。

2、onloadstart事件

onloadstart事件回调方法在ajax请求发送之前触发，触发时机在readyState==1状态之后，readyState==2状态之前。onloadstart方法中默认将传入一个ProgressEvent事件进度对象。

3、onprogress事件

onprogress事件回调方法在readyState==3状态时开始触发，默认传入ProgressEvent对象。有兼容性问题，适用于IE10+及其他现代浏览器。

//跟踪上传进度

xhr.upload.onprogress = function(e){var percent = 100 * e.loaded /e.total;

console.log(‘upload: ‘ + precent + ‘%‘);

}

4、onerror事件

onerror事件回调方法在ajax请求出错后执行，通常只在网络出现问题时或者ERR_CONNECTION_RESET时触发(如果请求返回的是407状态码，chrome下也会触发onerror)。

5、onabort事件

用来终止已经发出的HTTP请求。取消后, readyState状态将被设置为0(UNSENT)。

6、onload事件

onload事件回调方法在ajax请求成功后(readyState==4状态后)触发。

7、onloadend事件

onloadend事件回调方法在ajax请求完成后(readyState==4状态后或者readyState==2状态后)触发，方法中默认传入一个ProgressEvent事件进度对象。