模拟jQuery简单封装ajax

 1 /*模拟jQuery的写法 (简单写法)*/
 2 var $={};
 3 /*ajax*/
 4 $.ajax = function (options) {
 5     /*
 6     * 请求
 7     * 1.请求接口    type    get post 默认的是get 决定是否设置请求头
 8     * 2.接口地址    url     不确定 字符串 如果用户没有传  默认的接口地址为当前路径
 9     * 3.是否是异步  async    默认的就是异步 true;false 是同步请求
10     * 4.提交数据    data    默认的是对象 {name:\'XXX\',age:\'19\'} 默认是{}
11     *
12     * 响应
13     * 1.成功回调函数 success 代表的是一个函数 用来处理成功之后的业务逻辑的函数
14     * 1.1 字符串 xml json格式的字符串 数据转换
15     * 2.失败回调函数 error 代表的是一个函数 用来处理失败之后的业务逻辑的函数
16     * 2.1 返回一些错误信息
17     * */
18 
19 
20 
21 
22     /*处理默认参数*/
23     if(!options || typeof options != \'object\') return false;
24     /*如果没有传 使用默认的get方式提交*/
25     var type = options.type || \'get\';
26     /*如果没有传 使用默认的当前路径*/
27     var url = options.url || location.pathname;
28     /*强制 是false的时候就是同步  否则都是异步*/
29     var async = options.async === false?false:true;
30     /*如果没有就是空对象*/
31     var data = options.data || {};
32     /*对象是无法进行传输 {name:\'\',age:\'\'}  拼接字符串  name=xzz&age=18*/
33     var dataStr = \'\';
34     for(var key in data){
35         dataStr+=key+\'=\'+data[key]+\'$\';
36     }
37     dataStr = dataStr && dataStr.slice(0,-1);
38 
39     /*ajax封装编程*/
40     /*初始化*/
41     var xhr = new XMLHttpRequest();
42     xhr.open(type,type == \'get\'?url+\'?\'+dataStr:url,async);
43     /*请求头*/
44     if(type == \'post\'){
45         xhr.setRequestHeader(\'Content-Type\',\'application/x-www-form-urlencoded\');
46     }
47     /*请求主体*/
48     xhr.send(type==\'get\'?null:dataStr);
49 
50 
51 
52     /*响应*/
53     xhr.onreadystatechange = function () {
54         /*一定要完全完成通讯*/
55         if(xhr.readyState == 4){
56             if(xhr.status == 200){
57                 /*请求成功*/
58                 /*字符串 xml josn格式的字符串  数据转换*/
59                 /*获取响应类型*/
60                 var contentType = xhr.getResponseHeader("Content-Type");
61                 var result = null;
62 
63                 if(contentType.indexOf(\'xml\')>-1){
64                     /*xml*/
65                     result = xhr.responseXML;
66                 }else if(contentType.indexOf(\'json\')>-1){
67                     /*json*/
68                     result = JSON.parse(xhr.responseText);
69                 }else{
70                     /*string*/
71                     result = xhr.responseText;
72                 }
73                 options.success && options.success(result);
74 
75             }else{
76                 /*请求失败*/
77                 options.error && options.error({status:xhr.status,statusText:xhr.statusText});
78             }
79         }
80     }
81 };
82 
83 /*get*/
84 $.get = function (options) {
85     options.type = \'get\';
86     $.ajax(options);
87 }
88 /*post*/
89 $.get = function (options) {
90     options.type = \'post\';
91     $.ajax(options);
92 }
注：简单写法，仅供参考。