封装Ajax框架！（代码篇）

写在前面的话，如果中间有什么不明白的，请先看封装ajax框架！（前言篇）

1、添写一个封闭函数

（function(){}）();

在一个项目中，可能会引用多个js框架，如果函数名相同，会有命名冲突，所以这里使用封闭函数。

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

但$是局部变量，外面不能直接使用，所以需要添加window.$ = $；

表示为全局对象window添加一个"$"的属性，这个属性的值是当前局部变量$的值。

所以在外部，如果想获取某个dom元素，可以直接：$("content")；

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

因为之前，我们将一个函数赋值给了$，函数也是对象，所以$也就是一个对象

4、封装ajax的get请求

为对象$添加一个get方法，参数有三个

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

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

　　callback：当ajax得到正确的数据后，所执行的回调函数，也就是参数callback接收的参数应该是一个函数。

5、封装ajax的post请求

为对象$添加一个post方法，参数有三个

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

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

　　callback：当ajax得到正确的数据后，所执行的回调函数，也就是参数callback接收的参数应该是一个函数。

当调用ajax请求时，可以使用这种形式

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

那么对应的方法中callback参数就指向了这个处理函数，所以callback(xhr.responseText)；相当于处理函数(xhr.responseText)

6、添加返回值类型

我们在ajax程序中，可以使用三种数据形式：

a、字符串

b、xml

c、json

需要完善ajax框架 ，可以返回不同类型的数据，再进行不同的处理。首先，为get和post方法添加第四个参数：type，表示期望得到的返回值类型

再根据type值的不同，返回对应的数据

调用形式

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

封装完整的ajax框架代码

 (function(){
     //用于得到一个dom对象
     var $ = function(id){
         return document.getElementById(id);
     };
     //用于得到一个ajax对象
     $.init = function(){
         try{return new ActiveXObject();}catch(e){}
         try{
             return new XMLHttpRequest();
         }catch(e){
             alert("请更换浏览器！");
         }
     };
     //用于发送ajax的get请求调用方法为$.get("demo.php","username=zhangsan&&age=20",function(result){},'json')
     $.get = function(url,data,callback,type){
         var xhr = $.init();
         //首先判断下传递的data参数是否为null，如果不为空直接拼接到url后传递给服务器
         if(data !=null){
             url = url+"?"+data;
         }
         xhr.open("get",url);
         //解决缓存问题
         xhr.setRequestHeader("If-Modified-since","0");
         xhr.onreadystatechange = function(){
             if(xhr.readyState == 4 && xhr.status == 200){
                 //如果没有传递type参数，让其默认为text
                 if(type == null){
                     type ='text';
                 }
                 if(type == 'text'){
                     callback(xhr.responseText);
                 }
                 if(type == 'xml'){
                     callback(xhr.responseXML);
                 }
                 if(type == 'json'){
                     callback(eval("("+xhr.responseText+")"));
                 }
             }
         };
         xhr.send(null);
     };
     //用于发送ajax的post请求,调用方法为$.post("demo.php","username=zhangsan&&age=20",function(result){},'json')
     $.post = function(url,data,callback,type){
         var xhr = $.init();
         xhr.open("post",url);
         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
         xhr.onreadystatechange = function(){
             if(xhr.readyState == 4 && xhr.status == 200){
                 //如果没有传递type参数，让其默认为text
                 if(type == null){
                     type ='text';
                 }
                 if(type == 'text'){
                     callback(xhr.responseText);
                 }
                 if(type == 'xml'){
                     callback(xhr.responseXML);
                 }
                 if(type == 'json'){
                     callback(eval("("+xhr.responseText+")"));
                 }
             }
         };
         xhr.send(data);
     };
     window.$ = $;
 })();

封装自己的ajax框架