Ajax核心——XMLHttpRequest基础

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

创建XMLHttpReques

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

代码：

<script language="javascript" type = "text/javascript">
  var xmlHttp;
  //使用新版本的IE创建XMLHttprequestRequest对象
 try{
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
     }catch(_e){
   //使用旧版本的IE创建XMLHttpRequest对象
    try{
       xmlHttp = new AcriveXObject("Microsoft.XMLHTTP");
       }catch(_E){ }
      }

   //使用其他浏览器创建XMLHttpRequest对象
    if (!xmlHttp && typeof XMLHttpRequest !='undefined')
    try{
       xmlHttp = new  XMLHttpRequest();
     }catch(e){
        xmlHttp = false;
        }
       }
</script>

属性和方法

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

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

XML五步使用法

1、建立XMLHttpRequest对象

2、注册回调函数

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

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

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

实例代码：

      <script type="text/javascript"> 
        var xmlhttp; 
        function submit()  
        { 
            if(window.XMLHttpRequest) 
            { 
            //IE7 above,firefox,chrome^^ 
                xmlhttp=new XMLHttpRequest(); 
                //为了兼容部分Mozillar浏览器,当来自服务器响应开头不是xml，导致的无法响应问题 
                if(xmlhttp.overrideMimeType) 
                { 
                    xmlhttp.overrideMimeType('text/xml'); 
                } 
            } 
            else if(window.ActiveXObject) 
            { 
                //IE5\IE6 
                xmlhttp=new activeXObject("Microsoft.XMLHTTP"); 
            } 
            if(xmlhttp==null||xmlhttp==undefined) 
            { 
                alert("con't create XMLHttpRequest Object"); 
            } 
            var userName = document.getElementById('testText').value; 
            //注册回调函数 (错误的写法callback())
            xmlhttp.onreadystatechange = callback; 

            //Get方式交互，设置服务器端交互的响应的参数
            //发送信息 
            xmlhttp.open('GET','AjaxServer.aspx?name='+userName,true); 
           //设置向服务器端发送的数据，启动和服务器端的交互
           xmlhttp.send(null); 

            //Post方式交互
                             xmlhttp.open('POST', 'AjaxServer', true); 
                           xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 

             //设置向服务器端发送的数据，启动和服务器端交互
               xmlhttp.send('name='+userName);
    
        }

        //定义callback 函数 
        function callback()  
        { 
            //判断交互是否完成,是否正确返回 ，还有判断服务器端是否正确返回了数据
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)  
            { 
                //获取服务器返回信息 
                var message = xmlhttp.responseText; 
                //得到提示信息div 
                var testDiv=document.getElementById('test'); 
                testDiv.innerHTML=message; 
            } 
        } 
    </script> 

总结

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