封装属于自己的 Ajax 思路:
调用函数传参格式是对象 type 请求方式 url 请求的URL地址 data 发送请求时携带的数据 success 请求成功的回调函数
1. 首先需要把 data 对象转换为查询字符串格式
1.1 用for in 遍历 先把 属性和属性值用 = 拼接在一起, 然后push 到数组内
1.2 循环结束后 用 join('&')方法把数组拼接为字符串
1.3 这样就把data对象转换为了查询字符串格式
2. 接下来实例化 XMLHttpRequest
3. 用 toUpperCase() 方法把传过来的亲求方式转换为大写 然后判断是 哪种请求方式
4. 分别调用不同方式的 xhr.open() xhr.send() xhr.setRequestHeader()
5. 最后调用xhr.oreadystatechange = function(){
if(xhr.readstate === 4 && xhr.status === 200){
5.1 经过判断后把服务器返回的参数 经过反序列化后 传给 success 函数
}
}
1 function bo(obj) {
2 // 遍历对象里面的 data 属性 转换为查询字符串
3 var data = dordata(obj.data)
4 // 处理传过来的数据
5 function dordata(objdata) {
6 var dataStr = [];
7 for (var k in objdata) {
8 dataStr.push(`${k}=${objdata[k]}`)
9 }
10 // 对象转换为数组,再用 array.join('&')方法拼接为字符串
11 return dataStr.join('&');
12 }
13 var xhr = new XMLHttpRequest();
14 // 判断是 get or post
15 if (obj.type.toUpperCase() === 'GET') {
16 xhr.open('GET', `${boj.url}?${data}`)
17 xhr.send();
18 } else if (obj.type.toUpperCase() === 'POST') {
19 xhr.open('POST', obj.url);
20 xhr.setRequestHeader('Content-Type', 'x-www-form-urlencoded');
21 xhr.send(data);
22 }
23 // 获取数据
24 xhr.onreadystatechange = function () {
25 if (xhr.readyState === 4 && xhr.status === 200) {
26 data.success(JSON.parse(xhr.responseText));
27 }
28 }
29 }
