摘要：如下用回調(diào)最大的問題是回調(diào)函數(shù)沒有命名規(guī)范，每個(gè)開發(fā)者都有自己的風(fēng)格，一旦引用了多個(gè)庫，各個(gè)庫之間的回調(diào)函數(shù)可能會互相影響，的出現(xiàn)正好解決了這個(gè)問題。

AJAX 出現(xiàn)之后解決了前后端交互問題，前端也正式走向前臺。
AJAX 最核心的8句話

1. let request = new XMLHttpRequest()
2. request.onreadystatechange = () => {
3.     if(request.state === 4){
       console.log(request.status)        //獲取狀態(tài)碼
       console.log(request.statusText)        //獲取狀態(tài)碼后面的OK
4.     if(request.status === 200){        
            console.log(request.getResponseHeader("Content-Type"))        //獲取響應(yīng)中第二部分某個(gè)內(nèi)容
            console.log(request.getAllResponseHeaders)        //獲取響應(yīng)中第二部分所有的內(nèi)容
            console.log(request.responseText)        //獲取響應(yīng)中第四部分
5.          let string = request.responseText
6.          let object = window.JSON.parse(string)
            }
        }
    }
7. request.open("get","http://baidu.com:8000/xxx")        //設(shè)置請求中第一部分和第二部分的HOST
   request.setRequestHeader("Content-Type","application-www-form-urlencoded")    //設(shè)置請求中第二部分
8. request.send("我偏要設(shè)置"")        //設(shè)置請求中第四部分

HTTP 請求四部分

第一部分：GET /xxx HTTP/1.1              //通過request.open()設(shè)置
第二部分：HOST : http://budu.com:8000    //通過request.setRequestHeader()設(shè)置，放在request.open()和request.send()之間
        Content-Type : application/x-www-url-encoded
第三部分：回車，不需要設(shè)置
第四部分：我偏要設(shè)置        //通過reuqest.send()設(shè)置，GET請瀏覽器默認(rèn)不展示，POST情況可以

HTTP 響應(yīng)四部分

第一部分：HTTP/1.1 200 OK        //通過 request.status / reques.statusText 獲取
第二部分：Content-Type : text/json;charset=utf-8            //通過 request.getResponseHeader / request.getAllResponseHeaders 獲取
第三部分：回車，不需要設(shè)置
第四部分：文本        //通過 request.responseText 獲取

用一張圖簡單的畫下前后端交互的過程

瀏覽器是在下載完所有響應(yīng)內(nèi)容后才知道響應(yīng)結(jié)果嗎？

服務(wù)器在發(fā)送響應(yīng)時(shí)，假設(shè)response中內(nèi)容很大很大，那要等到所有內(nèi)容都下載完才知道響應(yīng)結(jié)果嗎？未免體驗(yàn)太差了吧，所以response中第一部分內(nèi)容就已經(jīng)把響應(yīng)結(jié)果傳遞給瀏覽器。而我們做判斷時(shí)，為什么先判斷state === 4，再判斷響應(yīng)結(jié)果呢？如果內(nèi)容都還沒有下載完畢，你獲取到了響應(yīng)結(jié)果也沒有用，又不能獲取里面的內(nèi)容，所以才等都下載完了之后在去判斷

window.jQuery.ajax = function({url,method,body,successFn,failFn}){
    let xhr = new XMLHttpRequest()
    xhr.onreadtstatechange = function(){
        if(xhr.readystate === 4 ){
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
                successFn.call(undefined,xhr.responseText)
            }else if(request.status >=400){
                failFn.call(uncefined,xhr)
            }
        }
    }
    request.open(method,url)
    request.send(body)
}

當(dāng)再點(diǎn)擊按鈕時(shí)，直接調(diào)用封裝好的 API

