简单了解AJAX，AJAX封装与应用

来源：互联网发布：淘宝网商家客服编辑：程序博客网时间：2024/05/02 00:34

简单了解AJAX，AJAX封装与应用

1.什么是AJAX?

AJAX，是对Asynchronous JavaScript + XML的简写，AJAX可以向服务器请求额外的数据而无需卸载页面，从而带来更好的用户体验。

2.Ajax技术的核心是：XMLHttpRequest(简称XHR)

XHR为向服务器发送请求和解析服务器响应提供了流畅的接口，能够以异步的方式从服务器取得更多的信息，即可以不必刷新页面也能取得数据。

可以使用XHR对象取得新数据，然后通过DOM将新数据插入到页面中。

创建各浏览器兼容的XMLHttpRequest对象

    function createXHR(){        if(typeof XMLHttpRequest != "undefined" ){            return new XMLHttpRequest();        }        else if(typeof ActiveXObject != "undefined"){            if (typeof arguments.callee.activeXString != "string"){                var versions =["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;                for( i=0; i<versions.lenght; i++){                    try{                        new ActiveXObject(versions[i]);                    arguments.callee.activeXString=versions[i];                        break;                    }catch(e){                        //跳过                    }                }            }            return new ActiveXObject(arguments.callee.activeXString);        }        else{            throw new Error("No XHR object avablied！");        }    }

3.了解XHR对象：readyState属性

含义：这个属性表示请求/响应过程的当前活动阶段。
可取值：
0 ，未初始化，没有调用open()方法。
1 ，启动，调用了open()方法，但还未调用send()方法。
2 ，发送，调用了send()方法,但未接受到响应。
3 ，接收，接收到部分响应数据。
4 ，完成，已经接收到全部的数据，而且已经可以在客户端使用了。
服务器接收响应之后，有关请求的数据属性：

responseText ，作为响应主题本返回的文本。reponseXML ,如果响应的内容类型是“text/html”或“application/xml”，这个属性将保存包含着响应数据的XML DOM文档。status ，响应的HTTP状态。statusText ，HTTP状态的书名。

4.同步/异步事件的使用：

    //使用异步事件    var xhr = createXHR(); //创建XHR对象    xhr.open("get","c.txt",false); //准备发送请求 Ps：将false改成true就是同步事件    xhr.send(null); //发送请求    alert(xhr.status);  //结果：200    alert(xhr.statusText); //结果：OK    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){        alert(xhr.responseText);  //结果：hello,this is Cynthia (是文件c.txt里面的内容)    }    else{        alert("Request is failed : "+xhr.status);    }      xhr.abort(); //取消异步事件

5.使用Ajax

ajax.js文件代码：

    function ajax(url,fnSucc,fnFail){        //1.创建AJAX        if(window.XMLHttpRequest){            var oAjax=new XMLHttpRequest();        }else{            var oAjax=new ActiveXObject("Microsoft.XMLHTTP");        }        //2. 连接服务器        oAjax.open('GET',url,true);         //3.发送请求        oAjax.send();        //4.接受返回        oAjax.onreadystatechange=function(){            if(oAjax.readyState == 4){                 if(oAjax.status == 200) {                fnSucc(oAjax.responseText);                }else{                    if(fnFail){                        fnFail(oAjax.status);                     }                }            }        };    }

（1）请求并显示静态.txt文件
a.txt文本文件内容：
这里写图片描述

 <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>ajax example</title>        <script type="text/javascript" src="./ajax.js"></script>    </head>    <script type="text/javascript">        window.onload = function(){            var oBtn = document.getElementById('btn1');            oBtn.onclick = function(){                ajax('a.txt?t='+new Date().getTime(),function(str){    alert(str);       },function(s){    alert("失败："+s);       });            };        };     </script>    <body>        <input id="btn1" type="button" value="读取">     </body>    </html>

（2）请求JS或Json文件（动态数据）
b.txt文本文件内容：
这里写图片描述

    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>read user name</title>        <script type="text/javascript" src="./ajax.js"></script>    </head>    <script type="text/javascript">        window.onload = function(){            var oBtn = document.getElementById('btn2');            var oUl = document.getElementById('ul1');            oBtn.onclick = function(){                ajax('./b.txt?t='+new Date().getTime(),function(str){                    var arr = eval(str);                    for(var i=0; i<arr.length; i++){                        var oLi = document.createElement('li');                        oLi.innerHTML='user：'+arr[i].user+' password: '+arr[i].password;                        oUl.appendChild(oLi);                    }                },function(s){                    alert(s+"失败！");                });            };        };     </script>    <body>        <input id="btn2" type="button" value="读取">        <ul id="ul1"></ul>    </body>    </html>

6.操作HTTP头部信息

每个http请求和响应都有响应的头部信息。
（1）响应头信息：服务器返回的信息，客户端可以获取，但是不可以修改。
（2）请求头信息：客户端发送的信息，客户端可以设置，但是不可以修改。
例如执行异步事件时，控制台HTTP头部的信息如下：

这里写图片描述
默认情况下，在发送XHR请求时，头信息一般有：

Accept ，浏览器能够处理的内容类型。Accept-Charset ，浏览器能够显示的字符集。Accept-Encoding ，浏览器能够处理的压缩编码。Accept-Language ，浏览器当前设置的语言。Connection ，当前页面设置的任何Cookie。Host ，发出请求的页面所在的域。Referer ，发出请求的页面的url。User-Agent ，浏览器的用户代理字符串。

获取/设置HTTP头部信息：

var xhr = createXHR();//创建XHR对象    xhr.onreadystatechange=function (){        if(xhr.readyState==4){            if(xhr.status==200){                alert(xhr.getResponseHeader('Content-Type')); //获取单个http头部信息,j结果：text/plain                alert(xhr.getAllResponseHeaders()); //获取http的全部头部信息 ,结果：下图            }            else{                alert("Sorry,获取信息失败，错误代码为： "+xhr.status+"， 错误信息： "+xhr.statusText);            }        }    };    xhr.open('get',"c.txt",false);    xhr.setRequestHeader('MyHeader','Cynthia'); //设置http头部信息    xhr.send(null);

获取http的全部头部信息:
这里写图片描述

设置后的显示：
这里写图片描述

7.GET请求

最常用于向服务器查询某些信息，必要时。可以将查询字符串参数追加到URL的末尾，以便将信息发送给服务器。

注意的是，GET请求返回的数据格式是UTF-8的，要注意编码问题。
c.txt文本文件内容：
这里写图片描述

    //GET请求    var xhr = createXHR();    var url = "c.txt?rand="+Math.random()+'&name=Cynthia&age=21';    url = addURLParam(url,"name","Cynthia");    url = addURLParam(url,"age",21);    xhr.onreadystatechange=function (){        if(xhr.readyState==4){            if(xhr.status==200){                alert(xhr.responseText);            }            else{                alert("Sorry,获取信息失败，错误代码为： "+xhr.status+"， 错误信息： "+xhr.statusText);            }        }    };    xhr.open('get',url,true);    xhr.send(null);    function addURLParam(url,name,value){  //解决编码问题        url += (url.indexOf("?") == -1 ? "?" : "&");        url += encodeURIComponent(name) + "=" + encodeURIComponent(value);        return url;    }

8.POST请求

通常用于向服务器发送应该被保存的数据。

    //POST请求    var xhr = createXHR();    var url = "c.txt?rand="+Math.random();    xhr.onreadystatechange=function (){        if(xhr.readyState==4){             if(xhr.status==200){                 alert(xhr.responseText);             }             else{                 alert("Sorry,获取信息失败，错误代码为： "+xhr.status+"， 错误信息： "+xhr.statusText);              }        }    };    xhr.open('post',url,true);    xhr.setRequestHeader("Content-Type","application/x-wwww-form-urlencoded");    xhr.send('name=Cynthia&age=21');

9.GET请求和POST请求的区别：

（1）在Web程序上，GET请求一般是URL提交请求，POST请求一般是Web表单提交。
（2）与GET相比，POST请求消耗的资源更多。

10.综合应用：封装并调用AJAX

 //创建各浏览器兼容的XMLHttpRequest对象    function createXHR(){        if(typeof XMLHttpRequest != "undefined" ){            return new XMLHttpRequest();        }        else if(typeof ActiveXObject != "undefined"){            if (typeof arguments.callee.activeXString != "string"){                var versions = [    "MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp" ],len;                for( var i=0; versions.length; i++){                    try{                        new ActiveXObject(versions[i]);                arguments.callee.activeXString=versions[i];                        break;                    }catch(e){                        //跳过                    }                }            }            return new ActiveXObject(arguments.callee.activeXString);        }        else{            throw new Error("No XHR object avablied！");        }    }    //解决乱码问题    function paramas(data){        var arr = [];        for(var i in arr){            arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));        }        return arr.join('&');    }    //封装ajax    function ajax(obj){        var xhr = createXHR();        obj.url = obj.url + '?rand' + Math.random();        obj.data = paramas(obj.data);        if(obj.method === 'get'){            obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data;        }        if(obj.async === true){            xhr.onreadystatechange = function(){                if (xhr.readyState == 4) {                    callBack();                }            }        }        xhr.open(obj.method, obj.url,obj.async);        if (obj.method === 'post') {            xhr.setRequestHeader("Content-Type","application/x-wwww-form-urlencoded");            xhr.send(obj.data);        }else{            xhr.send(null);        }        if(obj.async === false){            callBack();        }        function callBack(){            if (xhr.status == 200) {                obj.success(xhr.responseText);            }else{                alert("Sorry,获取信息失败，错误代码为： "+xhr.status+"， 错误信息： "+xhr.statusText);            }        }    }    //调用ajax    ajax({        method:'get', //可任意更改为get或post        url:'c.txt',        data:{            'name':'Cynthia',            'age':21        },        success:function(text){            alert(text);        },        async:false  //可任意更改为true（同步）或false（异步）    });

备注：本文的所有代码都是在wamp本地服务程序上运行的。

wamp下载地址：链接：http://pan.baidu.com/s/1cIjmzW 密码：d44z

将wamp安装好之后，将本文的所有代码放在www这个文件夹下，在浏览器地址栏输入：localhost即可看见所有的文件。

本文所有用到的html文件及js文件，下载地址为：
https://github.com/Xganying/Ajax

参考：本文部分参考《JavaScript高级程序设计》第三版

0 0