原生JS封装jQuery的AJAX

AJAX 的所有功能

• 客户端的JS发起请求（浏览器上的）
• 服务端的JS发送响应（Node.js上的）

JS操作请求与响应

1.设置请求 request
第一部分 request.open('get', '/xxx')
第二部分 request.setRequestHeader('content-type','x-www-form-urlencoded')
第四部分 request.send('a=1&b=2')

2.获取响应 response
第一部分：获取状态
request.statusText // 获取请求状态
request.status // 获取HTTP响应状态
第二部分：获取响应header
request.getResponseHeader() // 获取第二部分所有内容
request.getAllResponseHeaders('Content-Type') // 获取Content-Type的内容
第四部分: 获取响应内容
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)  //初始化请求
            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)  //发送请求
        }

        window.$ = window.jQuery

调用：

        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)  //请求失败也可以获取第四部分
                }
            })
        })

此代码有点傻，下面来优化一下。

---

使用ES6语法解构赋值

ES6新语法之解构赋值，详见MDN文档 。
优化后的代码：

        window.jQuery.ajax = function ({ url, method, body, successFn, failFn, headers }) {  //ES6解构赋值语法
            let request = new XMLHttpRequest()
            request.open(method, url)  //初始化请求
            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)  //发送请求
        }

---

使用promise优化

因为每个程序员的回调名不一样，你不看文档根本不知道这个库的函数名是什么，所以我们可以使用该方法不用设置successFn、failFn这两个函数的函数名。

返回一个promise对象，传入的两个参数resolve、reject，分别代表成功时执行的内容和失败时执行的内容。

再次优化后的代码：

        window.jQuery.ajax = function ({ url, 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.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)  //发送请求
            })
        }

调用：

        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对象，于是就有了链式操作。

---

jQuery本身的ajax方法

上面是我们模仿jQuery自己封装的ajax方法，下面来看看jQuery真正的ajax调用方法。
举例：

        // 方法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') }
        )