35-高级：自己实现AJAX

一、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对象。

  1. 111
  2. 222

①. 111
②. 222
③. 333

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 200,527评论 5赞 470
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,314评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 147,535评论 0赞 332
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,006评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,961评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,220评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,664评论 3赞 392
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,351评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,481评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,397评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,443评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,123评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,713评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,801评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,010评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,494评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,075评论 2赞 341

推荐阅读更多精彩内容

  • 2018-06-01
    # Ajax标签（空格分隔）： 笔记整理---[TOC]### 从输入网址开始：- 在学习ajax之前，你应该先了...
    V8阅读 248评论 1赞 0
  • Promise笔记
    Promise学习（上）： 资料： JavaScript Promise迷你书 原著：azu / 翻译：liubi...
    你隔壁的陌生人阅读 555评论 0赞 1
  • Promise 对象
    Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函...
    neromous阅读 8,693评论 1赞 56
  • Promise分析与总结
    title: promise总结 总结在前 前言 下文类似 Promise#then、Promise#resolv...
    JyLie阅读 12,210评论 1赞 21
  • Promise 对象
    一、Promise的含义 Promise在JavaScript语言中早有实现，ES6将其写进了语言标准，统一了用法...
    Alex灌汤猫阅读 816评论 0赞 2