封装Ajax函数
封装Ajax函数
封装准备工作_封装将对象转换为urlencoded函数
方式1：
1
2
3
4
5
6
7
8
9
10
11
12
13
| function urlencoded(obj) {
1 遍历对象obj
var str = '';
for (var key in obj) {
2将当前属性拼接为 '名=值' 的格式
str += key + '=' + obj[key] + '&';
}
3将字符串最后多余的&去除
str = str.slice(9,-1);
4设置返回值即可
return str;
}
|
方式2：
1
2
3
4
5
6
7
8
9
10
| function urlencoded(obj) {
1遍历对象
var arr = [];
for (var key in obj) {
2 将当前属性拼接为 '名=值' 的格式
arr.push(key + '=' + obj[key]);
}
3 使用数组方法join()用&连接每个元素即可
return arr.join('&');
}
|
多功能目标的演示：
1
2
3
4
5
6
7
| var result = urlencoded({
name: 'jack',
age: 18,
gender: '男'
});
console.log(result);
|
封装Ajax函数
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
| 封装一个函数模拟$.ajax()的使用形式
参数：配置对象形式
- option
- type 请求方式
- url 请求地址
- data 请求参数
- success 回调函数
function ajax(option) {
---请求发送功能---
1初始化
var xhr = new XMLHttpRequest();
2 由于后续请求发送功能的get和post操作不同，根据请求方式进行分别设置
- 因为请求方式名不区分大小写，可以进行统一转换
- toLowerCase() 用于将字符串中的字母转换为小写
var type = option.type.toLowerCase();
-将data统一转换为urlencoded
var data = urlencoded(option.data);
if (type === 'get') {
2.1 设置get请求的open和send功能
xhr.open('get',option.url + '?' + data);
xhr.send();
} else if (type === 'post') {
2.2 设置post请求的open和send功能
xhr.open('post',option.url);
xhr.setRequestHeader('Content-Type','application/x-ww-form-uelencoded');
xhr.send(data);
}
---响应处理功能---
1 设置事件
xhr.onreadystatechange = function () {
2 检测状态
if(xhr.readyState === 4 & xhr.status === 200) {
3 将JSON格式的数据转换为对象
varres = JSON.parse(xhr.responseText);
4 操作响应的数据
option.success(res)
}
};
}
|
准备用于将对象转换为urlencoded的函数：
1
2
3
4
5
6
7
8
9
10
11
| function urlencoded(obj) {
1 遍历对象
var arr = [];
for (var key in obj) {
2 将当前属性拼接为 '名=值' 的格式
arr.push(key + '=' + obj[key]);
}
3 使用数组方法join()用&连接每个元素即可
return arr.join('&');
}
|
// 代码纯属演示：
// - 用于说明jQuery的get请求本质与原生操作相同，因为就是基于原生封装的
// - 直接将get参数拼接在url后面一样可以正常发送
$.get(‘网址+?id=1&bookname=西游记’, function (res) {
console.log(res);
});