在IE5中，XHR对象是经由历程MSXML库中的ActiveX对象完成的。在IE中可能会碰到三种差别版本的XHR对象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0和MXSML.XMLHttp.6.0。
适用于IE7之前的浏览器的代码：
function createXHR() {
if (typeof arguments.callee.activeXString != "string") {
var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
i, len;
for (var i = 0, len = versions.length; i < len; i++) {
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch (e) {
//
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}
IE7以后的版本和其他浏览器都邑运用下面的函数来建立：
var xhr = new XMLHttpRequest();
兼容代码：
function createXHR() {
if (typeof XMLHttpRequest != "undefined") {
return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") {
if (typeof arguments.callee.activeXString != "string") {
var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
i, len;
for (var i = 0, len = versions.length; i < len; i++) {
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch (e) {
//
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
} else {
throw new Error("No XHR Object available.");
}
}
兼容代码的运用：
var xhr = new createXHR();
XHR的用法
在运用XHR对象时，要挪用的第一要领时
open（），它吸收三个参数：要发送要求的范例，要求的URL和示意是不是异步发送要求的布尔值。
如：
xhr.open("get", "note.txt", false);
open()示意启动一个要求以备发送，send()要领才是真正的发送；
要发送特定的要求，要向下面一样挪用
send()要领：
如：
xhr.open("get", "note.txt", false);
xhr.send(null);
XHR从服务器返回后，发生变化的属性，即保留服务器相应数据的属性为：
responseText:作为相应主体被返回的文本responseXML:假如相应范例是”text/xml”和”application/xml”，则保留着相应数据的XML DOM文档status：相应的HTTP状况statusText：HTTP状况的申明
一般来说，可以将HTTP状况吗为200作为胜利标志，此时responseText属性内容准备就绪，responseXML也应当可以接见。别的状况吗为304示意要求的资本没有被修正，可以直接运用浏览器中缓存的版本。
完全代码以下：
var xhr = new XMLHttpRequest();
xhr.open("get", "note.txt", false);
xhr.send(null);
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
document.write(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
要注意的是：
我们在多半情况下都要发送异步要求的，才能让js继承实行而没必要守候相应。
可以检测XHR对象的readyState属性，该属性示意要求/相应历程的当前运动阶段。这个属性可取的值以下：
0：未初始化。还没有挪用open()；
1：启动。已挪用open()但未挪用send()；
2：发送。已挪用send()但还没有吸收到相应；
3：吸收。已吸收到部份相应数据；
4：完成。已吸收到悉数相应数据，而且可以在客户端中运用；
详细花样以下：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
//......
}
}
};
xhr.open("get", "user.json", true);
xhr.send();
举个例子：
json文件：
[{
"name": "oliver",
"age": 18,
"user": true
}, {
"name": "troy",
"age": 26,
"user": true
}]
dom：
<pre id="pre"></pre>
<button id="btn">insert</button>
js：
var btn = document.getElementById("btn"),
pre = document.getElementById("pre"),
obj = null;
btn.onclick = function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
console.log(xhr.responseText);
obj = JSON.parse(xhr.responseText);
pre.innerHTML = obj[1].name; //troy
}
}
};
xhr.open("get", "user.json", true);
xhr.send();
};
当点击btn时，pre部份显现猎取的json文件中的部份信息。
别的在吸收到相应之前还可以挪用
abort()要领来作废异步要求。
以下所示：
xhr.abort();
在停止要求以后，还应当对XHR对象举行解援用操纵。因为内存缘由，不发起重用XHR对象。
HTTP头部信息
XHR对象供应了操纵要求头部和相应头部信息的要领。 在默许情况下，在发送XHR要求同时，还会发送以下头部信息：
Accept： 浏览器可以处置惩罚的内容范例
Accept – Charset： 浏览器可以显现的字符集
Accept – Encoding: 浏览器可以处置惩罚的紧缩编码
Accept – Language: 浏览器当前设置的言语
Connection: 浏览器与服务器之间衔接的范例
Cookie: 当前页面设置的任何Cookie
Host: 发送要求的页面地点的域
Referer: 发送要求的页面的URI
User – Agent: 浏览器的用户代办字符串
运用
setRequestHeader()要领可以设置自定义的要求头部信息。
这个要领吸收两个参数： 头部字段名和头部字段值。 要胜利发送要求头部信息， 必须在挪用open（） 要领以后且send（） 要领之前挪用它。 发起运用自定义的头部称号。如：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
//......
}
}
};
xhr.open("get", "user.json", true);
xhr.setRequestHeader("MyHeader", "MyValue"); //这里定义
xhr.send();
别的，挪用XHR对象的getResponseHeader()要领传入头部字段称号，可以获得相应的相应头部信息。而挪用getAllResponseHeaders()要领则可以获得一个包括一切头部信息的长字符串：
var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeaders();
GET要求
用encodeURIComponent()编码后的花样以下：
xhr.open("get", "example.php?name1=value1&name2=value2", true);
下面的函数可以辅佐向现有的URL的末端增加查询字符串参数：
function addURLParam(url, name, value) {
url += (url.indexOf("?") == -1 ? "?" : "&"); //搜检URL是不是包括问号（以肯定是不是已有参数存在），没有就加上问好，不然增加一个和号
url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
}
举个例子：
var url = "example.php";
url = addURLParam(url, "name", "oli");
url = addURLParam(url, "book", "js");
xhr.open("get", url, false);
POST要求
POST要求一般用于向服务器发送应当保留的数据
运用post提交，要设置头部属性Content-type。假如不设置，会涌现数据没法解码和猎取等题目。
