跨浏览器之封装ajax

ajax是异步的javascript和XML，主要用于前端后端的数据传送。

要封装一个ajax，使之能相应的平稳退化，第一步就是创建一个XHR（XMLHttpRequest）对象。

以下代码是在各种浏览器下创建xhr对象：

 1 //创建xhr对象，兼容各种浏览器
 2 function createXHR(){
 3     if(typeof XMLHttpRequest!="undefined"){                                  //IE7以上
 4         return new XMLHttpRequest();
 5     }
 6     else if(typeof ActiveXObject!="underfined"){                            //IE7以下
 7         var version = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
 8             i, len;
 9         for(i=0,len=version.length;i<len;i++){    
10             try{
11                     new ActiveXObject(version[i]);
12                     arguments.callee.activeXString = version[i];
13                 }catch(e){
14                     //跳过
15                 }
16         }
17         return new ActiveXObject(arguments.callee.activeXString);
18     }
19     else{
20         throw new Error("您的浏览器不支持ajax！");
21     }
22 }

这段代码主要是处理在IE中多种版本的xhr对象怎么实现平稳退化，使之创建的xhr对象能兼容各种版本的IE。

然后开始封装ajax，首先ajax中的open方法里面有要用到一个get或者post的请求方式，然后又用到相应的url，最后是同步异步，那我们完全可以将这些放在一个对象中，将这个对象作为ajax的参数传入。

因为传入的是一个对象，里面需要进行传送的数据，也就可以是包含的另外一个对象，那我们就应该将这个数据对象进行转化为能为我们所用的类型：

1 //序列化对象为字符串数组
2 function serialize(data){                    
3     var result = [];
4     for(var i in data){
5         result.push(encodeURIComponent(i)+"="+encodeURIComponent(data[i]));
6     }
7     return result.join("&");
8 }

此时如果对serialize传入一个数据对象，类似：

1 {
2         "name" : "lee",
3         "age" : "100"
4     }

输出就会是一个长度为2的数组，以&符号进行分隔：

name=lee&age=100

最后将ajax函数写出来：

 1 function ajax(obj){    
 2 
 3     var xhr = createXHR();                                                //创建xhr对象
 4     obj.data = serialize(obj.data);                                    
 5     obj.url+="?ranNum="+Math.random();                                    //解决缓存问题                    
 6     obj.url += (obj.url.indexOf("?") == -1 ? "?" : "&");
 7     
 8     xhr.onreadystatechange=function(){
 9         callback(xhr);
10     }
11     if(obj.method == "get"){                
12         obj.url += obj.data;
13         alert(obj.url);
14         xhr.open(obj.method,obj.url,obj.async);
15         xhr.send(null);
16     }
17     if(obj.method == "post"){
18         alert(obj.url);
19         xhr.open(obj.method,obj.url,obj.async);
20         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
21         xhr.send(obj.data);
22     }
23 }

代码中将get请求和post请求两种方式分开进行了处理。

callback（）方法呢，就是进行响应结束之后的一个判断是否成功，以及响应的处理：

 1 function callback(xhr){
 2     if(xhr.readyState == 4){
 3         if(xhr.status>=200&&xhr.status<=300||xhr.status==304){
 4             alert(xhr.responseText);
 5         }
 6         else{
 7             alert("响应失败"+ xhr.status + xhr.statusText);
 8         }
 9     }
10 }

最后只需要在callback内把alert方法改为返回相应的数据值就可以了。

需要用到时就只需要将传入一个对象运用：

1 ajax({
2     "method" : "get",
3     "url" : "demo.php",
4     "async" : "true",
5     "data" : {
6         "name" : "lee",
7         "age" : "100"
8     }
9 });

最后附上get和post请求的代码，以供参考：

 1 //get方式请求
 2 /*     var xhr = createXHR();
 3     xhr.open("get","demo.php",true);//准备请求
 4     xhr.send(null);//发送请求
 5     xhr.onreadystatechange=function(){//当XHR对象的readyState改变时发生
 6         if(xhr.readyState==4){//响应完成时
 7         if(xhr.status>=200&&xhr.status<=300||xhr.status==304){//响应成功条件
 8             alert(xhr.responseText);
 9         }
10         else{
11             alert("响应失败"+xhr.status+xhr.statusText);
12         }
13     }
14     } */
15     
16 //post方式请求
17 /* var xhr = createXHR();
18     xhr.open("post","demo.php",true);
19     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//不同于get之处
20     xhr.send("name=lee&age=100");//要将相应的数据send出去
21     xhr.onreadystatechange = function(){
22         if(xhr.readyState==4){
23             if(xhr.status>=200&&xhr.status<=300||xhr.status==304){
24                 alert(xhr.responseText);
25             }
26             else{
27                 alert("响应失败"+xhr.status+xhr.statusText);
28             }
29         }
30     } */

 

转载于:https://www.cnblogs.com/178-533/p/7472544.html