自己實現AJAX

littlebirdflying發表於2018-04-11

1. JS操作請求與響應

http報文格式
請求格式
GET /xxx HTTP/1.1                                   第一部分
HOST: jack.com:8002                                 第二部分      key:value形式
Content-Type: application/x-www-url-encoded
                                                    空行是第三部分，下面就是第四部分請求體
響應格式 
HTTP/1.1 200 OK                                    第一部分
Content-Type: text/html                            第二部分      key:value形式                    
                                                   第三部分     空行
<!DOCTYPE html>                                    第四部分     響應體
<html>.…</html>
複製程式碼

1.1 JS 可以設定任意請求 header 嗎? 可以

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

1.1.png

1.2 JS 可以獲取任意響應 header 嗎？ 可以

第一部分 request.status / request.statusText
第二部分 request.getResponseHeader() / request.getAllResponseHeaders()
第四部分 request.responseText

1.2.png
相關程式碼：JS操作請求與響應
所以通過ajax，我們可以獲取請求中的4各部分的所有內容（不安全的會不讓設定），也可以獲取響應中的4個部分。

1.3 巨集觀上看一眼

1.3.png

2. 寫window.jQuery.ajax （封裝）

2.1 從記憶體圖的角度看我們在做什麼

jQuery作為物件，我們假設它在桟記憶體中地址是Addr89，對應的堆記憶體中的一個物件89。 現在我們需要給89新增一個新的key，也就是ajax，它的值對應著101這個函式體，我們要寫的就是這個函式體。

2.1.png
程式碼形式如下：

window.jQuery.ajax = function(options){
  // 程式碼   （這就是我們要寫的部分）
}
複製程式碼

程式碼：自己實現window.jQuery.ajax
系統學習jQuery.ajax，要看文件
更多文件 http://cndevdocs.com/

2.2 自己封裝一個jQuery.ajax 的api

滿足條件 jQuery.ajax(url,method,body,success, fail)
程式碼如下：

window.jQuery.ajax = function(url, method, body, success, fail) {
    let request = new XMLHttpRequest()
    request.open(method, url)
    request.onreadystatechange = ()=>{
        if(request.readyState === 4) {
            if(request.status >= 200 && request.status < 300) {
                success.call(undefined, request.responseText)
            } else if (request.status >= 400) {
                fail.call(undefined, request)
            }
        }
    }
    request.send(body)
}
複製程式碼

3. 升級 jQuery.ajax 滿足 Promise 規則

promise的好處
1.完全不需要記是傳 success還是成功或是error還是fail，只需要then(這裡放成功，這裡放失敗)，標準化操作
2. 可以對同一個狀態進行多次處理

3.1 升級 jQuery.ajax 滿足 Promise 規則

window.jQuery.ajax = function({url, method}) { // 傳參是 es6解構賦值
        return new Promise ( function(resolve, reject){  // 這一行很關鍵
                let request = new XMLHttpRequest()
                request.open(method, url)
                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()
        })
}
複製程式碼

相關文章