发布于 

封装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(0,str.length - 1);
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) {
3JSON格式的数据转换为对象
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);

});


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

唯獨少了個字.