【AJAX】XMLHTTPRequest对象

    在上一篇博客中，我们了解到了AJAX方式下的Web应用程序与传统方式下的Web应用程序有着一个最大的不同之处是：数据传输中不用刷新整个网页，给带来了一种不一样的用户体验。这种技术的核心就是利用的XMLHTTPRequest对象。

    那么，这篇博客就一起来学习XMLHTTPRequest对象。

    一.什么是XMLHTTPRequest。

    中文可以解释为可扩展超文本传输请求。Xml可扩展标记语言，Http超文本传输协议，Request请求。

    XMLHttpRequest 对象用于在后台与服务器交换数据。

    XMLHttpRequest 对象是开发者的梦想，因为您能够：在不重新加载页面的情况下更新网页；在页面已加载后从服务器请求数据；在页面已加载后从服务器接收数据；在后台向服务器发送数据。

    所有现代的浏览器都支持 XMLHttpRequest 对象。

    二.XMLHTTPRequest对象的属性。

    三.XMLHTTPRequest对象的方法

    四.XMLHTTPRequest对象五步使用法

    对于XMLHTTPRequest对象已有了一个理论认识，下面就介绍如何使用它的经典五步法。

    第一步：创建XMLHTTPRequest对象  

 var xmlhttprequest;
   if(window.XMLHttpRequest){
       xmlhttprequest=new XMLHttpRequest();
       if(xmlhttprequest.overrideMimeType){
           xmlhttprequest.overrideMimeType("text/xml");
       }
   }else if(window.ActiveXObject){
       var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
       for(var i=0;i<activeName.length;i++){
           try{
               xmlhttprequest=new ActiveXObject(activeName[i]);
               break;
           }catch(e){ 

           }
       }
   } 

   if(xmlhttprequest==undefined || xmlhttprequest==null){
       alert("XMLHttpRequest对象创建失败！！");
   }else{
       this.xmlhttp=xmlhttprequest;
   } 

    第二步：注册回调方法    

//2.注册回调方法
     xmlhttp.onreadystatechange=callback;
    //错误的写法callback();  

    第三步：设置和服务器交互的相应参数 

 /*
    //GET方式交互
    //设置和服务器端交互的相应参数
    xmlhttp.open("GET","AjaxServer?name="+userName,true);
    */
    /*
    //POST方式交互
    //设置和服务器端交互的相应参数
    xmlhttp.open("POST","AjaxServer",true);
    //POST方式交互所需要增加的代码
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    */ 

    第四步： 设置向服务器端发送的数据，启动和服务器端的交互  

//4.设置向服务器端发送的数据，启动和服务器端的交互
    //GET方式
    xmlhttp.send(null);
    //POST方式
    //4.设置向服务器端发送的数据，启动和服务器端的交互
    xmlhttp.send("name="+userName);   

    第五步：判断和服务器端的交互是否完成，还要判断服务器端是否返回正确的数据  

//根基实际条件写callback的功能代码
function callback(){
     if（xmlhttp.readState==4）{
         //表示服务器的相应代码是200；正确返回了数据
        if(xmlhttp.status==200){
            //纯文本数据的接受方法
            var message=xmlhttp.responseText;
            //使用的前提是，服务器端需要设置content-type为text/xml
            //var domXml=xmlhttp.responseXML;
            //其它代码
         }
    }
 } 

    五.学习总结

    以上是对XMLHTTPRequest对象基础的总结，初次接触，没有什么很深刻的体会，而对于后面了解到的内容，使用它会有一些扩展性的问题，如：“缓存问题”、“中文问题”以及“跨域问题”，也觉得应该是后面在项目实践中都要考虑的方面。并且，在以后的开发中，为了更好的用户体验，也是一定会用到AJAX这一技术，而上面的五步法也就是用到它时必不可少的一块代码，期待以后见证它的使用时刻~