1.JS 可以设置任意请求 header 吗
第一部分 request.open('get', '/xxx')
第二部分 request.setHeader('content-type','x-www-form-urlencoded')
第四部分 request.send('a=1&b=2')
2.JS 可以获取任意响应 header 吗？
第一部分 request.status / request.statusText
第二部分 request.getResponseHeader() / request.getAllResponseHeaders()
第四部分 request.responseText
模拟封装实现jQuery的AJAX方法
window.jQuery.ajax = function (url, method, body, successFn, failFn) {
let request = new XMLHttpRequest()
request.open(method, url)
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)
}
btn.addEventListener('click', (e) => {
window.jQuery.ajax(
'/xxx',
'POST',
'a=1&b=2',
(responseText)=>{console.log(1)},
(request)=>{console.log(3)}
)此处传入的参数太多
})
简易的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 request = new XMLHttpRequest()
request.open(method, url)
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)
}
btn.addEventListener('click', (e) => {
let obj = {
url:'/xxx',
method:'get',
successFn:()=>{},
failFn:()=>{}
}
window.jQuery.ajax(obj)
})
给参数命名！
因为obj只用了一次，所以没有必要定义这个对象，可以直接把对象传进去
btn.addEventListener('click', (e) => {
window.jQuery.ajax({
url: '/xxx',
method: 'get',
successFn: () => {},
failFn: () => {}
})
})
设置请求头
如何设置请求头 ,输入一个header哈希，在原函数发送请求前遍历改变
window.jQuery.ajax({
url: '/xxx',
method: 'get',
headers:{
'Content-type':'application/x-www-form-urlencoded',
'frank':'18'
},
successFn: (x) => {
},
failFn: (x) =>
}
})
request.open(method, url)
//设置请求头，一定要在open后面
for(let key in headers){
let value = headers[key]
request.setRequestHeader(key,value)
}
callback =>函数
即使是404 也会有响应
如何接受两种参数
window.jQuery.ajax = function (options) {
let url = options.url
if(arguments.length === 1){
url = options.url
}else if(arguments.length === 2){
url = arguments[0]
options = arguments[1]
}
es6解构赋值
我们发现前面传入一个对象，运用多次赋值语句，很麻烦，看起来很蠢！
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
// es6解构赋值 上面6句等于下面一句
let {url,method,body,successFn,failFn,headers} = options
es6解构赋值 上面6句等于下面一句,那么问题来了，options声明之后只用了一次，有点尴尬，不如不用，直接把{}包起来的放到参数里
window.jQuery.ajax = function ({url,method,body,successFn,failFn,headers}) {}
var x = '???'
var o = {}
o[x] = true // '???' as key // es5 写法
体会一下两者的区别
var x = '???'
var o = {
[x]:true // 让x的值做key value 是true
}
promise
因为上面封装的ajax的回调函数名字不固定，有许许多多的库，他们的成功回调函数和失败回调函数名字千奇百怪，要想用的话，必须每个都要看文档，所以出现了promise
btn.addEventListener('click', (e) => {
$.ajax({
url: '/xxx',
type: 'get',
}).then((responseText)=>{console.log(responseText},
(request)=>{console.log(request)})
})
promise的作用
1.简化了操作，不需要再去起成功和失败的函数名字了，直接接一个then（f1,f2） f1成功时执行 f2 失败时执行
2.执行了then后面可以继续用then执行其他函数
$.ajax({
url: '/xxx',
type: 'get',
}).then((responseText)=>{
console.log(responseText)
return responseText
},(request)=>{
console.log(request)
return '已经处理'
}).then((上一次处理的结果)=>{
console.log(上一次处理的结果)//上一次处理的结果就是第一个then返回的responseText
},(request)=>{
console.log(request)
})
如图所示，输出了两次responseText
JQuery会智能地把传到浏览器的json字符串解析成对象
---升级promise对象 return new Promise()
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)
})
}
btn.addEventListener('click', (e) => {
let promise = window.jQuery.ajax({
url: '/xxx',
type: 'get',
headers:{
'Content-type':'application/x-www-form-urlencoded',
'frank':'18'
}
})
promise.then(
(text)=>{console.log(text)},
(request)=>{console.log(request)}
)
})