JavaScript封装 ajax GET和POST请求

封装文件public.js完整代码：

(function(){
        //用于得到一个dom元素
        var $=function(id){
        				return document.getElementById(id);
        };
        //用于得到一个ajax对象
        $.init=function(){
                try{return new XMLHttpRequest()}catch(e){}
                try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){}
                alert('error');
        };
        //用于发送ajax的get请求
        $.get=function(url,data,callback,type){
                var xhr=$.init();
                if(data!=null){
                url=url+'?'+data;
        }
        xhr.onreadystatechange=function(){
                if(xhr.readyState==4 && xhr.status==200){
                        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.open('get',url);
        xhr.setRequestHeader("If-Modified-Since","0");
        xhr.send(null);
        };
        //用于发送ajax的post请求
        $.post=function(url,data,callback,type){
                var xhr=$.init();
                xhr.onreadystatechange=function(){
                        if(xhr.readyState==4 && xhr.status==200){
                                //如果没有传递type参数，让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.open('post',url);
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.send(data);
}
window.$=$;
})();

语言类似于jQuery

理解:

1、添写一个自调用匿名函数

(function (){
})();

在一个项目中，可能会引用多个js框架，如果函数名相同，会有命名冲突，定义匿名函数没有名称，就不会冲突，

但匿名函数不能执行，所以需要使用以上格式让其自动执行一次。

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

var $=function(id){
return document.getElementById(id);
};

但$是局部变量，外面不能直接使用，所以：

window.$=$;

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

所以在外部，如果想获取某个dom元素，可以直接：

$('content');

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

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

$.init=function(){
        try{return new XMLHttpRequest()}catch(e){}
        try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){}
        alert('error');
};

表示为对象$添加一个新的方法：init

当然, 也可以添加其它方法

4、封装ajax的get请求

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

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

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

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

$.get=function(url,data,callback,type){
        var xhr=$.init();
        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){
                      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);
};

5、封装post请求

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

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

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

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

$.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参数，让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);
}

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

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

那么对应的方法中callback参数就指向了这个处理函数，所以

callback(xhr.responseText);

相当于

处理函数(xhr.responseText);

6、添加返回值类型

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

1）字符串

2）xml

3）json

我们需要完善这个框架，可以返回不同类型的数据，再进行不同的处理。

首先，为get和post方法添加第四个参数：type，表示期望得到的返回值类型

$.post=function(url,data,callback,type){}

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

if(type==null){
      type='text';
}
if(type=='text'){
        callback(xhr.responseText);
}
if(type=='xml'){
        callback(xhr.responseXML);
}
if(type=='json'){
        callback(eval('('+xhr.responseText+')'));
}

调用形式

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