备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

第111天：Ajax之jQuery实现方法

2017-12-11 1183
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 由于jQuery中的Ajax方法是用了内置的deferred模块，是Promise模式的一种实现，而我们这里没有讲过，所以我们就不使用这一模式啦。我们只定义一个Ajax方法，他可以简单的get，post，jsonp请求就可以了。

由于jQuery中的Ajax方法是用了内置的deferred模块，是Promise模式的一种实现，而我们这里没有讲过，所以我们就不使用这一模式啦。

我们只定义一个Ajax方法，他可以简单的get，post，jsonp请求就可以了。

一、jQuery语法格式

 1 var ajax = function () {
 2     
 3   //  做一些初始化，定义一些私有函数等
 4  
 5   return function () {
 6     // ajax主体代码
 7   }
 8     
 9 }()
10 
11 
12 ajax({
13   url: myUrl,
14   type: 'get',
15   dataType: 'json',
16   timeout: 1000,
17   success: function (data, status) {
18     console.log(data)
19   },
20   fail: function (err, status) {
21     console.log(err)
22   }
23 })

二、初始化属性

Ajax方法需要传递一个对象进去，这个对象中我们可以定义一些我们希望的属性，我们就必须初始一下各种属性

 1 //默认请求参数
 2   var _options = {
 3     url: null,  // 请求连接
 4     type: 'GET',  // 请求类型
 5     data: null,  // post时请求体
 6     dataType: 'text',  // 返回请求的类型，有text/json两种
 7     jsonp: 'callback',  // jsonp请求的标志，一般不改动
 8     jsonpCallback: 'jsonpCallback',  //jsonp请求的函数名
 9     async: true,   // 是否异步
10     cache: true,   // 是否缓存
11     timeout:null,  // 设置请求超时
12     contentType: 'application/x-www-form-urlencoded',
13     success: null,  // 请求成功回调函数
14     fail: null   // 请求失败回调
15   }

三、Ajax主体函数

以上我们定义了一大串请求有关的数据，接下来我们就开始Ajax主体函数的书写，现在的Ajax方法是这样了

 1 var ajax = function () {
 2 
 3   //默认请求参数
 4   var _options = {
 5     url: null,
 6     type: 'GET',
 7     data: null,
 8     dataType: 'text',
 9     jsonp: 'callback',
10     jsonpCallback: 'jsonpCallback',
11     async: true,
12     cache: true,
13     timeout:null,
14     contentType: 'application/x-www-form-urlencoded',
15     success: null,
16     fail: null
17   }
18   // ...
19   return function (options) {
20      // ...
21   }
22 }()

四、内部继承

我们可以想一下，ajax方法传递一个对象进来，我们需要把我们设置的这个对象上的属性来覆盖掉初始化_options上面的那些属性呢，肯定需要。那下面我们先写一个简单的继承，如下：

 1 var ajax = function () {
 2 
 3   //默认请求参数
 4   var _options = {
 5     url: null,
 6     type: 'GET',
 7     data: null,
 8     dataType: 'text',
 9     jsonp: 'callback',
10     jsonpCallback: 'jsonpCallback',
11     async: true,
12     cache: true,
13     timeout:null,
14     contentType: 'application/x-www-form-urlencoded',
15     success: null,
16     fail: null
17   }
18   //  内部使用的继承方法
19   var _extend = function(target,options) {
20     if( typeof target !== 'object' || typeof options !== 'object' ) {
21       return;
22     }
23     var copy ,clone, name;
24     for( name in options ) {
25       if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
26         target[name] = options[name];
27       }
28     }
29     return target;
30   };
31 
32 
33   // ...
34   return function (options) {
35 
36     // 没有传参或者没有url，抛出错误
37     if( !options || !options.url ) {
38       throw('参数错误！');
39     }
40 
41     // 继承操作
42     options.type = options.type.toUpperCase();
43     _extend(options,_options);
44      // ...
45   }
46 }()

这个继承方法，我们是把初始化的_options继承到了options，为什么呢？因为我们这个_options对象不在ajax方法内部，我们需要使用它，但我们不能改变他，如果改变了他，下一次使用ajax方法将会崩溃。因此，我们仅仅是把配置的options对象没有的属性设置为初始值。

五、jsonp请求

