XMLHttpRequest对象的五步使用

什么是XMLHttpRequest对象？

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

为什么使用XMLHttpRequest对象？

在不重新加载页面的情况下更新网页

在页面已经加载后从服务器请求数据

在页面已经加载后从服务器接受数据

在后台想服务器发送数据

XMLHttpRequest对象的五步使用：

1.建立XMLHttpRequest对象

2.注册回调函数

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

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

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

1.建立XMLHttpRequest对象：

<span style="font-size:18px;"> var xmlhttp;
        function submit(){
           if(window.XMLHttpRequest){
               //IE7,IE8,fireFox,Mozillar,Sarari,Opera
               //alert("IE7,Opera");
               //1.创建XMLHttpRequest对象
                xmlhttp=new XMLHttpRequest();
               if(xmlhttp.overrideMimeType){
                   xmlhttp.overrideMimeType("text/xml");
                   
               }else if(window.ActiveXObject){
                   //IE6,IE5.5,IE5
                   //alert("IE6,IE5");
                   var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];
                   for(var i=0;i<activexName.length;i++){
                       try {
                           xmlhttp=new ActiveXObject(activexName[i]);
                           break;
                       } catch (e) {
    
                        }

                       
                   }
                   
               }
               if(xmlhttp===undefined||xmlhttp===null){
                   alert("当前浏览器不支持创建XMLHttpRequest对象");
               }
               //alert(xmlhttp);
              </span>

2.注册回调函数：

<span style="font-size:18px;"> //2.注册回调方法
               xmlhttp.onreadystatechange=callback;
               
               //记忆一个固定的用法，获取文本框中用户输入的内容
               var userName=document.getElementById("UserName").value;
               userName=encodeURI(encodeURI(userName));
               //get 方式 ：
               //url="http://192.168.24.103:8080/WebApplication1/AJAX?name="+userName;
               //
               //
               //Post 方式
               url="http://192.168.24.103:8080/WebApplication1/AJAX";
               if(url.indexOf("http://")===0){
                   
                   url=url.replace("?","&");
                   //一个里面不能有两个？要把？换成&符号                   
                   url="Proxy?url="+url;
               }</span>

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

<span style="font-size:18px;">  //* GET方式交互
               //3.设置和服务器交互的相应的参数
               xmlhttp.open("GET",url,true);
               
               //4.设置和服务器交互的数据，启动和服务器端的交互
               xmlhttp.send(null);
               */
              
  //POST 方式交互
               //3.设置和服务器交互的相应的参数    
               //POST 方式 
               xmlhttp.open("POST",true);
               //POST方式交互所需要增加的代码
               xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
               
               //4.设置和服务器交互的数据，启动和服务器端的交互
               xmlhttp.send("name="+userName);
               </span>

<span style="font-size:18px;"> function callback(){
            //5.判断和服务器端的交互是否完成，还要判断服务器端是否争取返回了数据
            if(xmlhttp.readyState===4){
                //表示和服务器端的交互已经完成
                if(xmlhttp.status===200){
                    //表示服务器的响应代码是200，正确的返回来数据
                   //纯文本数据的接受方法
                    var message=xmlhttp.responseText;
                    //XML数据对应的DOM对象接受方法
                    //使用的前提是，服务器端需要设置content-type为text/xml
                    //var domXml=xmlhttp.responseXML;
                    
                    //记忆向div标签中填充文本内容的方法
                    var div=document.getElementById("message");
                    div.innerHTML=message;
                    
                }
            }</span>

1.不同浏览器中XMLHttpRequest对象建立的方式不同
2.设置回调函数时，不要在函数名后面添加括号。加括号表示将回调函数的返回值注册给onreadystatechange属性。
3.open方法最多可以有五个参数，其中头三个参数时必须的。使用GET方式时，请求数据位于URL连接中，后面的send方法的参数直接写null就可以。使用POST方式时，open方法后面需要先调用setRequestHeader方法，来设置ContentType的值，然后调用send方法，send的参数就是请求的数据。

4.回调函数中，最好将readyState和status的两个if条件分开来写，readyState的判断条件位于外层，status的位于内层。假如他们被放到了同一个if条件中，判断数据正常返回也是没有问题的，但是不便于分别处理辅乳期不是200响应的情况和readyState不是4的情况。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!