AJAX 的所有功能
- 客户端的JS发起请求（浏览器上的）
- 服务端的JS发送响应（Node.js上的）
JS操作请求与响应
1.设置请求 request
第一部分 request.open('get', '/xxx')
第二部分 request.setRequestHeader('content-type','x-www-form-urlencoded')
第四部分 request.send('a=1&b=2')
2.获取响应 response
第一部分：获取状态
request.statusText // 获取请求状态
request.status // 获取HTTP响应状态
第二部分：获取响应header
request.getResponseHeader() // 获取第二部分所有内容
request.getAllResponseHeaders('Content-Type') // 获取Content-Type的内容
第四部分: 获取响应内容
request.responseText
封装jQuery.ajax
初始版本
封装：
window.jQuery.ajax = function (options) {
let url = options.url
let method = options.method
let body = options.body
let successFn = options.successFn
let failFn = options.failFn
let headers = options.headers
let request = new XMLHttpRequest()
request.open(method, url) //初始化请求
for (let key in headers) {
let value = headers[key]
request.setRequestHeader(key, value)
}
request.onreadystatechange = () => {
if (request.readyState === 4) {
if (request.status >= 200 && request.status < 300) {
successFn.call(undefined, request.responseText)
} else if (request.status >= 400) {
failFn.call(undefined, request)
}
}
}
request.send(body) //发送请求
}
window.$ = window.jQuery
调用：
myButton.addEventListener('click', (e) => {
window.jQuery.ajax({
url: '/xxx',
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'keller': '18'
},
body: 'a=0&b=1',
successFn: (x) => { console.log(x) },
failFn: (x) => {
console.log(x)
console.log(x.statusText)
console.log(x.responseText) //请求失败也可以获取第四部分
}
})
})
此代码有点傻，下面来优化一下。
使用ES6语法解构赋值
ES6新语法之解构赋值，详见MDN文档 。
优化后的代码：
window.jQuery.ajax = function ({ url, method, body, successFn, failFn, headers }) { //ES6解构赋值语法
let request = new XMLHttpRequest()
request.open(method, url) //初始化请求
for (let key in headers) {
let value = headers[key]
request.setRequestHeader(key, value)
}
request.onreadystatechange = () => {
if (request.readyState === 4) {
if (request.status >= 200 && request.status < 300) {
successFn.call(undefined, request.responseText)
} else if (request.status >= 400) {
failFn.call(undefined, request)
}
}
}
request.send(body) //发送请求
}
使用promise优化
因为每个程序员的回调名不一样，你不看文档根本不知道这个库的函数名是什么，所以我们可以使用该方法不用设置successFn、failFn这两个函数的函数名。
返回一个promise对象，传入的两个参数resolve、reject，分别代表成功时执行的内容和失败时执行的内容。
再次优化后的代码：
window.jQuery.ajax = function ({ url, method, body, headers }) {
return new Promise(function (resolve, reject) { // 这行代码要记住
let request = new XMLHttpRequest()
request.open(method, url) //初始化请求
for (let key in headers) {
let value = headers[key]
request.setRequestHeader(key, value)
}
request.onreadystatechange = () => {
if (request.readyState === 4) {
if (request.status >= 200 && request.status < 300) {
resolve.call(undefined, request.responseText)
} else if (request.status >= 400) {
reject.call(undefined, request)
}
}
}
request.send(body) //发送请求
})
}
调用：
myButton.addEventListener('click', (e) => {
window.jQuery.ajax({
url: '/xxx',
method: 'get',
headers: {
'content-type': 'application/x-www-form-urlencoded',
'keller': '18'
}
}).then(
(text) => { console.log(text) },
(request) => { console.log(request) }
)
})
then返回也是promise对象，于是就有了链式操作。
jQuery本身的ajax方法
上面是我们模仿jQuery自己封装的ajax方法，下面来看看jQuery真正的ajax调用方法。
举例：
// 方法1
$.ajax({
url: '/xxx',
method: 'post',
dataType: 'x-www-form-urlencoded',
data: 'a=0&b=1',
success: (responseText) => { console.log(responseText) },
error: (e) => { console.log('error') }
})
// 方法2
$.ajax({
url: '/xxx',
method: 'post',
dataType: 'json',
data: 'a=0&b=1',
}).then(
(responseText) => { console.log(responseText) },
(e) => { console.log('error') }
)