AJAX中的XMLHttpRequest对象

标签：xmlhttprequest   异步更新   

主要作用：在后台与服务器交换数据，这样就可以实现部分的更新数据，不需要重新的加载页面。

像所有的对象一样，XMLHttpRequest也有自己的属性和方法，这些属性和方法实现该对象的功能。

XMLHttpRequest对象的使用分为五步

其中涉及到了很多该对象的属性和方法，我们来一步一步的看看

1、             创建

虽然XMLHttpRequest对象在所有的浏览器上都兼容，但是在不同的浏览器上的创建是不一样的。

//1、创建XMLHttpRequest对象
               if(window.XMLHttpRequest){
                   //IE7、8，Firefox，Opera，Safari，Mozilla
                   xmlhttp=newXMLHttpRequest();//直接实例化
                   if(xmlhttp.overrideMimeType){//Mozilla在没xml的mimetype头的时候无法正常工作
                       xmlhttp.overrideMimeType("text/xml")//如果发来的不是text/xml就要忽略
                   }
               }elseif(window.ActiveXObject){
                 // IE6及其以下
                  //创建一个数组包括所有可以用来创建XMLHttpRequest所有ActiveXObject的名字
   var activexName=["MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];
                   for(var i=0;i<activexName.length;i++){
                       try{//如果没有就会报错，所以使用try
                          xmlhttp=newActiveXObject(activexName[i]);
                           break;
                       }catch(e){
                          
                       }
                    }
               }
               if(xmlhttp ==undefined|| xmlhttp ==null){
                   alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");
                   return;
               }<span style="font-size:18px; font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>

2、  注册回调方法          

          xmlhttp.onreadystatechange=callback;//只是让它找到回调方法
          //错误写法如下
          //xmlhttp.onreadystatechange=callback();//这样得到的是数据
              
          //获得用户在文本框中输入的内容
          var userName=document.getElementById("UserName").value;

3、设置和服务器交互的相应的参数            

xmlhttp.open("Get","AJAX?name="+userName,true);

4、设置向服务器发送的数据，启动和服务器端的交互

send(null); 一般为get使用null

send（string）仅适用于POST请求

5、判断和服务器端的交互是否完成还判断服务器端是否正确的返回了数据         

function callback(){
                     if(xmlhttp.readyState==4){
                    //表示完成交互
                    if(xmlhttp.status==200){
                        //表示服务器相应的代码是200，正确返回了数据
                        //如果返回的是是纯文本的接收方法
                        var message=xmlhttp.responseText;
                        //如果返回的是xml数据对应的DOM对象接收方法
                        //前提是服务器端需要设置content-type为text/xml
                        //var domXml=xml.requestXML;
                        //
                        //动态的向div标签中填充文本内容
                        var div=document.getElementById("message");
                        div.innerHTML=message;
                    }
                }
            }

AJAX中的XMLHttpRequest对象

标签：xmlhttprequest   异步更新   

原文地址：http://blog.csdn.net/yxflovegs2012/article/details/46659327