由于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请求下，你可以自己设置
时间： 2024-07-31 10:41:03