AJAX 的所有功能

• 客戶端的JS發(fā)起請(qǐng)求（瀏覽器上的）
• 服務(wù)端的JS發(fā)送響應(yīng)（Node.js上的）

JS操作請(qǐng)求與響應(yīng)

1.設(shè)置請(qǐng)求 request
第一部分 request.open('get', '/xxx')
第二部分 request.setRequestHeader('content-type','x-www-form-urlencoded')
第四部分 request.send('a=1&b=2')

2.獲取響應(yīng) response
第一部分：獲取狀態(tài)
request.statusText // 獲取請(qǐng)求狀態(tài)
request.status // 獲取HTTP響應(yīng)狀態(tài)
第二部分：獲取響應(yīng)header
request.getResponseHeader() // 獲取第二部分所有內(nèi)容
request.getAllResponseHeaders('Content-Type') // 獲取Content-Type的內(nèi)容
第四部分: 獲取響應(yīng)內(nèi)容
request.responseText

封裝jQuery.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 headers = options.headers

            let request = new XMLHttpRequest()
            request.open(method, url)  //初始化請(qǐng)求
            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) {
                        successFn.call(undefined, request.responseText)
                    } else if (request.status >= 400) {
                        failFn.call(undefined, request)
                    }
                }
            }
            request.send(body)  //發(fā)送請(qǐng)求
        }

        window.$ = window.jQuery

調(diào)用：

        myButton.addEventListener('click', (e) => {
            window.jQuery.ajax({
                url: '/xxx',
                method: 'post',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'keller': '18'
                },
                body: 'a=0&b=1',
                successFn: (x) => { console.log(x) },
                failFn: (x) => {
                    console.log(x)
                    console.log(x.statusText)
                    console.log(x.responseText)  //請(qǐng)求失敗也可以獲取第四部分
                }
            })
        })

此代碼有點(diǎn)傻，下面來(lái)優(yōu)化一下。

使用ES6語(yǔ)法解構(gòu)賦值

ES6新語(yǔ)法之解構(gòu)賦值，詳見MDN文檔 。
優(yōu)化后的代碼：

        window.jQuery.ajax = function ({ url, method, body, successFn, failFn, headers }) {  //ES6解構(gòu)賦值語(yǔ)法
            let request = new XMLHttpRequest()
            request.open(method, url)  //初始化請(qǐng)求
            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) {
                        successFn.call(undefined, request.responseText)
                    } else if (request.status >= 400) {
                        failFn.call(undefined, request)
                    }
                }
            }
            request.send(body)  //發(fā)送請(qǐng)求
        }

使用promise優(yōu)化

因?yàn)槊總€(gè)程序員的回調(diào)名不一樣，你不看文檔根本不知道這個(gè)庫(kù)的函數(shù)名是什么，所以我們可以使用該方法不用設(shè)置successFn、failFn這兩個(gè)函數(shù)的函數(shù)名。

返回一個(gè)promise對(duì)象，傳入的兩個(gè)參數(shù)resolve、reject，分別代表成功時(shí)執(zhí)行的內(nèi)容和失敗時(shí)執(zhí)行的內(nèi)容。

再次優(yōu)化后的代碼：

        window.jQuery.ajax = function ({ url, method, body, headers }) {
            return new Promise(function (resolve, reject) {   // 這行代碼要記住
                let request = new XMLHttpRequest()
                request.open(method, url)  //初始化請(qǐng)求
                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)  //發(fā)送請(qǐng)求
            })
        }

調(diào)用：

        myButton.addEventListener('click', (e) => {
            window.jQuery.ajax({
                url: '/xxx',
                method: 'get',
                headers: {
                    'content-type': 'application/x-www-form-urlencoded',
                    'keller': '18'
                }
            }).then(
                (text) => { console.log(text) },
                (request) => { console.log(request) }
            )
        })

then返回也是promise對(duì)象，于是就有了鏈?zhǔn)讲僮鳌?/p>

jQuery本身的ajax方法

上面是我們模仿jQuery自己封裝的ajax方法，下面來(lái)看看jQuery真正的ajax調(diào)用方法。
舉例：

        // 方法1
        $.ajax({
            url: '/xxx',
            method: 'post',
            dataType: 'x-www-form-urlencoded',
            data: 'a=0&b=1',
            success: (responseText) => { console.log(responseText) },
            error: (e) => { console.log('error') }
        })

        // 方法2
        $.ajax({
            url: '/xxx',
            method: 'post',
            dataType: 'json',
            data: 'a=0&b=1',
        }).then(
            (responseText) => { console.log(responseText) },
            (e) => { console.log('error') }
        )