XMLHttpRequest对象详解

本文章参考自：《征服Ajax Web 2.0 开发技术详解》为了方便自己日后查阅并与大家共享。

 

1.概述

    XMLHttpRequest对象是整个Ajax开发的基础，提供了客户端和服务器端进行异步通信的能力。XMLHttpRequest对象由JavaScript创建并使用，客户端可以只从服务器端获取需要的信息，通过与DOM和CSS的结合，可以实现局部刷新；同时还可以通过XMLHttpRequest对象异步提交数据，将页面中的数据在后台提交到服务器端而无需刷新页面。

2. 创建XMLHttpRequest对象

    XMLHttpRequest对象不是一个国际标准。在不同的浏览器有不同的表现。所以在实现跨浏览器运行的Ajax应用时，必须考虑所有的使用场合。下面给出了比较通用的创建XMLHttpRequest对象的方法。

var xmlhttp;
	try{
	//IE 5.0 
		xmlhttp = new ActiveXObject('Msxm12.XMLHTTP');
	}catch(e){
		try{
		//IE 5.5 及更高版本
			xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
		}catch(e){
			try{
			//其他浏览器
				xmlhttp = new XMLHttpRequest();
			}catch(e){}
		}
	}

 

3. 使用 Open方法创建请求

    创建好XMLHttpRequest对象后，使用其Open方法，创建一个请求，并准备向服务器发送，其open方法原型如下：

   open(method,url,asynchronous,user,password);

   其中参数含义如下：

• method： 指请求的类型，一般为get或者post
• url： 指定请求的地址，可以是绝对地址或相对地址，可以附带查询字符串。
• asynchronous：可选参数，表示是同步还是异步，异步请求为fasle，同步为true，默认情况下该参数为true。（注：对于这个参数的理解本人还不是完全理解，希望理解的同仁帮忙注释下。 ）
• user：可选参数，指定请求的用户名，没有则省略。
• password：可选参数，指定请求的密码，没有则省略。

4. 使用send方法发送一个请求

    使用open方法创建了请求后，可以使用send方法向服务器发送该请求，其原型如下：

    send（body）；

    该方法仅有一个body参数，它表示要向服务器发送的数据，其格式为查询字符串的形式。如：

    var body="method=search&parm=java";

    定义了向服务器发送两个名/值对，它们用&符号隔开。如果在open中指定的是get方法，则这些参数作为查询字符串提交，服务器端一般用request.querystring获得；如果采用post方法，则这些参数作为HTTP的post方法提交，服务器端一般用request.form来获取。其中body参数是必须的，如果不发送任何数据，可以使用xmlhttp.send(null)的形式。

    如果在open方法中指定的是异步请求，则send方法执行后会立即执行下一条语句，否则send方法一直阻塞，直到请求完成或超过时才执行下一条语句。这也是同步请求与异步请求之间的区别。

    如果open方法中指定的是用post方法提交请求，那么在send之前必须使用如下的语句设置HTTP头，语法如下：

    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

5. 使用onreadystatechange事件捕获请求的状态变化

    在发送请求后，一般都是通过事件机制来捕获请求的状态，XMLHttpRequest对象提供了onreadystatechange事件来捕获请求状态信息。

    Onreadystatechange事件可以指定一个事件处理函数处理XMLHttpRequest对象的执行结果，例如：

    xmlhttp.onreadystatechange = function() {

            //事件处理语句

    }

    xmlhttp.open(...);

    xmlhttp.send(...);

    这里将事件绑定在调用open和send方法之前进行，是因为这两个方法都会触发onreadystatechange事件。

6. 使用readyState属性判断请求状态

    onreadystatechange事件是在readyState属性发生时触发的，readyStatea的值表示了当前请求的状态，在事件处理程序中可以根据这个值来进行不同的处理。下表介绍了各个值的含义。

 

readyState值	含义
0	这也是readyState一开始具有的值，表示对象已经建立，但还未初始化，这时尚未调用open方法
1	表示open方法已经调用，但尚未调用send方法
2	表示send方法已调用，其数据未知
3	表示请求已经发送成功，正在接收数据
4	表示数据已接收成功。此时相当于直接使用浏览器打开网页，状态栏显示“完成”字样