XHR对象

一、XMLHttpRequest对象

var xhr = new XMLHttpRequest(),
    i = 0;
for(var key in xhr){
  if(xhr.hasOwnProperty(key)){
    i++;
  }
}
console.log(i); //
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的状态码，表示服务器返回是正常状态。

1** 消息；2** 成功；3** 重定向； 4** 请求错误； 5** 服务器错误。

200，OK，访问正常
301，Moved Permanently，永久移动
302，Move temporarily，暂时移动
304，Not Modified，未修改
305，请求的资源必须通过指定的代理才能被访问
307，Temporary Redirect，暂时重定向
400，语义有误，当前请求无法被服务器理解
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请求的参数，它的使用格式如下，一共可以接受五个参数。

void open(
 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', '123456');

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事件进度对象。