1. JS operation request and response

HTTP Packet Format Request Format GET/XXX HTTP/1.1 Part 1 HOST: jack.com:8002 Part 2 Key :value Form Content-Type: Application/x-www-urL-encoded blank line HTTP/1.1 200 OK Content-type: Text/HTML Part 2 Key :value Form Part 3 Empty line <! DOCTYPE HTML > Part 4 Response body < HTML >.... </html>Copy the code

1.1 Can JS set any request header? can

Request. Open (‘get’, ‘/ XXX ‘) request. SetHeader (‘content-type’) ‘X-www-form-urlencoded ‘) 四 区 Request. Send (‘a=1&b=2’)

1.2 Can JS get any response header? can

The first part of the request. The status/request. The second part statusText request. The getResponseHeader ()/request. The getAllResponseHeaders () the fourth part request.responseText

JS operation request and response

1.3 Take a look at the macro

2. Write window.jquery.ajax (wrapper)

2.1 What are we doing from a memory map perspective

As an object, we assume that it in stack memory address is Addr89, the corresponding stack memory with an object 89. Now we need to add a new key to 89, ajax, whose value corresponds to the body of the function 101, which is what we’re going to write.

window.jQuery.ajax = function(options){// code (that's what we're writing)}Copy the code

Ajax system to learn jQuery. Ajax, to see more documents http://cndevdocs.com/

2.2 Encapsulate a 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)
}
Copy the code

3. Upgrade jquery. ajax to meet the Promise rule

Benefits of promise 1. There is no need to remember whether to pass success or success, error or fail, only then(put success here, put failure here), standardized operation 2. The same state can be processed more than once

3.1 Upgrade jQuery. Ajax meets the Promise rule

window.jQuery.ajax = function({url, method}) {// The parameter is es6 destruct assignmentreturn new Promise ( function(resolve, reject){// This line is criticallet 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()
        })
}
Copy the code