封装$.ajax

发表于 | 分类于

ajax设置请求头的四部分
ajax获取响应头的四部分
封装$.ajax
使用ES6解构赋值进行优化
Promise的使用

头headers的4部分

请求头Request Headers

请求头Request Headers的4部分：

1
2
3
4
5
1 GET /data.json HTTP/1.1   //动词 路径 协议/版本
2 Host: 127.0.0.1:8080
2 Content-Type: application/x-www-form-urlencoded
4 要上传的数据

响应头Response Headers

响应Response Headers的4部分：

1
2
3
4
5
6
7
8
1 HTTP/1.1 200 OK
2 Content-Length: 2443
2 Content-Type: text/html
2 Date: Tue, 10 Oct 2017 09:14:05 GMT
2 Last-Modified: Mon, 23 Jan 2017 13:24:45 GMT
4 <!DOCTYPE html>
<!--STATUS OK--><html> <head> 后面太长，省略了……

ajax操作第一部分

设置请求

用xhr.open()设置第一部分的请求方式和路径

1
操作第一部分 xhr.open('GET', '/data.json', true);

获取响应

1
2
3
xhr.status // 获取状态码，比如200
xhr.statusText // 状态码对应的英文解释 比如200表示OK
// 200 OK

ajax操作第二部分

设置请求

用POST发送请求时，必须设置content-type
用xhr.setHeader()设置第二部分
设置请求头时，必须在xhr.send()之前设置

1
2
3
操作第一部分 xhr.open('post', '/xxx', true);
操作第二部分 xhr.setHeader('content-type','x-www-form-urlencoded');
操作第四部分 xhr.send();

获取响应

1
2
3
xhr.getResponseHeader('content-type') // x-www-form-urlencoded
xhr.getResponseHeader('content-length')
xhr.getAllResponseHeaders() //获得所有的第二部分(请求头)

ajax操作第四部分

设置请求

在用POST发送请求时，用xhr.send()可以设置第四部分将数据传给后端

1
操作第四部分 xhr.send('username=stage&age=24');

获取响应

1
xhr.responseText;

封装$.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
window.$.ajax({
    method: 'get'
    ,url: 'php.php'
    ,data: 'fname=stage&age=24'
    //用for-in遍历↓
    ,headers: {
        'content-type': 'application/x-www-form-urlencoded',
        test: 89
    }
    ,success: function (xhr){console.log(JSON.parse(xhr.responseText));}
    ,fail: function (xhr) {
        f1(xhr);
        f2(xhr);
    }
});
}
function f1(xhr) {
console.log(xhr.status);
}
function f2(xhr) {
console.log(xhr.statusText);
}
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
window.jQuery = {};
window.jQuery.ajax = function (options){
	var method = options.method;
	var url = options.url;
	var data = options.data;
	var success = options.success;
	var fail = options.fail;
	var headers = options.headers;
	/*
	上面代码可以用ES6解构赋值（解析结构然后赋值）来进行优化
	window.jQuery.ajax = function ({method, url ,data, headers, success, fail}){
	*/
	var xhr = new XMLHttpRequest();
	xhr.open(method, url, true);
	
	for (var key in headers) {
		xhr.setRequestHeader(key, headers[key]);
	}
	xhr.onreadystatechange = function() {
	  if (this.readyState === 4) {
	    if (this.status >= 200 && this.status < 400) {
	      success(xhr);
	    } else {
	      fail(xhr);
	    }
	  }
	};
	xhr.send(data);
}
window.$ = window.jQuery;

ES6解构赋值的用法

交换a和b的值

1
2
3
4
5
let a = 1;
let b = 2;
[a,b] = [b,a];
a // 2
b // 1

问题是每个程序员的回调名不一样，我们无法知道成功函数和失败函数的具体名字，也许别的程序员取名叫done和error呢

Promise 解决了这个问题

用Promise进行优化

JavaScript Promise 对象

语法：return new Promise(function (resolve, reject){ 代码 }

用Promise之后，就不需要给success和fail这两个回调函数取名字了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.$.ajax({
    method: 'get'
    ,url: 'php.php'
    ,data: 'fname=stage&age=24'
    ,headers: {
        'content-type': 'application/x-www-form-urlencoded',
        test: 89
    }
})
.then(
	//不需要取名字了，成功时执行第一个函数，失败时执行第二个函数
    xhr => {console.log('success');console.log(JSON.parse(xhr.responseText));},
    xhr => {console.log('fail');console.log(xhr.status);}
    );

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
window.jQuery = {};
window.jQuery.ajax = ({method, url ,data, headers}/*es6解构赋值*/) => {
 return new Promise((resolve, reject) => {//如果一切都正常，则调用 resolve解析，否则调用 reject拒绝
	const xhr = new XMLHttpRequest();
	xhr.open(method, url, true);
	
	for (let key in headers) {
		xhr.setRequestHeader(key, headers[key]);
	}
	xhr.onreadystatechange = () => {
	  if (xhr.readyState === 4) {
	    if (xhr.status >= 200 && xhr.status < 400) {//用了箭头函数，this就不是xhr了，而是window
	      resolve(xhr); //不需要取名字success了
	    } else {
	      reject(xhr); //不需要取名字fail了
	    }
	  }
	};
	xhr.send(data);
 });
}
window.$ = window.jQuery;

Promise总结

原始函数

1
$.ajax({success:fn1, fail:fn2});

Promise方法：

1
2
3
4
$.ajax().then(fn1, fn2);//成功则调用fn1，失败调用fn2
//$.ajax().then((data)=>console.log(data),(error)=>{console.log(error);document.write(error.responseText)})
$.ajax().then(fn1).then(fn3); //fn1调用完后，再调用fn3

-------------本文结束感谢您的阅读-------------