35-高级：自己实现AJAX

2018-08-31 本文已影响0人格林姆大师

一、JS操作请求与响应

之前，已经了解过请求与响应都由4部分组成，那么在使用AJAX发请求时能否自由的设置或是获取这4部分？？？

1. JS可以设置任意请求 Header 吗？？

<script type="text/javascript">
    button.addEventListener('click',(e)=>{
        let request = new XMLHttpRequest()
        request.open('post','http://jack.com:8002/xxx')//1-此处设置请求的第一部分
        //的方法，协议，路径以及第二部分的HOST

        request.setRequestHeader('frank','18')//2-此处设置请求的第二部分
        request.setRequestHeader('Content-Type','x-www-form-urlencoded')

        request.send('此处设置请求的第4部分')//3-此处设置请求的第四部分
        request.onreadystatechange = ()=>{
            if(request.readyState === 4){
                console.log('请求响应完毕')
                if(request.status >= 200 && request.status < 300 ){
                    console.log('请求成功')
                    console.log(typeof request.responseText) //string
                    console.log(request.responseText)
                    let string = request.responseText
                    let object = window.JSON.parse(string)
                    console.log(object)
                }else if(request.status >= 400){
                    console.log('请求失败')
                }
            }
        }
    })
</script>

如上：
1. request.open('post','http://jack.com:8002/xxx')
请求的第一部分的内容可以在request.open()这一API中自由设置；

2. request.setRequestHeader('frank','18')
请求的第二部分的内容可以在request.setRequestHeader()这一API中设置，但是并不是所有KEY能完全自由设置，有些KEY比如User-Agent就无法自行设置；
request.setRequestHeader()必须在 open 和 send 之间；

3. request.send('此处设置请求的第4部分')
请求的第四部分的内容可以在request.send()这一API中设置，在chrome下，如果使用GET方法，即便设置了第四部分，在控制台也不显示第四部分的内容。

2. JS可以获取任意响应 Header 吗？？

<script type="text/javascript">
    button.addEventListener('click',(e)=>{
        let request = new XMLHttpRequest()
        request.open('post','http://frank.com:8001/xxx')//1-此处设置请求的第一部分
        //的方法，协议，路径以及第二部分的HOST

        request.setRequestHeader('frank','18')//2-此处设置请求的第二部分
        request.setRequestHeader('Content-Type','x-www-form-urlencoded')

        request.send('此处设置请求的第4部分')//3-此处设置请求的第四部分
        request.onreadystatechange = ()=>{
            if(request.readyState === 4){
                console.log('请求响应完毕')
                console.log(request.status)//获取响应的状态码--200
                console.log(request.statusText)//获取响应中的---OK

                if(request.status >= 200 && request.status < 300 ){
                    console.log('请求成功')
              
                    console.log(request.getAllResponseHeaders())//获取响应的第二部分的所有内容
                    console.log(request.getResponseHeader('Content-Type'))//获取响应的第二部分的指定内容

                    let string = request.responseText//获取响应的第四部分的内容
                }else if(request.status >= 400){
                    console.log('请求失败')
                }
            }
        }
    })
</script>

如上，

第一部分：request.status和request.statusText；
第二部分：request.getAllResponseHeaders()和request.getResponseHeader('xx')；
第四部分：request.responseText；

二、JS终于圆满了

三、一点点TCP知识

