AJAX 的一切功用

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，再推斷相應效果呢？假如內容都還沒有下載終了，你獵取到了相應效果也沒有用，又不能獵取內里的內容，所以才等都下載完了以後在去推斷

用jQuery封裝下AJAX

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

Promise

用回調最大的題目是回調函數沒有定名範例，每一個開發者都有本身的作風，一旦引用了多個庫，各個庫之間的 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 就是回調函數

詳細的內容能夠看這篇文章：異步與回調