摘要：如下用回調最大的問題是回調函數沒有命名規范，每個開發者都有自己的風格，一旦引用了多個庫，各個庫之間的回調函數可能會互相影響，的出現正好解決了這個問題。

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

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

HTTP 請求四部分

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

HTTP 響應四部分

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

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

瀏覽器是在下載完所有響應內容后才知道響應結果嗎？

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

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)
}

當再點擊按鈕時，直接調用封裝好的 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) => {}
    })
})

點擊按鈕時，調用 jQuery.ajax 時傳遞的函數是回調函數，它定義自己沒有用，而是讓別人用，別人用調用時會傳遞一個參數，所以回調函數的參數是確定的。

現在成功之后是可以把函數打印出來的，那如果成功后要打印兩個函數怎么辦。如下

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

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

用回調最大的問題是回調函數沒有命名規范，每個開發者都有自己的風格，一旦引用了多個庫，各個庫之間的 ajax 回調函數可能會互相影響，Promise 的出現正好解決了這個問題。

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，調用ajax函數，它會返回一個Promise，如果成功了會調用success函數，如果失敗了會調用fail函數。

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

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

第一個成功函數的return的值會串到第二個成功函數上

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

因為jQuery發現返回值的Content-Type是text/json，它就會自動把它由 String 變成 Object。

window.jQuery.ajax = function(url,method,body,headers){
    return new Promise(function(resolve,reject){    //如果成功了就調用resolve，失敗了調用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里面成功就調用resolve，失敗就調用reject，Promise會提供一個then的 API，then接收兩個函數，成功就會調用第一個函數，失敗調用第二個函數。

什么是回調？

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

function A(){}
function B(fn){fn.call()}
B(A)    // A 就是回調函數

具體的內容可以看這篇文章：異步與回調