zoukankan      html  css  js  c++  java

  • AJAX——核心XMLHttpRequest对象

      AJAX大家已经都知道了，是为了实现异步通讯，提高用户体验度，而将很多旧知识（XML,DOM,JavaScript,HTML,Jquery,Css……）重新融合的一个新的知识框架。而，XMLHttpRequest对象则是其中的重重之中。这篇博客重点总结一下这个对象的使用。当然还是按照经典的五步法来学习，以后在实践中有更多更好的想法，会拿出来分享的！

     

               首先，需要先了解这个对象的属性和方法：

     

    属性

    说明

    readyState

    表示XMLHttpRequest对象的状态：0：未初始化。对象已创建，未调用open；

    1：open方法成功调用，但Sendf方法未调用；

    2：send方法已经调用，尚未开始接受数据；

    3：正在接受数据。Http响应头信息已经接受，但尚未接收完成；

    4：完成，即响应数据接受完成。

    Onreadystatechange

    请求状态改变的事件触发器（readyState变化时会调用这个属性上注册的javascript函数）。

    responseText

    服务器响应的文本内容

    responseXML

    服务器响应的XML内容对应的DOM对象

    Status

    服务器返回的http状态码。200表示“成功”，404表示“未找到”，500表示“服务器内部错误”等。

    statusText

    服务器返回状态的文本信息。

     

    方法

    说明

    Open(string method,string url,boolean asynch,

    String username,string password)

    指定和服务器端交互的HTTP方法，URL地址，即其他请求信息；

    Method:表示http请求方法，一般使用"GET","POST".

    url：表示请求的服务器的地址；

    asynch：表示是否采用异步方法，true为异步，false为同步；

    后边两个可以不指定，username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码。

    Send(content)

    向服务器发出请求，如果采用异步方式，该方法会立即返回。

    content可以指定为null表示不发送数据，其内容可以是DOM对象，输入流或字符串。

    SetRequestHeader(String header,String Value)

    设置HTTP请求中的指定头部header的值为value.

    此方法需在open方法以后调用，一般在post方式中使用。

    getAllResponseHeaders()

    返回包含Http的所有响应头信息，其中相应头包括Content-length,date,uri等内容。

    返回值是一个字符串，包含所有头信息，其中每个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔！

    getResponseHeader(String header)

    返回HTTP响应头中指定的键名header对应的值

    Abort()

    停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。

     

              对这个对象有了静态了了解，知道它长的什么样子，有什么功能了，下边该我们使用它了，当然这里我也用五步法写出代码来：

    第一步：创建XMLHttpRuquest对象：

    [javascript] view plain copy
     
    1. var xmlhttprequest;  
    2.    if(window.XMLHttpRequest){  
    3.        xmlhttprequest=new XMLHttpRequest();  
    4.        if(xmlhttprequest.overrideMimeType){  
    5.            xmlhttprequest.overrideMimeType("text/xml");  
    6.        }  
    7.    }else if(window.ActiveXObject){  
    8.        var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];  
    9.        for(var i=0;i<activeName.length;i++){  
    10.            try{  
    11.                xmlhttprequest=new ActiveXObject(activeName[i]);  
    12.                break;  
    13.            }catch(e){  
    14.                         
    15.            }  
    16.        }  
    17.    }  
    18.      
    19.    if(xmlhttprequest==undefined || xmlhttprequest==null){  
    20.        alert("XMLHttpRequest对象创建失败！！");  
    21.    }else{  
    22.        this.xmlhttp=xmlhttprequest;  
    23.    }  

    ps:

    AJAX overrideMimeType作用

     

    我们经常在AJAX代码中发现如下代码：
       if (http_request.overrideMimeType) {
        http_request.overrideMimeType("text/xml");}

    其作用是：针对某些特定版本的mozillar浏览器的BUG进行修正   

    具体来说：

    如果来自服务器的响应没有 XML mime-type 头部，则一些版本的 Mozilla 浏览器不能正常运行。

    对于这种情况，httpRequest.overrideMimeType('text/xml'); 语句将覆盖发送给服务器的头部，强制 text/xml 作为 mime-type。



        第二步：注册回调方法

    [javascript] view plain copy
     
    1. <span style="font-size:18px;">xmlhttp.onreadystatechange=callback;  
    2. </span>  

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

    [javascript] view plain copy
     
    1. <span style="font-size:18px;"> xmlhttp.open("GET","ajax?name=" +userName,true);  
    2. </span>  

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

    [javascript] view plain copy
     
    1. <span style="font-size:18px;">  xmlhttp.send(null);</span>  

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

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


             通过这五步XMLHttpRequest基本上就创建好，可以正常使用了，但是这是需要非常多的代码的，总不能每次创建都写这么多吧？当然不是了，我们学习了面向对象，我们将其必要相同的部分都抽象出来，使之成为一个独立类，别的直接调用即可，在网上看了一个，感觉写的挺好：

     

    [javascript] view plain copy
     
    1. //类的构建定义，主要职责就是新建XMLHttpRequest对象  
    2. var MyXMLHttpRequest=function(){  
    3.     var xmlhttprequest;  
    4.     if(window.XMLHttpRequest){  
    5.         xmlhttprequest=new XMLHttpRequest();  
    6.         if(xmlhttprequest.overrideMimeType){  
    7.             xmlhttprequest.overrideMimeType("text/xml");  
    8.         }  
    9.     }else if(window.ActiveXObject){  
    10.         var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];  
    11.         for(var i=0;i<activeName.length;i++){  
    12.             try{  
    13.                 xmlhttprequest=new ActiveXObject(activeName[i]);  
    14.                 break;  
    15.             }catch(e){  
    16.                          
    17.             }  
    18.         }  
    19.     }  
    20.       
    21.     if(xmlhttprequest == undefined || xmlhttprequest == null){  
    22.         alert("XMLHttpRequest对象创建失败！！");  
    23.     }else{  
    24.         this.xmlhttp=xmlhttprequest;  
    25.     }  
    26.       
    27.     //用户发送请求的方法  
    28.     MyXMLHttpRequest.prototype.send=function(method,url,data,callback,failback){  
    29.         if(this.xmlhttp!=undefined && this.xmlhttp!=null){  
    30.             method=method.toUpperCase();  
    31.             if(method!="GET" && method!="POST"){  
    32.                 alert("HTTP的请求方法必须为GET或POST!!!");  
    33.                 return;  
    34.             }  
    35.             if(url==null || url==undefined){  
    36.                 alert("HTTP的请求地址必须设置！");  
    37.                 return ;  
    38.             }  
    39.             var tempxmlhttp=this.xmlhttp;  
    40.             this.xmlhttp.onreadystatechange=function(){  
    41.                 if(tempxmlhttp.readyState==4){  
    42.                     if(temxmlhttp.status==200){  
    43.                         var responseText=temxmlhttp.responseText;  
    44.                         var responseXML=temxmlhttp.reponseXML;  
    45.                         if(callback==undefined || callback==null){  
    46.                             alert("没有设置处理数据正确返回的方法");  
    47.                             alert("返回的数据：" + responseText);  
    48.                         }else{  
    49.                             callback(responseText,responseXML);  
    50.                         }  
    51.                     }else{  
    52.                         if(failback==undefined ||failback==null){  
    53.                             alert("没有设置处理数据返回失败的处理方法！");  
    54.                             alert("HTTP的响应码：" + tempxmlhttp.status + ",响应码的文本信息：" + tempxmlhttp.statusText);  
    55.                         }else{  
    56.                             failback(tempxmlhttp.status,tempxmlhttp.statusText);  
    57.                         }  
    58.                     }  
    59.                 }  
    60.             }  
    61.               
    62.             //解决缓存的转换  
    63.             if(url.indexOf("?")>=0){  
    64.                 url=url + "&t=" + (new Date()).valueOf();  
    65.             }else{  
    66.                 url=url+"?+="+(new Date()).valueOf();  
    67.             }  
    68.               
    69.             //解决跨域的问题  
    70.             if(url.indexOf("http://")>=0){  
    71.                 url.replace("?","&");  
    72.                 url="Proxy?url=" +url;  
    73.             }  
    74.             this.xmlhttp.open(method,url,true);  
    75.               
    76.             //如果是POST方式，需要设置请求头  
    77.             if(method=="POST"){  
    78.                 this.xmlhttp.setRequestHeader("Content-type","application/x-www-four-urlencoded");  
    79.             }  
    80.             this.xmlhttp.send(data);  
    81.     }else{  
    82.         alert("XMLHttpRequest对象创建失败，无法发送数据！");  
    83.     }  
    84.     MyXMLHttpRequest.prototype.abort=function(){  
    85.         this.xmlhttp.abort();  
    86.     }  
    87.   }  
    88. }  


              当然这些都需要我们在实践中不断的摸索，使用，再总结属于自己的一套常用类，方法等。当然XMLHttpRequest还有“浏览器缓存问题”，“中文乱码问题”，“跨域访问问题”等等，因为都没有遇到过这些东西，所以这里先了解一下，以后遇到再认真研究！

     
  • 相关阅读:
    玲珑oj 1129 ST
    HDU 3397 线段树区间修改
    bzoj 1798 双标记区间修改线段树
    HDU 4417 BIT or ST
    HDU 2492 BIT/逆序数/排列组合
    uva 12086 线段树or树状数组练习
    cf 833 A 数论
    wcf的DataContractAttribute与DataMenmberAttribute
    wcf服务查看工具
    git学习-综合性文章
  • 原文地址：https://www.cnblogs.com/www123----/p/8662645.html
Copyright © 2011-2022 走看看