title: 原生JS封装jQuery的AJAX
date: 2018-10-08 11:04:15
tags: [JavaScript]
categories: JavaScript
基本功能
设置请求request
第一步 let request = new XMLHttpRequest()
第一部分：
request.open('GET', '/xxx')
第二部分：(不能设置User-Agent，会报错)
request.setRequestHeader('Content-Type', 'x-www-form-urlencoded')
第四部分：
request.send('a=0&b=1')
获取响应response
第一部分：获取HTTP状态
request.status //200
request.statusText //OK
第二部分：获取响应header
request.getAllResponseHeaders() //获取第二部分所有内容
request.getResponseHeader('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',
'allen': '23'
} ,
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}){ //解构赋值语法
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) //发送请求
})
}
调用：
window.jQuery.ajax({
url: '/xxx',
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'allen': '23'
}
}).then(
(responseText) => {
console.log(responseText);
return responseText;
},
(request) => {
console.log('error'); return 'error'
}
)
then返回也是promise对象，于是就有了链式操作。
jQuery本身的ajax方法
上面是我们模仿jQuery自己封装的ajax方法，下面来看看jQuery真正的ajax方法。
举例：
$.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')}
})
$.ajax({
url:'/xxx',
method: 'post',
dataType:'json',
data:'a=0&b=1',
}).then(
(responseText)=>{console.log(responseText)},
(e)=>{console.log('error')}
)
