XMLHttpRequest对象使用指南

XMLHttpRequest是一种可以在JavaScript语言中按照HTTP协议向服务器发送数据请求的浏览器API。

它解决了在不刷新页面的情况下动态获取外部服务器数据，是ajax以及axios的基础(fetch除外，它是浏览器原生的API)。

浏览器对XMLHttpRequest对象的支持

IE5.0 版本开始以 ActiveX 组件形式支持 XMLHttpRequest，IE 7.0 版本开始标准化 XMLHttpRequest。不过所有浏览器实现的 XMLHttpRequest 对象都提供相同的接口和用法。

var xhr = null;
if (window.XMLHttpRequest) {
    // IE7以上以及其它浏览器
    xhr = new XMLHttpRequest();
} else {
    // IE6以及以下版本
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

兼容所有浏览器方法

//兼容不同浏览器和版本得创建函数数组
var XHR = [  
    function () { return new XMLHttpRequest () },
    function () { return new ActiveXObject ("Msxml2.XMLHTTP") },
    function () { return new ActiveXObject ("Msxml3.XMLHTTP") },
    function () { return new ActiveXObject ("Microsoft.XMLHTTP") }
];
var xhr = null;
//尝试调用函数，如果成功则返回XMLHttpRequest对象，否则继续尝试
for (var i = 0; i < XHR.length; i ++) {
    try {
        xhr = XHR[i]();
    } catch(e) {
        continue  //如果发生异常，则继续下一个函数调用
    }
    break;  //如果成功，则中止循环
}

XMLHttpRequest新老版本功能对比

功能区别	XHR1	XHR2
支持数据类型不同 xhr.send(type data)	只支持文本字符串	支持多种类型，包括： 字符串、JSON 二进制(Blob)、二进制数组(ArrayBuffer) Document对象(XML/HTML) Form表单(FormData)
是否支持数据传送进度 xhr.onprocess(event) {     if(event.lengthComputable) {         event.loaded/event.total     } }	不支持数据传送进度 即没有返回当前传送长度	支持数据传送进度 event.lengthComputable为true event.loaded event.total
跨域请求CORS	不支持	支持跨域请求 设置xhr.withCredentials = true
HTTP请求超时限制	不支持	支持超时限制 设置xhr.timeout = 1000
上传文件	不支持 由于XHR1只支持字符串， 因此无法上传二进制文件	支持上传文件 var file = new Blob(['hello'], {type:'text/plain'}); xhr.send(file);

XMLHttpRequest对象属性与方法汇总

属性方法	属性介绍
xhr.onreadystatechange 可写，所有浏览器都支持 xhr.readystatuschange	状态变化监听程序，每次readyState发生改变都会触发这个事件 xhr.onreadystatechange = function() {     // 监听xhr当前状态     if (xhr.readyState == 4) {         // 成功     } }
xhr.readyState 只读	整数值，表示实例当前状态，只读，可能值： 0：表示实例已经创建，但还没有调用open方法 1：表示已经调用open方法，但还没执行send方法 2：表示send已经执行，服务器已经返回头部与状态码 3：表示正在接收服务器的数据体部分(body) 4：表示数据接收完毕或者接收失败
xhr.open()	设置HTTP请求参数 xhr.open(string method, string url, optional boolean async, optional string user, optional string pass) 后面三个参数为非必填项 async默认为true代表异步请求，user & pass为认证用户信息
xhr.setRequestHeader()	设置发送请求的头部信息，若多次设置则合并 该方法必须放在open()之后，send()之前 xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Content-Length", JSON.stringify(data).length);
xhr.send()	发送HTTP请求 xhr.send(optional data) 参数为非必填项，代表发送的数据体 类型可为：String/JSON/Document/Blob/ArrayBuffer/FormData FormData为DOM对象，代表发送表单 var formData = new FormData(); formData.append("email", "...."); xhr.send(formData);
xhr.upload()	上传文件，返回一个对象，可以对该对象事件进行监控 var file = new Blob(['hello world'], {type: 'text/plain'}) xhr.upload.onprogress = function (e) {     if (e.lengthComputable) {} } xhr.send(file);
xhr.overrideMimeType()	设置指定的MIME类型覆盖服务器返回的真实类型 必须在send()方法之前调用
xhr.getResponseHeader() xhr.getAllResponseHeaders()	返回服务器的HTTP头部信息 var lastModified = xhr.getResponseHeader("Last-Modified"); var headers = xhr.getAllResponseHeaders();
xhr.responseType 可写	字符串，表示服务器返回的数据类型，可能值： ""：空字符串，文本文件，等同于text "text"：字符串 ”json“：JSON对象 "document"：Document对象，文档对象，比如HTML/XML "blob"：Blob对象，二进制对象，比如图片文件等 ”arraybuffer“：ArrayBuffer对象，二进制数组
xhr.responseText 只读	从服务器接收到的字符串，HTTP请求完成后该属性内容才会完整
xhr.responseXML 只读	从服务器接收到的HTML/XML对象，注意要想生效需： 1. 设置HTTP的Content-Type为text/xml或application/xml 2. responseType为document
xhr.response	从服务器接收到的数据体部分，相比responseText该属性支持更多的类型，比如JSON、Document，二进制等
xhr.responseURL	字符串，表示请求服务器的真实URL地址 注：与原始请求地址可能不同，因为服务器可能会跳转
xhr.status/xhr.statusText 只读	整数，表示服务器返回的HTTP状态码，如果服务器没有返回这个属性的默认值是200 200(OK) 301(Moved Permanetly), 302(Moved Temporarily) 304(Not Modified) 307(Temporary Redirect) 401(Unauthorized),403(Forbidden), 404(Not Found) 500(Internal Server Error)
xhr.withCredentials	布尔值，默认为false，表示跨域请求时用户信息是否包含在请求头中 如果设置为true，会发送和设置服务器的Cookie，服务器端必须显式返回： Acces-Controll-Allow-Credentials: true
xhr.timeout xhr.ontimeout	设置服务器时间超时，若设为0则代表无时间限制
xhr.load xhr.onload	服务器请求成功
xhr.abort xhr.onabort	服务器请求终止
xhr.error xhr.onerror	服务器请求失败
xhr.loadstart xhr.onloadstart	服务器开始请求(HTTP请求发出)
xhr.progress xhr.onprogress	正在向服务器发送和加载数据 xhr.onprogress = function(event) {     console.log(event.total); console.log(event.loaded); }
xhr.loadend xhr.onloadend	服务器请求完成，包括成功和失败