jsonp请求不是xhr请求，他是将请求url当做script标签的src值插入到页面body中去实现的，我们先把jsonp请求处理一下再开始建立xhr请求的代码吧。

 1 var ajax = function () {
 2 
 3   //默认请求参数
 4   var _options = {
 5     url: null,
 6     type: 'GET',
 7     data: null,
 8     dataType: 'text',
 9     jsonp: 'callback',
10     jsonpCallback: 'jsonpCallback',
11     async: true,
12     cache: true,
13     timeout:null,
14     contentType: 'application/x-www-form-urlencoded',
15     success: null,
16     fail: null
17   }
18   //  内部使用的继承方法
19   var _extend = function(target,options) {
20     if( typeof target !== 'object' || typeof options !== 'object' ) {
21       return;
22     }
23     var copy ,clone, name;
24     for( name in options ) {
25       if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
26         target[name] = options[name];
27       }
28     }
29     return target;
30   };
31   
32   // jsonp处理函数
33   function _sendJsonpRequest(url,callbackName,succCallback) {
34 
35     var script = document.createElement('script');
36 
37     script.type="text/javascript";
38     script.src=url;
39 
40     document.body.appendChild(script);
41     // 如果用户自己定义了回调函数，就用自己定义的，否则，调用success函数
42     window[callbackName] = window[callbackName] || succCallback;
43 
44   }
45 
46   // ...
47   return function (options) {
48 
49     // 没有传参或者没有url，抛出错误
50     if( !options || !options.url ) {
51       throw('参数错误！');
52     }
53 
54     // 继承操作
55     options.type = options.type.toUpperCase();
56     _extend(options,_options);
57 
58     /*jsonp部分，直接返回*/
59     if( options.dataType === 'jsonp' ) {
60       var jsonpUrl = options.url.indexOf('?') > -1 ? options.url: options.url +
61         '?' + options.jsonp+ '=' + options.jsonpCallback;
62 
63      return  _sendJsonpRequest(jsonpUrl,options.jsonpCallback,options.success);
64       
65     }
66      // ...
67   }
68 }()

我们定义了一个_sendJsonpRequest函数，这个函数接收三个参数，第一个是jsonpUrl，第二个是jsonp的回调函数名，第三个是成功回调函数，我们在这个函数内建立一个src为jsonpUrl的script元素插入到body中，同时，确定了回调函数（如果我们定义了jsonpCallback函数就调用它，如果没有就调用success回调，一般情况我们不去定义全局的jsonpCallback函数而传递success回调来完成jsonp请求）。

六、xhr请求处理

好，处理好jsonp请求后，我们开始处理xhr请求了。

  1 var ajax = function () {
  2 
  3   //默认请求参数
  4   var _options = {
  5     url: null,
  6     type: 'GET',
  7     data: null,
  8     dataType: 'text',
  9     jsonp: 'callback',
 10     jsonpCallback: 'jsonpCallback',
 11     async: true,
 12     cache: true,
 13     timeout:null,
 14     contentType: 'application/x-www-form-urlencoded',
 15     success: null,
 16     fail: null
 17   }
 18   //  内部使用的继承方法
 19   var _extend = function(target,options) {
 20     if( typeof target !== 'object' || typeof options !== 'object' ) {
 21       return;
 22     }
 23     var copy ,clone, name;
 24     for( name in options ) {
 25       if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
 26         target[name] = options[name];
 27       }
 28     }
 29     return target;
 30   };
 31   
 32   // jsonp处理函数
 33   function _sendJsonpRequest(url,callbackName,succCallback) {
 34 
 35     var script = document.createElement('script');
 36 
 37     script.type="text/javascript";
 38     script.src=url;
 39 
 40     document.body.appendChild(script);
 41     // 如果用户自己定义了回调函数，就用自己定义的，否则，调用success函数
 42     window[callbackName] = window[callbackName] || succCallback;
 43 
 44   }
 45   
 46   // json转化为字符串
 47   var _param = function(data) {
 48     var str = '';
 49     if( !data || _empty(data)) {
 50       return str;
 51     }
 52     for(var key in data) {
 53       str += key + '='+ data[key]+'&'
 54     }
 55     str = str.slice(0,-1);
 56     return str;
 57   }
 58   //判断对象是否为空
 59   var _empty = function(obj) {
 60     for(var key in obj) {
 61       return false;
 62     }
 63     return true;
 64   }
 65 
 66   // ...
 67   return function (options) {
 68 
 69     // 没有传参或者没有url，抛出错误
 70     if( !options || !options.url ) {
 71       throw('参数错误！');
 72     }
 73 
 74     // 继承操作
 75     options.type = options.type.toUpperCase();
 76     _extend(options,_options);
 77 
 78     /*jsonp部分，直接返回*/
 79     if( options.dataType === 'jsonp' ) {
 80       var jsonpUrl = options.url.indexOf('?') > -1 ? options.url: options.url +
 81         '?' + options.jsonp+ '=' + options.jsonpCallback;
 82 
 83      return  _sendJsonpRequest(jsonpUrl,options.jsonpCallback,options.success);
 84       
 85     }
 86     
 87      //XMLHttpRequest传参无影响
 88     var xhr = new (window.XMLHttpRequest || ActiveXObject)('Microsoft.XMLHTTP');
 89     // get搜索字符串
 90     var search = '';
 91 
 92     // 将data序列化
 93     var param= _param(options.data)
 94 
 95     if( options.type === 'GET' ) {
 96       search = (options.url.indexOf('?') > -1 ? '&' : '?') + param;
 97       if(!options.cache) {
 98         search += '&radom='+Math.random();
 99       }
100       
101       param = null;
102     }
103 
104      // ...
105   }
106 }()

