Ajax原理与封装

                                                    Ajax大家每天都在用，jquery库对Ajax的封装也很完善、很好用，下面我们看一下他的内部原理，并手动封装一个自己的Ajax库。

更多有关ajax封装及数据处理，请参看上海尚学堂《Ajax中replace+Jq封装的ajax》、《ajax+json数据处理》

一、原理

原生Ajax的发送需要四步：
1) 创建Ajax对象: XMLHttpRequest
2) 设置请求参数: open(请求参数[get/post],url地址, 是否异步[true/false] )
3) 设置回调函数: onreadystateChange 用于处理返回的数据
4) 发送请求: send()

[java] view plain copy

print?

1. //TODO step1: 创建ajax对象  
2. var xhr = new XMLHttpRequest();  
3. //TODO step2: 设置请求参数  
4. xhr.open('get','01.php',true);  
5. //TODO step3: 设置回调  
6. xhr.onreadystatechange = function () {  
7.     //接收返回数据  
8.     console.log(xhr.responseText);//responseText 用于接收后台响应的文本  
9. }  
10. //TODO step4: 发送请求  
11. xhr.send();  

二、封装

封装的核心思想就是把需要动态变化的部分当成参数，不变的部分就留在那里，在上面的代码中请求方式（get、post）、请求地址url、请求参数data、成功的回调success、失败回调error等，这些参数都是动态变化的；而创建Ajax对象 XMLHttprequest、事件监听onreadystatechange等是固定的，所以第一步我们要确定好封装的参数：

• url  请求地址

• data 请求数据
  

• type 请求类型
  

• success 成功回调
  

• error 失败回调
  

• beforeSend 发送前调用 return false 阻止发送
  

• complete ajax请求成功的回调, 无论什么时候都会执行
  

[java] view plain copy

print?

1. function ajax(option){  
2.     //用户配置option 默认配置init  
3.     var init = {  
4.         type:'get',  
5.         async:true,  
6.         url:'',  
7.         success: function () { },  
8.         error: function () { },  
9.         data:{},  
10.         beforeSend: function () {  
11.             console.log('发送前...');  
12.             return false;  
13.         }  
14.     };  
15.     //TODO step1: 合并参数  
16.     for(k in option){  
17.         init[k] = option[k];  
18.     }  
19.     //TODO step2: 参数转换  
20.     var params = '';  
21.     for(k in init.data){  
22.         params += '&'+k+'='+init.data[k];  
23.     }  
24.     var xhr = new XMLHttpRequest();  
25.     // type url  
26.     //TODO step3: 区分get和post,进行传参  
27.     var url = init.url+'?__='+new Date().getTime();  
28.     //TODO step4: 发送前  
29.     var flag = init.beforeSend();  
30.     if(!flag){  
31.         return;  
32.     }  
33.     if(init.type.toLowerCase() == 'get'){  
34.         url += params;  
35.         xhr.open(init.type,url,init.async);  
36.         xhr.send();  
37.     }else{  
38.         xhr.open(init.type,url,init.async);  
39.       xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');  
40.         xhr.send(params.substr(1));  
41.     }  
42.     xhr.onreadystatechange = function () {  
43.         if(xhr.readyState == 4){  
44.             if(xhr.status == 200){  
45.                 init.success(xhr.responseText);  
46.             }else{  
47.                 //error  
48.                 init.error();  
49.             }  
50.         }  
51.     }  
52. }  

这里我们要注意的是get和post的传参方式位置不一样，get请求需要直接拼接在url地址后边，post请求需要在send方法里面传参，而且需要这是请求头setRequestHeader('content-type','application/x-www-

form-urlencoded')，所以封装时要进行区分。

由于参数过多，用户不需要每次都传入很多参数，否则用起来会非常繁琐。所以我们采取默认参数的形式，用户不传入就是用默认值，传入就是用用户的参数。

三、使用示例

[java] view plain copy

print?

1. ajax({  
2.     url: 'test.json',  
3.     data:{test:123,age:456},  
4.     //type:'post',  
5.     success: function (res) {  
6.         console.log(res);  
7.     }  
8. });