发布于 

封装函数ajax添加beforeSend和complete

​ 封装一个函数模拟$.ajax()的使用形式

–参数:配置对象形式
–option
-type -url -data -success -beforeSend -copmplete
请求方式 请求地址 请求参数 请求成功时触发的回调函数 发送请求前触发的回调 响应完毕(不区分成功失败)时触发的回调

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
function ajax(option) {
请求触发前操作
option.beforeSend();
请求发送功能
var xhr = new XMLHttpRequest();
var type = option.type.toLowerCase();
var data = urlencoded(option.data);
if (type === 'grt'){

xhr.open('get', option.url + '?' + data);
xhr.send();
} else if (type === 'post') {
xhr.open('post', option.url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(data);
}

// --- 响应处理功能
// 1 设置事件
xhr.onreadystatechange = function () {
// 2 检测响应下载完毕
if (xhr.readyState === 4) {
// 3 进行成功检测
if (xhr.status === 200) {
// 将JSON格式的数据转换为对象
var res = JSON.parse(xhr.responseText);
// 4 操作响应的数据,进行成功时的处理
option.success(res);
}
// --- 此位置确定响应下载完毕,而且不区分成功或失败,执行complete即可
option.complete();

}
};
}


// 功能测试:
/* ajax({
type: 'get',
url: 'http://www.liulongbin.top:3006/api/getbooks',
data: {
id: 1,
bookname: '西游记'
},
success: function (res) {
console.log('成功时接收的响应信息', res);
},
beforeSend: function () {
console.log('请求开始发送啦');
},

complete: function () {
console.log('请求处理完毕啦');
}
});
*/
ajax({
type: 'post',
url: 'http://www.liulongbin.top:3006/api/addbook',
data: {
bookname: '张三自传',
author: '张三',
publisher: '张三出版社'
},
success: function (res) {
console.log(res);
},
beforeSend: function () {
console.log('请求开始发送啦');
},

complete: function () {
console.log('请求处理完毕啦');
}
});


// 之前准备的用于将对象转换为urlencoded的函数
function urlencoded(obj) {
// 1 遍历对象
var arr = [];
for (var key in obj) {
// 2 将当前属性拼接为 '名=值' 的格式
arr.push(key + '=' + obj[key]);
}

// 3 使用数组方法join()用&连接每个元素即可
return arr.join('&');
}


}

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

唯獨少了個字.