首先，兼容IE创建xhr对象，XMLHttpRequest构造函数传递参数是无影响，然后我们定义了两个辅助变量：search、param，前者用于get请求的查询字串，后者用于post请求的send内容，我们定义了一个_param方法来讲对象转换为send方法参数的模式，就如你看到的那样，下面我们做了get与post之间合理的search、param的赋值工作。接下来我们就可以发送请求书写最激动人心的内容了。

最终的代码如下

  1 ;
  2 
  3 var ajax = function () {
  4 
  5   //默认请求参数
  6   var _options = {
  7     url: null,
  8     type: 'GET',
  9     data: null,
 10     dataType: 'text',
 11     jsonp: 'callback',
 12     jsonpCallback: 'jsonpCallback',
 13     async: true,
 14     cache: true,
 15     timeout:null,
 16     contentType: 'application/x-www-form-urlencoded',
 17     success: null,
 18     fail: null
 19   }
 20 
 21 
 22   // json转化为字符串
 23   var _param = function(data) {
 24     var str = '';
 25     if( !data || _empty(data)) {
 26       return str;
 27     }
 28     for(var key in data) {
 29       str += key + '='+ data[key]+'&'
 30     }
 31     str = str.slice(0,-1);
 32     return str;
 33   }
 34   //判断对象是否为空
 35   var _empty = function(obj) {
 36     for(var key in obj) {
 37       return false;
 38     }
 39     return true;
 40   }
 41 
 42   var _extend = function(target,options) {
 43     if( typeof target !== 'object' || typeof options !== 'object' ) {
 44       return;
 45     }
 46     var copy ,clone, name;
 47     for( name in options ) {
 48       if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
 49         target[name] = options[name];
 50       }
 51     }
 52     return target;
 53   };
 54 
 55   // 自定义text转化json格式
 56   var parseJSON = function(text) {
 57     if(typeof text !== 'string') {
 58       return;
 59     }
 60     if( JSON && JSON.parse ) {
 61       return JSON.parse(text);
 62     }
 63     return (new Function('return '+text))();
 64   }
 65 
 66   // jsonp处理函数
 67   function _sendJsonpRequest(url,callbackName,succCallback) {
 68 
 69     var script = document.createElement('script');
 70 
 71     script.type="text/javascript";
 72     script.src=url;
 73 
 74     document.body.appendChild(script);
 75     // 如果用户自己定义了回调函数，就用自己定义的，否则，调用success函数
 76     window[callbackName] = window[callbackName] || succCallback;
 77 
 78   }
 79 
 80 
 81   return function (options) {
 82 
 83     // 没有传参或者没有url，抛出错误
 84     if( !options || !options.url ) {
 85       throw('参数错误！');
 86     }
 87 
 88     // 继承操作
 89     options.type = options.type.toUpperCase();
 90     _extend(options,_options);
 91 
 92     /*jsonp部分，直接返回*/
 93     if( options.dataType === 'jsonp' ) {
 94       var jsonpUrl = options.url.indexOf('?') > -1 ? options.url: options.url +
 95         '?' + options.jsonp+ '=' + options.jsonpCallback;
 96 
 97       _sendJsonpRequest(jsonpUrl,options.jsonpCallback,options.success);
 98       
 99       return;
100     }
101 
102      //XMLHttpRequest传参无影响
103     var xhr = new (window.XMLHttpRequest || ActiveXObject)('Microsoft.XMLHTTP');
104 
105     // get搜索字符串
106     var search = '';
107 
108     // 将data序列化
109     var param= _param(options.data)
110 
111     if( options.type === 'GET' ) {
112       search = (options.url.indexOf('?') > -1 ? '&' : '?') + param;
113       if(!options.cache) {
114         search += '&radom='+Math.random();
115       }
116       
117       param = null;
118     }
119 
120     xhr.open( options.type, options.url + search, options.async );
121 
122     xhr.onreadystatechange = function() {
123       if( xhr.readyState == 4 ) {
124         if( xhr.status >= 200 && xhr.status < 300 || xhr.status == 304 ) {
125           var text = xhr.responseText;
126           // json格式转换
127           if(options.dataType == 'json') {
128               text = parseJSON(text)
129           }
130 
131           if( typeof options.success === 'function') {
132 
133             options.success(text,xhr.status)
134           }
135           
136         }else {
137 
138           if(typeof options.fail === 'function') {
139             options.fail('获取失败', 500)
140           }
141           
142         }
143       }
144     }
145 
146     xhr.setRequestHeader('content-type',options.contentType);
147     // get请求时param时null
148     xhr.send(param);
149 
150     // 如果设置了超时，就定义
151     if(typeof options.timeout === 'number') {
152       // ie9+
153       if( xhr.timeout ) {
154         xhr.timeout = options.timeout;
155       }else {
156         setTimeout(function() {
157           xhr.abort();
158         },options.timeout)
159       }
160     }
161   }
162 
163 }()

