• AJAX之 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
     
    print?在CODE上查看代码片派生到我的代码片
    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.    }  
     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;
    }



        第二步：注册回调方法


    [javascript] view plain copy
     
    print?在CODE上查看代码片派生到我的代码片
    1. <span style="font-size:18px;">xmlhttp.onreadystatechange=callback;  
    2. </span>  
    xmlhttp.onreadystatechange=callback;

     

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

    [javascript] view plain copy
     
    print?在CODE上查看代码片派生到我的代码片
    1. <span style="font-size:18px;"> xmlhttp.open("GET","ajax?name=" +userName,true);  
    2. </span>  
     xmlhttp.open("GET","ajax?name=" +userName,true);

     

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

    [javascript] view plain copy
     
    print?在CODE上查看代码片派生到我的代码片
    1. <span style="font-size:18px;">  xmlhttp.send(null);</span>  
      xmlhttp.send(null);

     

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


    [javascript] view plain copy
     
    print?在CODE上查看代码片派生到我的代码片
    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>  
    //根基实际条件写callback的功能代码
function callback(){
	 if（xmlhttp.readState==4）{
		 //表示服务器的相应代码是200；正确返回了数据 
		if(xmlhttp.status==200){ 
			//纯文本数据的接受方法 
			var message=xmlhttp.responseText; 
			//使用的前提是，服务器端需要设置content-type为text/xml 
			//var domXml=xmlhttp.responseXML; 
			//其它代码
		 } 
	}
 }


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

     

    [javascript] view plain copy
     
    print?在CODE上查看代码片派生到我的代码片
    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对象
var MyXMLHttpRequest=function(){
    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;
    }
    
    //用户发送请求的方法
    MyXMLHttpRequest.prototype.send=function(method,url,data,callback,failback){
        if(this.xmlhttp!=undefined && this.xmlhttp!=null){
            method=method.toUpperCase();
            if(method!="GET" && method!="POST"){
                alert("HTTP的请求方法必须为GET或POST!!!");
                return;
            }
            if(url==null || url==undefined){
                alert("HTTP的请求地址必须设置！");
                return ;
            }
            var tempxmlhttp=this.xmlhttp;
            this.xmlhttp.onreadystatechange=function(){
                if(tempxmlhttp.readyState==4){
                    if(temxmlhttp.status==200){
                        var responseText=temxmlhttp.responseText;
                        var responseXML=temxmlhttp.reponseXML;
                        if(callback==undefined || callback==null){
                            alert("没有设置处理数据正确返回的方法");
                            alert("返回的数据：" + responseText);
                        }else{
                            callback(responseText,responseXML);
                        }
                    }else{
                        if(failback==undefined ||failback==null){
                            alert("没有设置处理数据返回失败的处理方法！");
                            alert("HTTP的响应码：" + tempxmlhttp.status + ",响应码的文本信息：" + tempxmlhttp.statusText);
                        }else{
                            failback(tempxmlhttp.status,tempxmlhttp.statusText);
                        }
                    }
                }
            }
            
            //解决缓存的转换
            if(url.indexOf("?")>=0){
                url=url + "&t=" + (new Date()).valueOf();
            }else{
                url=url+"?+="+(new Date()).valueOf();
            }
            
            //解决跨域的问题
            if(url.indexOf("http://")>=0){
                url.replace("?","&");
                url="Proxy?url=" +url;
            }
            this.xmlhttp.open(method,url,true);
            
            //如果是POST方式，需要设置请求头
            if(method=="POST"){
                this.xmlhttp.setRequestHeader("Content-type","application/x-www-four-urlencoded");
            }
            this.xmlhttp.send(data);
    }else{
        alert("XMLHttpRequest对象创建失败，无法发送数据！");
    }
    MyXMLHttpRequest.prototype.abort=function(){
        this.xmlhttp.abort();
    }
  }
}



    转自http://blog.csdn.net/liujiahan629629/article/details/17126727
  • 相关阅读:
    Redis-内存优化(一)
    window激活
    ArrayDeque原理详解
    CountDownLatch原理详解
    DelayQueue延迟队列原理剖析
    浅析PriorityBlockingQueue优先级队列原理
    修改QT库的路径
    数据同步Datax与Datax_web的部署以及使用说明
    HTTP头的Expires与Cache-control
    python生成随机数、随机字符串
  • 原文地址：https://www.cnblogs.com/liulijun330/p/6262734.html
Copyright © 2020-2023  润新知