码迷,mamicode.com
首页 > Web开发 > 详细

AJAX核心XMLHTTPRequest对象

时间:2015-07-14 08:43:59      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:xmlhttprequest   ajax   

   老早就写好了总结,今天整理发表一下。

   XMLHttpRequest对象是AJAX的核心技术,XMLHttpRequest 是XMLHTTP 组件的对象,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将数据处理的工作都交给服务器来做;这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。


XMLHttpRequest对象是开发者的梦想,因为能够:

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

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

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

在后台向服务器发送数据


XMLHttpRequest对象的方法和属性就不再这里进行简绍了,因为大家都可以再网上查到。

这里简绍一下他的使用。

他的使用有五步:

①建立XMLHttpRequest对象

②注册回调函数

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

④设置发送的数据,开始和服务器端进行交互

⑤在回调函数中判断交互式否结束,相应是否正确,并根据需要获取服务器返回的数据,更新页面内容。

下面我把自己做的视频例子的JS封装代码整理的一下。给大家看一下:

<span style="font-family:KaiTi_GB2312;font-size:18px;">//使用封装方法的人只关心提供http的请求方法,数据,成功,和失败的回调方法
//类的构造定义,主要职责就是新建出XMLHttpRequest对象
var MyXMLHttpRequest=function(){
    //1、创建XMLHTTPRequest对象
    var xmlhttprequest;
    //不同浏览器的封装
    if(window.XMLHttpReuqest){
        //IE7,IE8,firefox,MOailla,Safari,Opera等浏览器创建
        xmlhttprequest=new XMLHttpReuqest();
        //些版本的Mozilla 浏览器处理服务器返回的未包含XML mime-type 
        //头部信息的内容时会出错。因此,要确保返回的内容包含text/xml 信息。 
        if (xmlhttprequest.overrideMineType){
            xmlhttprequest.overrideMineType("text/xml");
        }
    }else if(window.ActiveXObject){
        //IE6, IE6.6,IE5
        var activeName=["MSML2.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;
        //2、注册回调方法(这是当服务器返回信息是客户端的处理方式)
        this.xmlhttp.onreadystatechange=function(){
            //5、判断和服务器端的交互式否完成,还要判断服务器端是否正确返回了数据
            //readyState 值为4 的时候,代表服务器已经传回所有的信息,
            //可以开始处理信息并更新页面内容了
            if(tempxmlhttp.readyState===4){
                //表示和服务器端的交互已经完成
                //XMLHttpRequest 对成功返回的信息有两种处理方式:
                //responseText:将传回的信息当字符串使用;
                //responseXML:将传回的信息当XML 文档使用,可以用DOM 处理。
                if(tempxmlhttp.status===200){
                    //表示服务器的相应代码是200,正确的返回了数据
                    //纯文本数据的接受方法
                var responseText=tempxmlhttp.responseText;
                     //XML数据对应的DOM对象的接受方法
                     //使用的前提是,服务器端需要设置content-type为text/xml
                    var responseXML=tempxmlhttp.responseXML;
                    //这是对页面端JS的处理
                    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+"?t="+(new Date()).valueOf();
        }
        
        //解决跨域的问题
        if (url.indexOf("http://")>=0){
            url.replace("?","&");
            url="Proxy?url="+url;
        }
        //3、设置和服务器端进行交互的参数(向服务器发出请求)
        this.xmlhttp.open(method,url,true);
        
        //send 的参数如果是以Post 方式发出的话,可以是任何想传给服务器的内容。
        //不过,跟form 一样,如果要传文件或者Post 内容给服务器,
        //必须先调用setRequestHeader 方法,修改MIME 类别。
        if (method ==="POST"){
            this.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        }
        //4、设置项服务器端发送的数据,启动和服务器的交互
        this.xmlhttp.send(data);
    }else{
        alert("XMLHttpRequest对象创建失败,无法发送数据!");
    }
};

MyXMLHttpRequest.prototype.abort=function(){
    this.xmlhttp.abort();
};</span>


注意:

1、注册回调方法的方式有两种:①一种是JS文件中的写法。既是Javascript既是定义函数的方式定义相应函数。

xmlhttp.onreadystatechange=function(){}

xmlhttp.onreadystatechange=callback;需要指出的时,这个函数名称不加括号,不指定参数。

2、向服务器发出请求的时候的

XMLHttpRequest 可以同步或异步地返回Web 服务器的响应,并且能够以文本或者一个 DOM 文档的形式返回内容。

对于open方法的详解:默认为true的时候表示异步



对于这个对象的扩展问题:

①增加时间戳的效果,解决浏览器的缓存问题。

技术分享

技术分享

下面这个事效果图:红框里的就是时间戳

这样可以防止网址一样来访问缓存的问题HttRequest请求的缓存问题。

时间戳解决别的问题:如用户发帖的页面中,恶意程序来反复提交的问题

②解决跨域访问问题。

跨域:当前网页访问的服务器的域名和端口不同了,就称为跨域访问。

技术分享

③解决中英文乱码问题:

技术分享

 对于这个原理我看的是是懂非懂的,


总之:XMLHTTPRequest对象用来在后台与服务器进行交换数据。




版权声明:本文为博主原创文章,未经博主允许不得转载。

AJAX核心XMLHTTPRequest对象

标签:xmlhttprequest   ajax   

原文地址:http://blog.csdn.net/u010924878/article/details/46867817

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!