Ajax原生Xhr(xmlhttprequest)

最新推荐文章于 2024-01-16 18:05:03 发布

最新推荐文章于 2024-01-16 18:05:03 发布 · 579 阅读

文章标签：

#xmlhttprequest

js 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了XMLHttpRequest对象在AJAX中的应用，包括创建对象、注册回调、设置交互参数、发送数据及检查交互状态，旨在帮助读者深入理解异步通讯的核心。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

XHR

AJAX大家已经都知道了，是为了实现异步通讯，提高用户体验度XMLHttpRequest对象则是其中的重重之中。这篇博客重点总结一下这个对象的使用。当然还是按照经典的五步法来学习，以后在实践中有更多更好的想法，会拿出来分享的！

创建XMLHttpRuquest对象

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;  
   }

注册回调方法

　<span style="font-size:18px;">xmlhttp.onreadystatechange=callback;</span>

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

　<span style="font-size:18px;"> xmlhttp.open("GET","ajax?name=" +userName,true);</span>

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

　　<span style="font-size:18px;">  xmlhttp.send(null);</span>

判断服务器端的交互是否完成，判断服务器端是否返回正确的数据

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