原生JS封装jQuery的AJAX

title: 原生JS封装jQuery的AJAX
date: 2018-10-08 11:04:15
tags: [JavaScript]
categories: JavaScript

基本功能

设置请求request

第一步 let request = new XMLHttpRequest()
第一部分：
request.open('GET', '/xxx')
第二部分：(不能设置User-Agent，会报错)
request.setRequestHeader('Content-Type', 'x-www-form-urlencoded')
第四部分：
request.send('a=0&b=1')

获取响应response

第一部分：获取HTTP状态
request.status //200
request.statusText //OK

第二部分：获取响应header
request.getAllResponseHeaders() //获取第二部分所有内容
request.getResponseHeader('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',
            'allen': '23'
        } ,
        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}){  //解构赋值语法
    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)  //发送请求
    })
}

调用：

 window.jQuery.ajax({
        url: '/xxx',
        method: 'post',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'allen': '23'
        }
    }).then(
        (responseText) => {
            console.log(responseText);
            return responseText;
        },
        (request) => {
            console.log('error'); return 'error'
        }
)

then返回也是promise对象，于是就有了链式操作。

jQuery本身的ajax方法

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

$.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')}
})

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

原生JS封装jQuery的AJAX