myButton.addEventLinstener("click",funtion(){
    window.jQuery.ajax({
        url : "/xxx",
        method : "post",
        headers : {
            "Content-Type" : "application / x-www- form-urlencoded,
            "zhangsan" : "19"
        },
        body : "a&b",
        successFn : (responseText) => {},
        failFn : (request) => {}
    })
})

點(diǎn)擊按鈕時(shí)，調(diào)用 jQuery.ajax 時(shí)傳遞的函數(shù)是回調(diào)函數(shù)，它定義自己沒有用，而是讓別人用，別人用調(diào)用時(shí)會傳遞一個(gè)參數(shù)，所以回調(diào)函數(shù)的參數(shù)是確定的。

現(xiàn)在成功之后是可以把函數(shù)打印出來的，那如果成功后要打印兩個(gè)函數(shù)怎么辦。如下

function f1(responseText){}
function f2(responseText){}

successFn : (responseText) => {
    f1.call(undefined,responseText)
    f2.call(undefined,responseText)
}

用回調(diào)最大的問題是回調(diào)函數(shù)沒有命名規(guī)范，每個(gè)開發(fā)者都有自己的風(fēng)格，一旦引用了多個(gè)庫，各個(gè)庫之間的 ajax 回調(diào)函數(shù)可能會互相影響，Promise 的出現(xiàn)正好解決了這個(gè)問題。

function success(responseText){
    console.log(1)
}
function fail(request){
    console.log(2)
}
myButton.addEventListener("click",(e) => {
    $.ajax({
        url : "/xxx"
        method : "post"
    }).then(success,fail)
})

$.ajax，調(diào)用ajax函數(shù)，它會返回一個(gè)Promise，如果成功了會調(diào)用success函數(shù)，如果失敗了會調(diào)用fail函數(shù)。

雖然還是要傳遞函數(shù)，但是可以不用寫函數(shù)名

myButton.addEventListener("click",(e) => {
    $.ajax({
        url : "/xxx"
        method : "post"
    }).then(
        (responseText) => {console.log(responseText)},
        (request) => {console.log("error")}
    )
})

第一個(gè)成功函數(shù)的return的值會串到第二個(gè)成功函數(shù)上

myButton.addEventListener("click",(e) => {
    $.ajax({
        url : "/xxx"
        method : "post"
    }).then(
        (responseText) => {
            console.log(responseText);
            return responseText
        },
        (request) => {
            console.log("error");
            return "已經(jīng)處理"
        }
    ).then(
        (responseText) => {console.log(responseText)},    //responseText 應(yīng)該是上一次處理的結(jié)果，jQuery會把它變成Object
        (request) => {console.log("error")}
})

因?yàn)閖Query發(fā)現(xiàn)返回值的Content-Type是text/json，它就會自動把它由 String 變成 Object。

window.jQuery.ajax = function(url,method,body,headers){
    return new Promise(function(resolve,reject){    //如果成功了就調(diào)用resolve，失敗了調(diào)用reject
        let xhr = new XMLHttpRequest()
        for(let key in headers){
            let value = headers[key]
            xhr.setRequestHeader(key,value)
        }
        xhr.onreadtstatechange = function(){
            if(xhr.readystate === 4 ){
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
                    resolve.call(undefined,xhr)
                }else if(request.status >=400){
                    reject.call(uncefined,xhr)
                }
            }
        }
        xhr.open(method,url)
        request.send(body)
    }    
})

AJAX 要必須要return new Promise，然后把你要做的事情放在new Promise里面成功就調(diào)用resolve，失敗就調(diào)用reject，Promise會提供一個(gè)then的 API，then接收兩個(gè)函數(shù)，成功就會調(diào)用第一個(gè)函數(shù)，失敗調(diào)用第二個(gè)函數(shù)。

什么是回調(diào)？

簡單說，就是將函數(shù) A 作為參數(shù)傳入函數(shù) B

function A(){}
function B(fn){fn.call()}
B(A)    // A 就是回調(diào)函數(shù)

具體的內(nèi)容可以看這篇文章：異步與回調(diào)