JavaScript笔记整理 —— XMLHttpRequest对象

XMLHttpRequest()方法是由JavaScript创建的HTTP请求对象（构造器）。值得一提的是，它最在是在IE中实现的（在IE中他叫做ActiveX）。

目前，它已被所有现代浏览器所支持，是一种跨浏览器技术——Ajax应用。

实际上，Ajax可以看做是由Js和XML之间建立的异步联系。

XHR对象是由Js代码创建的。

XML, 最初创建的HTTP请求是用来获取XML文档，XML文档中包含了需要响应给页面的信息。但是现在这种做法已经不多见了。

异步，是指当代码在发送HTTP请求之后，无需停下来等待浏览器响应，可以继续执行其它任务。等到相关信息到达时自然会收到通知(通常以事件的形式出现)。

XMLHttpRequest对象用法，分两个步骤：

发送请求——先构建XMLHttpRequest对象，然后为它设置事件监听器。

处理响应——当服务器的响应信息到达时事件监听器会收到通知，之后相应的代码就会执行。

一、发送请求

var xhr = new XMlHttpRequest(); //实例化一个XMLHttpRequest对象
xhr.onreadystatechange = myCallback;  // 设置一个触发onreadystatechange事件的事件监听器
xhr.open('GET', 'somefile.txt', true);
xhr.send('');  //发送请求

注意：HTTP请求类型（GET\POST\HEAD等）中，GET和POST最常见。当需要发送的数据不是很多，且不会改写服务器数据时，我们一般会用GET类型，否则就会使用POST类型。

xhr.open('GET', 'somefile.txt', true);

第一个参数：请求类型。

第二个参数：所要请求目标的URL;

第三个参数：布尔值，为true时请求按照异步方式进行，否则，就为false.

xhr.send('');

只要我们愿意，可以使用send()方法在发送请求时附带上任何数据。

对于GET请求，这里发送的是空字符串。因为数据被包含在了URL中。

对于POST请求，它是表单数据中的一个查询字符串key=value&key2=value2。

当请求被发送之后，我们的代码就可以将注意力转向到其它任务。等到收到服务器的响应时，会自动启动回调函数myCallback。

二、处理响应

上面我们已经创建了XHR对象，并给它添加了一个readystatechange事件监听器。

每隔XHR对象中都有一个叫做readyState的属性，一旦我们改变了这个属性，那么就会触发readystatechange事件。

readystate可能的状态值如下：

0 —— 未初始化状态。

1 —— 载入请求状态。

2 —— 载入完成状态。

3 —— 请求交互状态。

4 —— 请求完成状态。

HTTP请求的状态码：

404 —— 目标URL不存在（未找到文件）

400 —— Bad Request 请求出现语法错误。

500 —— Internal Server Error 服务器遇到了意料不到的情况，不能完成客户的请求。

200 —— OK 一切正常，对GET和POST请求的应答文档跟在后面。

当readystste值为4时，就意味着服务器的相应信息已经返回。可以开始处理了。而处理响应的事件回调函数除要确认readystate的值是4之外，还要检查HTTP请求状态码。检查HTTP请求状态码通过XHR对象的status属性来获得。

一旦，

xhr.readystate

的值为4且

xhr.status

的值为200时，就可以通过

xhr.responseText

来访问目标URL中的内容了。

function myCallback() {
if ( xhr.readystate < 4 ) {
return;
}

if ( xhr.status !== 200 ) {
alert('Error!');
return;
}

alrt( xhr.responseText );
}

三、兼容IE7-

以下代码，是一个完整的跨浏览器解决方案：

// 所要创建对象的标示符，以下是三个不同版本
var ids  = ['MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP',
'Microsoft.XMLHTTP'];

var xhr;
if ( XMLHttpRequest ) {
xhr = new XMLHttpRequest();
} else {
// 针对早于IE7的浏览器
for ( var i = 0; i < ids.length; i++ ) {
try{
xhr = new ActiveXObject( ids[i] );
break;
} catch( e ) {};
}
}