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