转：

传统的Web应用请求服务器返回的一般是是完整的HTML页面，这样往往就需要页面进行刷新操作，不仅耗时而且用户体验度也不好。最典型的代表就是form表单登录操作了。如果登录失败往往是跳转到原网页重新登陆，如果是这种情况话就会造成资源的浪费，因为返回的HTMl网页中大多数元素都是重复的。

正因为这些原因后来才出现了ajax，它是一种交互式的网页开发技术，而XMLHttpRequest是它的核心的内容，它能够为页面中的JavaScript脚本提供特定的通信方式，从而使页面的javascript脚本和服务器之间形成动态交互的效果，XMLHTTPRequest的最大的优点是页面内的javascript脚本可以不用刷新页面，而直接和服务器发生交互，从而实现页面无刷新的效果。

1.下面首先来介绍一下XMLHttpRequest的详细属性和方法：

2.然后介绍一下XMLHttpRequest的使用步骤：

一、初始化XMLHttpRequest对象

 在使用XMLHttpRequest对象之前需要将XMLHttpRequest对象实例化，因为各个浏览器对这个实例化过程的实现不同，所以针对不同的浏览器实例化XMLHttpRequest对象的方式也不尽相同。

      针对微软IE浏览器：

Js代码  

1. var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  

      针对其他的浏览器：

Js代码  

1. var xmlHttp = new XMLHttpRequest();  

      所以，综合了这两种实例化XMLHttpRequest的形式，就可以提取出一个实例化的公共方法，代码如下：

Js代码  

1. //实例化XMLHttpRequest对象  
2. function createXMLHttpRequest(){  
3.     if(window.XMLHttpRequest){  
4.         xmlHttp = new XMLHttpRequest();   
5.     }else if(window.ActiveXObject){  
6.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
7.     }  
8. }  

二、指定响应处理函数

      接下来就要指定当服务器返回信息时客户端的处理方式。只需将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性即可，比如：

Js代码  

1. xmlHttp.onreadystatechange = callBack;  

      需要说明的是，这个函数名称不加括号，不带参数；也可以使用JavaScript即时定义函数的方式定义响应函数，比如：

Js代码  

1. xmlHttp.onreadystatechange = function(){  
2.          // Do something...  
3. }  

三、发送HTTP请求

      指定响应处理函数后，就可以向服务器发出HTTP请求了。这需要调用XMLHttpRequest对象的open()和send()方法。

Js代码  

1. xmlHttp.open("get/Post","URL",true/false);  
2. xmlHttp.send(null);  

      3.1 open()方法详解 

Js代码  

1. //XMLHttpRequest对象的open()方法原型  
2. void open(string method, string URL , boolean asynch, string username, string password);  

      open()方法表示会建立对服务器的调用，这是初始化一个请求的纯脚本方法。

      它有2个必要的参数，还有3个可选的参数。method表示向服务器发送信息的方式，可以为Get或Post；URL表示所调用的服务器资源的URL；asynch是一个布尔值，指示这个调用时异步还是同步，默认为true；username和password允许我们指定一个特定的用户名和口令。 一般使用时只取前三个参数即可。

      3.2 send()方法详解

Js代码  

1. //XMLHttpRequest对象的send()方法原型  
2. void send(content);  

      send()方法具体向服务器发送请求。如果请求声明为异步的，这个方法就会立即返回，否则它会等待，知道接收到响应为止。参数content是可选的，可以是一个DOM对象的实例、一个输入流或一个串。传入的内容会作为请求体的一部分发送。

四、处理服务器返回的信息

      在第二部中我们为XMLHttpRequest指定了响应处理函数，响应处理函数检查XMLHttpRequest对象的readyState属性值的变化，如果readyState值为4时，代表服务器已经传回所有信息，可以开始处理信息并更新页面内容了。

Js代码  

1. function callBack(){  
2.         if(xmlHttp.readyState==4){  
3.     if(xmlHttp.status==200){  
4.             //do something with xmlHttp.responseText;  
5.             xmlHttp.responseText;  
6.     }     
7.         }  
8. }  

      4.1 readyState属性详解

      readyState属性用来表示请求的状态，有5个可取值，分别是：

      “0”：表示未初始化，即对象已经建立，但是尚未初始化(尚未调用open()方法)；

      “1”：表示正在加载，此时对象已建立，尚未调用send()方法；

      “2”：表示请求已发送，即send()方法已调用；

      “3”：表示请求处理中；

      “4”：表示请求已完成，即数据接收完毕。

      4.2 status、statusText属性详解

      status：返回当前请求的HTTP状态码(只读)；

      statusText：返回当前请求的响应行状态(只读)。

      4.3 responseText、responseXML属性详解

      responseText属性表示服务器的文本响应，其处理结果以字符串形式返回。

      responseXML属性表示服务器响应，其结果将格式化为XML Document对象。

      上述四个步骤，就是XMLHttpRequest对象在Ajax程序中的运行周期，即初始化、指定响应函数、发送请求、处理响应。

 下面是本示例的完整代码：

Js代码  

1. 1. var xmlHttp;  
   2.   
   3. function AjaxFunction(){  
   4.         createXMLHttpRequest();  
   5.         if(xmlHttp!=null){  
   6.     xmlHttp.onreadystatechange = callBack;  
   7.     xmlHttp.open("get/Post","URL",true/false);  
   8.     xmlHttp.send(null);  
   9.         }     
   10. }     
   11.   
   12. //实例化XMLHttpRequest对象  
   13. function createXMLHttpRequest(){  
   14.         if(window.XMLHttpRequest){  
   15.     xmlHttp = new XMLHttpRequest();   
   16.         }else if(window.ActiveXObject){  
   17.     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
   18.         }  
   19. }  
   20.   
   21. //指定响应函数  
   22. function callBack(){  
   23.         if(xmlHttp.readyState==4){  
   24.                 if(xmlHttp.status==200){  
   25.             //do something with xmlHttp.responseText;  
   26.             xmlHttp.responseText;  
   27.                 }     
   28.         }  
   29. }