【AJAX】XMLHttpRequest对象的使用

       通过XMLHttpRequest对象，AJAX可以只同服务器进行数据层面的交换，而不用每次都刷新页面。下面就简单介绍一下XMLHttpRequest对象的使用。

一、XMLHttpRequest对象的五步使用法

1、建立XMLHttpRequest对象

2、注册回调函数

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

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

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

二、知识详解

1、在使用XMLHttpRequest对象发送请求和处理响应之前，首先需要初始化该对象，由于XMLHttpRequest不是一个W3C标准，所以对于不同的浏览器，初始化方法也不同。如此所示。

            function submit(){
                //alert("test");
                //1、创建XMLHttpRequest对象
                if (window.XMLHttpRequest) {
                    //用于IE7，IE8，FireFox，Mozilla，Safari，Opera浏览器
                    alert("IE7，IE8，FireFox，Mozilla，Safari，Opera");
                    var xmlhttp=new XMLHttpRequest();
                    if (xmlhttp.overrideMimeType) {
                        xmlhttp.overrideMimeType("text/xml");
                    }
                }else if (window.ActiveXObject) {
                    //用于IE6，IE5，IE5.5浏览器
                    alert("IE6，IE5，IE5.5");
                    //定义一个包含所有可以用于创建XMLHttpRequest对象的ActiveX控件的名称的数组
                             var activexName=["MSXML2.CMLHTTP.6.0","MSXML2.CMLHTTP.5.0",
                             "MSXML2.CMLHTTP.4.0","MSXML2.CMLHTTP.3.0",
                             "MSXML2.XMLHTTP","Misorosoft.XMLHTTP"];
                         
                         for (var i = 0; i < activexName.length; i++) {
                             try{
                                     var xmlhttp=new ActiveXObject(activexName[i]);
                                     break;
                                 }  catch(e){
                                     
                                 }
                         }
                    }
                    if (xmlhttp==undefind || xmlhttp==null) {
                        alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");
                        return;
                   }
                   //alert(xmlhttp);

执行效果如下：

2、XMLHttpRequest对象的常用方法

3、XMLHttpRequest对象的常用属性

三、代码实现

        <script type="text/javascript">
            function submit(){
                //alert("test");
                //1、创建XMLHttpRequest对象
                if (window.XMLHttpRequest) {
                    //用于IE7，IE8，FireFox，Mozilla，Safari，Opera浏览器
                    //alert("IE7，IE8，FireFox，Mozilla，Safari，Opera");
                    var xmlhttp=new XMLHttpRequest();
                    if (xmlhttp.overrideMimeType) {
                        xmlhttp.overrideMimeType("text/xml");
                    }
                }else if (window.ActiveXObject) {
                    //用于IE6，IE5，IE5.5浏览器
                   // alert("IE6，IE5，IE5.5");
                    //定义一个包含所有可以用于创建XMLHttpRequest对象的ActiveX控件的名称的数组
                             var activexName=["MSXML2.CMLHTTP.6.0","MSXML2.CMLHTTP.5.0",
                             "MSXML2.CMLHTTP.4.0","MSXML2.CMLHTTP.3.0",
                             "MSXML2.XMLHTTP","Misorosoft.XMLHTTP"];
                         
                         for (var i = 0; i < activexName.length; i++) {
                             try{
                                     var xmlhttp=new ActiveXObject(activexName[i]);
                                     break;
                                 }  catch(e){
                                     
                                 }
                         }
                    }
                    if (xmlhttp==undefind || xmlhttp==null) {
                        alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");
                        return;
                   }
                   //alert(xmlhttp);
                   
                   //2、注册回调方法：
                   //目的：服务器端的数据返回给XMLHttpRequest对象，可以执行回调方法，并取到相应数据，并更新页面
                   xmlhttp.onreadystatechange=callback;//调用callback方法
                   //错误的写法：
                   //xmlhttp.onreadystatechange=callback();//调用callback方法将最后的结果返回值赋值给onreadystatechange
                   
                   //获取文本框中用户输入的内容
                   var userName=document.getElementById("UserName").value;
                   //用GET方式
                   //3、设置和服务器端交互的相应参数
                   //open的参数介绍①第一个参数：与服务器交互的方式
                   //②所请求的服务器的地址③表示XMLHttpRequest对象是采用异步交互还是同步交互
                    xmlhttp.open("GET","AJAX?name="+userName,true);
                   //4、设置向服务器端发送的数据，启动和服务器端的交互
                   xmlhttp.send(null);
                   //以上为用GET方式交互
                   
                   
                   //用POST方式
                   //3、设置和服务器端交互的相应参数
                   //open的参数介绍①第一个参数：与服务器交互的方式
                   //②所请求的服务器的地址③表示XMLHttpRequest对象是采用异步交互还是同步交互
                    xmlhttp.open("POST","AJAX",true);
                    //POST方式交互所需要增加的代码
                    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
                   //4、设置向服务器端发送的数据，启动和服务器端的交互
                   xmlhttp.send("name="+ userName);
                   //以上为用POST方式交互
          }
          
          function callback(){
              //5、判断和服务器端的交互是否完成，还要 判断服务器端是否正确返回了数据
              if (xmlhttp.readyState==4) {
                  //表示和服务器端的交互已经完成
                  if (xmlhttp.status==200) { 
                      //表示服务器的响应代码是200，正确返回了数据
                      //纯文本数据的接收方法
                      var message=xmlhttp.responseText;
                      //XML数据对应的DOM对象的接受方法
                      //使用的前提是，服务器端需要设置xontenttype为text/xml
                      //var domXml=xmlhttp.responseXML;
                      
                      //向div标签中填充文本内容的方法
                      var div=document.getElementById("message");
                      div.innerHTML=message;
}
              }
          }
          
        </script>