Ajax核心——XMLHttpRequest基础

 XMLHttpRequest对象负责将用户信息以异步方式发送到服务器，并接受服务器返回的相应信息和数据。也就是可以在页面已经加载后从后从服务器请求、接收数据，这样使得用户的体验度更好，而同时提升了客户端与服务器的交互速度，AJax得以实现。故    XMLHttpRequest是Ajax技术体系中最为核心的技术，缺少了它，Ajax的其余技术就无法成为一个有机的整体。

Ajax 的XML

创建XMLHttpReques

在使用XMLHttpRequest对象发送请求和处理响应之前，首先必须使用JavaScript创建XMLHttpRequestRequest对象。

<span  style="font-family:fangSong_GB2312;font-size:18px" ><script language="javascript" type="text/javascript">
var xmlHttp;
try{
xmlHttp= new ActiveXOject("Msxml12.XMLHTTP");
}catch(_e)
{
try{
xmlHttp=new ActiveXOject("Microsoft.XMLHTTP")
}catch(_E)
{}
}

//使用其他浏览器创建XMLHttpRequest对象
if(!xmlHttp && typeof XMLHttpRequest !='underline
{
try{
xmlHttp= new XMLHttpRequest();

}catch(e){
xmlHttp=false;
}
}
</script>
</span>

属性和方法

    XMLHttpRequest对象提供了一系列属性和方法，来向服务器端发起异步HTTP请求，监听服务器状态，并在服务器完成数据响应处理之后接收服务器端返回的信息数据。

        属性和方法连接：http://www.w3school.com.cn/xmldom/dom_http.asp 

XML五步使用法

1、建立XMLHttpRequest对象

2、注册回调函数

3、使用Open方法设置和服务器端交互的基本信息

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

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

1. <span style="font-family:FangSong_GB2312; font-size:18px">      <script type="text/javascript">   
2.         var xmlhttp;   
3.         function submit()    
4.         {   
5.             if(window.XMLHttpRequest)   
6.             {   
7.             //IE7 above,firefox,chrome^^   
8.                 xmlhttp=new XMLHttpRequest();   
9.                 //为了兼容部分Mozillar浏览器,当来自服务器响应开头不是xml，导致的无法响应问题   
10.                 if(xmlhttp.overrideMimeType)   
11.                 {   
12.                     xmlhttp.overrideMimeType('text/xml');   
13.                 }   
14.             }   
15.             else if(window.ActiveXObject)   
16.             {   
17.                 //IE5\IE6   
18.                 xmlhttp=new activeXObject("Microsoft.XMLHTTP");   
19.             }   
20.             if(xmlhttp==null||xmlhttp==undefined)   
21.             {   
22.                 alert("con't create XMLHttpRequest Object");   
23.             }   
24.             var userName = document.getElementById('testText').value;   
25.             //注册回调函数 (错误的写法callback())  
26.             xmlhttp.onreadystatechange = callback;   
27.                
28.             //Get方式交互，设置服务器端交互的响应的参数  
29.             //发送信息   
30.             xmlhttp.open('GET','AjaxServer.aspx?name='+userName,true);   
31.            //设置向服务器端发送的数据，启动和服务器端的交互  
32.            xmlhttp.send(null);   
33.             
34.             //Post方式交互          
35.                              xmlhttp.open('POST', 'AjaxServer', true);   
36.                            xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');   
37.                            
38.              //设置向服务器端发送的数据，启动和服务器端交互   
39.                xmlhttp.send('name='+userName);  
40.       
41.         }  
42.   
43.         //定义callback 函数   
44.         function callback()    
45.         {   
46.             //判断交互是否完成,是否正确返回 ，还有判断服务器端是否正确返回了数据  
47.             if (xmlhttp.readyState == 4 && xmlhttp.status == 200)    
48.             {   
49.                 //获取服务器返回信息   
50.                 var message = xmlhttp.responseText;   
51.                 //得到提示信息div   
52.                 var testDiv=document.getElementById('test');   
53.                 testDiv.innerHTML=message;   
54.             }   
55.         }   
56.     </script>   
57. </span>  

本篇博客简单总结了一下XMLHttpRequest对象的一些基本知识，积累理论，实践应用。通过学习XMLHttpRequest对象也体会出了BS的优势，发布简单方便，灵活，用户体验度好。

原文地址 点击打开链接