AJAX入门---五步使用XMLHttpRequest对象

     XMLHttpRequest简介：

         XMLHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。当页面全部加载完毕后，客户端通过该对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。

         五步使用XMLHttpRequest对象

         1．  建立XMLHttpRequest对象如下：

         （不同浏览器中XMLHttpRequest对象建立的方式不同：IE7以上，FireFox，Safari，Opera等中直接newXMLHttpRequest()；IE6，IE5.5等则需要通过用一个正确的ActiveXObject控件名称通过new ActiveXObject(控件名)的方式）

[javascript] view plain copy print ?

1. if (window.XMLHttpRequest) {  
2.     xmlhttp=new XMLHttpRequest();  
3.     if (xmlhttp.overrideMimeType) {  
4.         xmlhttp.overrideMimeType("text/xml");  
5.     }  
6. }else if (window.ActiveXObject) {  
7.     var activexName=["MSXML.2.XMLHTTP.6.0","MSXML.2.XMLHTTP.5.0",  
8.                     "MSXML.2.XMLHTTP.4.0","MSXML.2.XMLHTTP.3.0",  
9.                     "MSXML.2.XMLHTTP","Miscrosoft.XMLHTTP"];  
10.     for (var i = 0; i <activexName.length; i++) {  
11.         try {  
12.             xmlhttp=new ActiveXObject(activexName[i]);  
13.         } catch (e) {  
14.   
15.         }  
16.     }  
17. }  

         2．  注册回调函数

         （设置回调函数是，不要在函数名后面加括号。加括号表示将回调函数的返回值注册给onreadystatechange属性）

[javascript] view plain copy print ?

1. xmlhttp.onreadystatechange=callback;   

         3．  使用open方法设置服务器端交互的基本信息

         （open方法最多有五个参数局，其中头三个参数是必须的）

[javascript] view plain copy print ?

1. //使用GET方式时，请求数据位于url链接中，后面的send方法的参数直接写null  
2. xmlhttp.open("GET","Ajax?name="+ userName,true );       
3.    
4. //使用POST方式时，open方法后面需要先调用setRequestHeader方法，来设置Content-Type的值，然后调用send方法，send的参数就是请求的数据  
5. xmlhttp.open("POST","Ajax", true);   
6. xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  

         4．  设置发送的数据，开始和服务器端交互

[javascript] view plain copy print ?

1. //GET方式  
2. xmlhttp.send(null);  
3.    
4. //POST方式  
5. xmlhttp.send("name=" + userName);  

         5．  在回调函数中判断交互是否结束，响应是否正确，并根据需要获取服务器端返回的数据，更新页面的内容

         （回调函数中，最好将判断readyState和status的两个if条件，分开来写）

[javascript] view plain copy print ?

1. function callback(){  
2.     //5.判断和服务器端的交互是否完成，还要判断服务器端是否正确返回了数据  
3.     if (xmlhttp.readyState == 4) {  
4.         //表示和服务器端的交互已经完成  
5.         if (xmlhttp.status==200) {  
6.             //表示和服务器的响应代码是200，正确的返回了数据  
7.             //纯文本数据的接受方法   
8.             var message =xmlhttp.responseText;  
9.             //Xml数据对应的Dom对象的接受方法  
10.             //使用的前提是，服务器端需要设置content-type为text/xml  
11.             //var domXml=xmlhttp.responseXML;  
12.   
13.   
14.             //向div标签中填充文本内容的方法  
15.             var div=document.getElementById("message");  
16.             div.innerHTML=message;  
17.         }  
18.     }  
19. }  

         总结：

         当然通过这个小小的例子，我们只能说是经历了一个从不知道到知道的过程，初步了解了一下XMLHttpRequest对象的用法，更加深刻的理解还需要我们更加深入的学习和在实践中加以利用。

文中demo源码免费下载链接：http://download.csdn.net/detail/senior_lee/7707257