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 ) {};
}
}