封装AJAX

AJAX：异步的 JavaScript 和 XML，满足以下三个条件：
1.使用 XMLHttpRequest 发请求
2.服务器返回 XML 格式的字符串
3.JS 解析 XML，并更新局部页面

原生JS设置请求和获取响应，代码如下图

    let request = new XMLHttpRequest()
    request.open('GET','/xxx')
    request.setRequestHeader('content-type','x-www-form-urlencoded')
    request.send()
    request.onreadystatechange = function(){
        if(request.readyState===4){
            if(request.status >=200 && request.status<300){
                console.log(request.status)
                console.log(request.statusText)
                console.log(request.getResponseHeader('Content-type'))
                let string = request.responseText
                //把符合JSON语法的字符串转换成JS的值
                let obj=window.JSON.parse(string)
                //JSON.parse是浏览器提供的
                console.log(obj)
            }else if(request.status>=400){
                console.log('请求失败')
            }
        }
    }
})

自己尝试用jQuery来封装Ajax

//ES6解构赋值
window.jQuery.ajax = function({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.send(body)
    request.onreadystatechange = function(){
        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)
            }
        }
    }
}
window.$ = window.jQuery
//调用
myButton.addEventListener('click',(e)=>{
    window.jQuery.ajax({
        url:'/xxx',
        method:'get',
        body:'a=1&b=2',
        headers:{'content-type':'application/x-www-form-urlencoded',
        'frank':'666'},
        successFn:(eee)=>{console.log(eee)}, //request.responseText
        failFn:(eee)=>{console.log(eee)}//request
    })
})

但是，如果像上面那样使用回调函数，有一个确定是，当有多个库时，每一个库你都需要去查看文档看“成功/失败“时要传的参数名称，比如jQuery是success&error，图片是image.onload&image.onerror，有的是successFn,failFn。而Promises规范使得你无需去记传的参数名称是什么，因为根本就不需要参数名称。

我们来看下，jQuery文档中ajax的封装

Example:发送id作为数据发送到服务器， 保存一些数据到服务器上， 并通一旦它的完成知用户。 如果请求失败，则提醒用户。

jQuery官方文档

了解Promise

可以说，Promise是一个确定函数形式的规范，统一了”成功“和”失败“传的函数形式，简化了代码。

jQuery中Promise的运用

myButton.addEventListener('click',(e)=>{
    window.jQuery.ajax({
        url:'/xxx',
        method:'get'
    }).then((responseText)=>{console.log(responseText)},
    (request)=>{console.log(request)})
}).then(
    (上一次成功的返回结果)=>{},
    (上一次失败的返回结果)=>{}
)

也可以将上面我们自己封装的window.jQuery.ajax改写成Promise形式，如下：

window.jQuery.ajax = function({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.send(body)
        request.onreadystatechange = function(){
            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)
                }
            }
        }
    })
}
//上述函数返回一个Promise对象，then是promise对象的一个属性。Promise===window.Promise

window.$ = window.jQuery
//调用
myButton.addEventListener('click',(e)=>{
    let promise = window.jQuery.ajax({
        url:'/xxx',
        method:'get'
    })
    promise.then(        
       (text)=>{console.log(text)},      //request.responseText
       (request)=>{console.log(request)} //request
    )}

//后端代码

}else if(path==='/xxx'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/json;charset=utf-8')
    response.setHeader('Access-Control-Allow-Origin', 'http://frank.com:8001')
    response.write(`
    {
      "note":{
        "to": "小明",
        "from": "小红",
        "heading": "打招呼",
        "content": "hi"
      }
    }
    response.end()
}