可以看到，我们很熟悉的xhr代码，在这里，我们需要写一个解析返回字串形成json格式对象的方法parseJSON，类似于jq中的parseJSON方法，如上所示。

我们还需要设置超时代码，如果设置了请求超时，我们就如上定义。

注意：上面代码中，由于懒，设置请求头一行并没有判断是否在post请求下，你可以自己设置

文章标签：
前端开发
JavaScript
数据格式
JSON
缓存
关键词：
jQuery方法
ajax方法
jQuery ajax
ajax jquery
ajax.js方法
半指温柔乐
目录
相关文章
梦中千秋
|
3天前
|
JavaScript CDN
jQuery方法小记
jQuery方法小记
梦中千秋
13 0
jianz123
|
16天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法（附源码）
AJAX载入外部JS文件到页面并让其执行的方法（附源码）
jianz123
17 0
N..
|
1月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
18 1
她说她一如既往的爱我
|
3月前
|
JavaScript
jQuery追加节点方法 和height方法与width方法
jQuery追加节点方法 和height方法与width方法
她说她一如既往的爱我
13 0
Hello，C++！
|
3月前
|
JavaScript 前端开发
调用jQuery的animate()方法无法移动的问题
调用jQuery的animate()方法无法移动的问题
Hello，C++！
17 0
掘金防诈骗集团CEO
|
1月前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
掘金防诈骗集团CEO
36 1
掘金防诈骗集团CEO
|
1月前
|
移动开发 前端开发 安全
Ajax跨域的所有方法（最详细带使用教程！！！）
Ajax跨域的所有方法（最详细带使用教程！！！）
掘金防诈骗集团CEO
40 1
左边的天堂
|
2月前
|
JavaScript 前端开发 Java
jquery ajax+spring mvc上传文件
jquery ajax+spring mvc上传文件
左边的天堂
17 0
仲君Johnny
|
2月前
|
数据采集 Web App开发 前端开发
Python爬虫之Ajax分析方法与结果提取#6
Ajax分析方法、Ajax结果提取【2月更文挑战第20天】
仲君Johnny
37 0
Python爬虫之Ajax分析方法与结果提取#6
算精通
|
2月前
|
XML 前端开发 JavaScript
AJAX get() 和 post() 方法
AJAX（Asynchronous JavaScript and XML）是一种用于创建快速和动态网页的技术，它允许使用 JavaScript 和 XMLHttpRequest 对象在不重新加载整个页面的情况下向服务器发送请求和接收响应。jQuery 提供了几个用于 AJAX 操作的方法，包括 .ajax()、.get() 和 .post()
算精通
14 1