js中的XMLHttpRequest对象

发表于 更新于 分类于 阅读次数：

介绍

  • XMLHttpRequest对象是ajax技术的核心。
  • JavaScript通过这个对象可以自己发送请求，同时也自己处理响应。
  • 得到了几乎所有现代浏览器的支持。

兼容性

微软最早在IE5中以ActiveX对象的形式实现了一个名叫XMLHTTP的对象。在IE中创建新的对象要使用下列代码：

1
var request = new ActiveXObject('Msxml2.XMLHTTP.3.0');

其他浏览器则基于XMLHttpRequest来创建新对象：

1
var request = new XMLHttpRequest();

更麻烦的是，不同IE版本中使用的XMLHTTP对象也不完全相同。为了兼容所有浏览器，这样写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function getHTTPObject() {
    <!-- 判断浏览器是否支持XMLHttpRequest -->
    if(typeof XMLHttpRquest === 'undefined'){
        try{
            return new ActiveXObject('Msxml2.XMLHTTP.6.0');
        }catch(e){}
        try{
            return new ActiveXObject('Msxml2.XMLHTTP.3.0');
        }catch(e){}
        try{
            return new ActiveXObject('Msxml2.XMLHTTP');
        }catch(e){}
        return false;
    }
    return new XMLHttpRequest();
}
var request = getHTTPObject();

open方法

XMLHttpRequest对象的HTTP和HTTPS请求必须通过opent方法初始化。这个方法必须在实际发送请求之前调用，以用来验证请求方法，URL以及用户信息。这个方法不能确保URL存在或者用户信息必须正确。初始化请求可以接受5个参数，一般常用前3个参数：

1
open( Method, URL, Asynchronous, UserName, Password )
  1. 第一个参数是请求方法，如下
  • GET (IE7+,Mozilla 1+)
  • POST (IE7+,Mozilla 1+)
  • HEAD (IE7+)
  • PUT
  • DELETE
  • OPTIONS (IE7+)

使用POST请求的方法的话，需要发送合适的请求头信息，例子：

1
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  1. 第二个参数是string类型，标示请求的URL。
  2. 第三个参数是boolean类型，用于指定请求是否以异步方式发送和处理。
  3. 第四个参数是string类型，指定用户名。
  4. 第五个参数是string类型，指定密码。

onreadystatechange事件处理函数

它会在服务器给XMLHttpRequest对象送回响应的时候被触发执行。
将自动在XMLHttpRequest对象的readyState属性改变时被触发。

readyState 属性

服务器在向XMLHttpRequest对象发回响应时，该对象有许多属性可用，浏览器会在不同阶段更新readyState属性的值，它有5个可能的值：

  • 0 表示未初始化
  • 1 表示正在加载
  • 2 表示加载完毕
  • 3 表示正在交互
  • 4 表示完成

只有readyState属性的值变成了4，就可以访问服务器发送回来的数据了。

status属性

代表请求的响应状态，如200，404等。

send方法

向服务器发送请求，默认发送的null。 

1
request.send(null)

send方法也可以发送参数，但仅限post请求才行，get请求发送参数需要在open里面的第二个参数里的请求地址后面添加。下面举个例子：

get请求发送参数

1
2
3
4
5
6
7
8
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://localhost:3030/api?foo=bar&lorem=ipsum', true);     // 发送的参数数据 { foo: 'bar', lorem: 'ipsum' }
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(request.responseText);
    }
};
xhr.send();

post请求发送参数

1
2
3
4
5
6
7
8
9
10
11
12
var request = new XMLHttpRequest()
request.open('post', 'http://localhost:3030/api', true);
//发送合适的请求头信息
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

request.onreadystatechange = function () {
    if (request.readyState === 4 && request.status === 200) {
        console.log(request.responseText);
    }
};
// 参数
request.send("foo=bar&lorem=ipsum"); // 发送的参数数据 { foo: 'bar', lorem: 'ipsum' }

内容部分参考自《JavaScript DOM 编程艺术》