模拟jQuery简单封装ajax

Posted 2020-08-23 Red丶

 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 }

注：简单写法，仅供参考。