Ajax封装Ajax框架!(代码篇)

 写在前的话,假如中暴发啊不通晓的,请预看封装ajax框架!(前言篇)

1、添写一个封闭函数

(function(){})();

每当一个项目中,可能相会引用三个js框架,假设函数号称相同,会出命名争辨,所以这里以封闭函数。

2、封装一个函数,用于dom元素的获

不过$是片变量,外面不克直接利用,所以用续加window.$
= $;

表示也大局对象window添加一个”$”的习性,这个特性的值是眼下有变量$的价值。

于是当外表,倘使想得有dom元素,可以直接:$(“content”);

3、封装一个函数,用于创建ajax对象

坐事先,我们将一个函数赋值给了$,函数也是目的,所以$也虽然是一个目的

Ajax 1

4、封装ajax的get请求

也目标$添加一个get方法,参数有三单

  url:表示ajax请求的页面地址

  data:表示get请求时所要传递的参数

  callback:当ajax拿到正确的多寡后,所行之回调函数,也便是参数callback接收的参数应该是一个函数。

5、封装ajax的post请求

啊对象$添加一个post方法,参数有三单

  url:表示ajax请求的页面地址

  data:表示get请求时所要传递的参数

  callback:当ajax拿到正确的数目后,所行之回调函数,也不怕是参数callback接收的参数应该是一个函数。

Ajax 2

当调用ajax请求时,可以接纳这种格局

$.method(页面地址,传递参数,处理函数);

这相应之不二法门被callback参数就针对了之处理函数,所以callback(xhr.responseText);非常给处理函数(xhr.responseText)

6、添加再次回到值类型

俺们在ajax程序中,可以应用两种多少格局:

a、字符串

b、xml

c、json

欲完善ajax框架
,能够回去不同连串的多少,再开展不同的拍卖。首先,为get和post方法添加第四个参数:type,表示期待拿到的返值类型

Ajax 3

 再因type值的差,再次来到对应的数码

Ajax 4 

调用格局

$.method(请求地址,参数,处理函数,数据类型);

包装完整的ajax框架代码

 

Ajax 5Ajax 6

 1 (function(){
 2     //用于得到一个dom对象
 3     var $ = function(id){
 4         return document.getElementById(id);
 5     };
 6     //用于得到一个ajax对象
 7     $.init = function(){
 8         try{return new ActiveXObject();}catch(e){}
 9         try{
10             return new XMLHttpRequest();
11         }catch(e){
12             alert("请更换浏览器!");
13         }
14     };
15     //用于发送ajax的get请求调用方法为$.get("demo.php","username=zhangsan&&age=20",function(result){},'json')
16     $.get = function(url,data,callback,type){
17         var xhr = $.init();
18         //首先判断下传递的data参数是否为null,如果不为空直接拼接到url后传递给服务器
19         if(data !=null){
20             url = url+"?"+data;
21         }
22         xhr.open("get",url);
23         //解决缓存问题
24         xhr.setRequestHeader("If-Modified-since","0");
25         xhr.onreadystatechange = function(){
26             if(xhr.readyState == 4 && xhr.status == 200){
27                 //如果没有传递type参数,让其默认为text
28                 if(type == null){
29                     type ='text';
30                 }
31                 if(type == 'text'){
32                     callback(xhr.responseText);
33                 }
34                 if(type == 'xml'){
35                     callback(xhr.responseXML);
36                 }
37                 if(type == 'json'){
38                     callback(eval("("+xhr.responseText+")"));
39                 }
40             }
41         };
42         xhr.send(null);
43     };
44     //用于发送ajax的post请求,调用方法为$.post("demo.php","username=zhangsan&&age=20",function(result){},'json')
45     $.post = function(url,data,callback,type){
46         var xhr = $.init();
47         xhr.open("post",url);
48         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
49         xhr.onreadystatechange = function(){
50             if(xhr.readyState == 4 && xhr.status == 200){
51                 //如果没有传递type参数,让其默认为text
52                 if(type == null){
53                     type ='text';
54                 }
55                 if(type == 'text'){
56                     callback(xhr.responseText);
57                 }
58                 if(type == 'xml'){
59                     callback(xhr.responseXML);
60                 }
61                 if(type == 'json'){
62                     callback(eval("("+xhr.responseText+")"));
63                 }
64             }
65         };
66         xhr.send(data);
67     };
68     window.$ = $;
69 })();

卷入好的ajax框架

 

相关文章