浏览器是下载完全部的内容（readystate === 4），再判断响应的状态码是200还是400吗？？？？
答：不是，响应的第一部分是先传送的，也就是先知道响应码的。
在之前的代码里：

        request.onreadystatechange = ()=>{
            if(request.readyState === 4){
                console.log('请求响应完毕')
                console.log(request.status)//获取响应的状态码--200
                console.log(request.statusText)//获取响应中的---OK
                if(request.status >= 200 && request.status < 300 ){

之所以先判断 request.readyState 后判断 request.status ，不是因为 4 比 200 先到，而是只有下载完了才能读取内容，才有意义。实际 200 比 4 先到。

四、自己实现jQuery

实现的代码如下：

window.jQuery = function(nodeOrSlector){
    let nodes = {}
    nodes.addClasses = function(){}
    nodes.html = function(){}
    return nodes
}    


window.jQuery.ajax = function(options){

//知识点---1
    let url
    if(arguments.length == 2){
        url = arguments[0]
        options = arguments[1]
    }else if(arguments.length == 1){
        url = options.url
    }


    let method = options.method
    let body = options.body
    let headers = options.headers
    let request = new XMLHttpRequest()

    request.onreadystatechange = ()=>{
        if(request.readyState === 4){
            console.log('请求响应完毕')
            if(request.status >= 200 && request.status < 300 ){
                console.log('请求成功')
//知识点---2
                options.successFn.call(undefined,request.responseText)

            }else if(request.status >= 400){
                console.log('请求失败')
//知识点---3
                options.failFn.call(undefined,request)//请求失败时，能否有responseText；
            }
        }
    }
    request.open(method,url)//1-此处设置请求的第一部分
    //的方法，协议，路径以及第二部分的HOST
    for(let key in headers){
        let value = headers[key]

//问题---1
        request.setRequestHeader(key,value)//2-此处设置请求的第二部分
    }

    request.send(body)//3-此处设置请求的第四部分

}

//知识点---4
function f1(responseText){}
function f1(responseText){}

button.addEventListener('click',(e)=>{
   let obj = {
    method:'post',

//问题---1
    url: 'http://frank.com:8001/xxx',

    body: 'username=1&password=2',
    headers: {
        'frank': '18',
        'Content-Type': 'application/x-www-form-urlencoded',
    },

//知识点---4
    successFn: (x)=>{
        console.log('success')
        console.log(x)
        f1.call(undefined,x)
        f2.call(undefined,x)
    },
    failFn: (x)=>{
        console.log('fail')
        console.log(x)
    },
   }
   window.jQuery.ajax(obj)
})

以上代码中有一些知识点需要注意：

知识点---1：当传过来的参数可能是1个或是2个，比如第一个参数传 url ，第二个参数传其他的；那么就需要用到上述方法来处理；另外，箭头函数没有 arguments 这个参数。
知识点---2：此处用到的函数调用方式就是 callback ，也就是，此处执行的函数并不是当前作用域所声明的，也不是直接调用外部已经声明的函数，而是通过传参传过来的（即将函数作为一个实参传过过来）；
知识点---3：在请求成功时，会响应请求体，也就是会有 request.responseText，那么，请求失败时，能否有responseText？？？？答：YES。只要后台有响应 request.responseText 过来，浏览器就能收到。
知识点---4：将多个函数打包传参过去的方法。

测试时遇到的问题：当使用跨域请求时，设置 header 不成功，同样的代码，不跨域时，执行正确；不设置 header 时，跨域也能正常执行，Why？？？？？

五、ES6语法之解构赋值

六、第一次了解Promise

以上，是自己用 JS 封装了一个 ajax，如果直接使用jQuery的ajax，如下：

button.addEventListener('click',()=>{
    $.ajax({
        url: 'http://jack.com:8002/xxx',
        method: 'get',
        success: (x)=>{
            console.log(x)
        },
        error: (x)=>{
            console.log(x)
        },        
    })
})

或者：

function success(responseText){
    console.log(responseText)
}

function error(request){
    console.log(request)
}

button.addEventListener('click',()=>{
    $.ajax({
        url: 'http://jack.com:8002/xxx',
        method: 'get',      
    }).then(success,error)
})

而，第二种方式还可以简化为：

button.addEventListener('click',()=>{
    $.ajax({
        url: 'http://jack.com:8002/xxx',
        method: 'get',      
    }).then(
        (responseText)=>{
            console.log(responseText)
        },(request)=>{
            console.log(request)
        })
})

简化到这一步，才达到我们的目的-----也就是不用去查看文档，成功时回调的函数名，失败时回调函数的函数名，只用记得，then 里面的第一个参数传成功时需要回调的函数，后一个参数传失败时的回调即可。
这就是 Promise 的第一个意义：不用知道成功时的回调函数名是 success 还是 ‘成功’，亦或是其他名称。

jQuery中的.then()是可以重复链式操作的，如下：

<script type="text/javascript">
    button.addEventListener('click',()=>{
        $.ajax({
            url: 'http://frank.com:8888/xxx',
            method: 'get',     
        }).then(
        (success)=>{
            console.log(success)
            return 'success'
        },
        (fail)=>{
            console.log(fail)
            return 'fail'
        }).then(
        (success2)=>{
            console.log(success2)
        },
        (fail2)=>{
            console.log(fail2)
        }
        )
    })
</script>

在上面这种操作中，上一个.then()中的两个函数的 return 值会作为下一个.then()中的对应的函数的参数传递过去。这样，如果我们要对一个结果进行多次处理，只要多次.then()就可以了，
注意：在使用jQuery.ajax()时，如果responseText的Content-Type为json，那么jQuery.ajax()返回给浏览器的responseText就会是一个json格式的对象而不是字符串类型。也就是jQuery.ajax()会偷偷地给我们转换了responseText。

以上，就是jQuery中的.then()的调用方式，那么，在自己实现的ajax中如何实现.then()的功能？？？
此时，就需要用到Promise了，Promise是 window 里的一个参数window.Promise；

window.Promise使用格式为：return new Promise(function(resolve,reject){........})
window.Promise使用格式为：return new Promise(function(resolve,reject){........})
window.Promise使用格式为：return new Promise(function(resolve,reject){........})
window.Promise使用格式为：return new Promise(function(resolve,reject){........})
window.Promise使用格式为：return new Promise(function(resolve,reject){........})
Promise的功能简化模式如下：

window.Promise = function(fn){
    //............中间代码省略..
    return {
        then: function(){}
    }
}

Promise就是一个构造函数，并且所传参数fn也是函数，最后返回一个Promise对象，对象里有一个.then方法。jQuery.ajax()的返回值就是一个Promise对象。

使用Promise改写后的代码如下：

window.jQuery.ajax = function(url,method,body,headers){
    return new Promise(function(resolve,reject){
        let request = new XMLHttpRequest()
        request.onreadystatechange = ()=>{
            if(request.readyState === 4){
                if(request.status >= 200 && request.status < 300 ){
                    console.log('请求成功')
                    resolve.call(undefined,request.responseText)
                }else if(request.status >= 400){
                    console.log('请求失败')
                    reject.call(undefined,request)//请求失败时，能否有responseText
                }
            }
        }
        request.open(method,url)//1-此处设置请求的第一部分
        //的方法，协议，路径以及第二部分的HOST
        for(let key in headers){
            let value = headers[key]
            request.setRequestHeader(key,value)//2-此处设置请求的第二部分
        }

        request.send(body)//3-此处设置请求的第四部分     
    })
}

button.addEventListener('click',(e)=>{
   window.jQuery.ajax('http://frank.com:8888/xxx','post','username=1&password=2',{
        'frank': '18',
        'Content-Type': 'application/x-www-form-urlencoded',
    }).then((x)=>{
                console.log('success2')
                console.log(x)
            },(x)=>{
                console.log('error2')
                console.log(x)
            })
})

改写前，window.jQuery.ajax()返回值是ubdefined，使用Promise改写后的返回值是一个Promise对象。这个对象有一个.then()方法，.then()返回的仍是一个Promise对象。

①. 111
②. 222
③. 333