ajax核心技术1---XMLHttpRequset对象的使用

时间：2022-07-15 16:18:19

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。ajax是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。从今天开始nie，小编开始和小伙伴们一起学习ajax的相关知识，这篇博文，小编主要简单的和大家介绍介绍XMLHttpRequset对象的使用，首先我们来看一下这个对象的属性还有方法，首先，我们来看属性，如下表所示：

ajax核心技术1---XMLHttpRequset对象的使用

接着，我们来看方法，如下表所示：

ajax核心技术1---XMLHttpRequset对象的使用

XMLHttpRequest的缩写为XHR，中文名字叫做可扩展超文本传输请求，Xml可扩展标记语言，Http超文本传输协议，Request请求。XMLHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。当页面全部加载完毕后，客户端通过该对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。上面的两张图片对XHR有了一定的了解，接下来，就到了实战的时候了，我们这里用经典的五步法来介绍一下：

第一步、创建XHR对象，代码如下所示：

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>

通过这五步XMLHttpRequest基本上就创建好，可以正常使用了，如上面所示的，代码量有点多，导致每次创建的时候，我们都需要写如此多的代码，所以，我们可以将相同的部分抽象出来，使之成为一个独立的类，下面的是小编从网上搜索的一个，供小伙伴们参考一下`(*∩_∩*)′，不用客气！代码如下所示： 

//类的构建定义，主要职责就是新建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();
    }
  }
}

小编寄语：这篇博客，小编主要简单的介绍了一下XHR对象的一些方法和属性，还有经典的五步法，对于这些基础的知识，还需要小伙伴们在日常的学习中，多多动手实践，实习第二个月，精彩未完待续。

相关文章