task37 自己实现AJAX

本课代码

1. https://github.com/FrankFang/nodejs-test-cors/blob/6b7c53c0eccb712213b7ed9640e8ca7d21620166/main.js
2. https://github.com/FrankFang/nodejs-test-cors/blob/e86d62069b517d35374eecd6b8a3d4b81402d48a/main.js

AJAX 的所有功能

• 客户端的JS发起请求（浏览器上的）
• 服务端的JS发送响应（Node.js上的）

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

image.png

image.png

image.png

image.png

image.png

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

image.png

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

image.png

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

image.png

image.png

image.png

还记得 window.jQuery 吗

window.jQuery = function(node){
    let nodes = {
        0: node,
        length: 1
    }
    return {
        addClass: function(){

        }
    }
}

今天写 window.jQuery.ajax

window.jQuery.ajax = function(options){
  // 代码
}

image.png

image.png

image.png

image.png

image.png

给参数命名

image.png

image.png

可以传一个参数，也可以传两个参数⬆️

• ES6语法之解构赋值

  
  
  

  ES6语法之解构赋值.png
  
  
  

  image.png

• 用解构交换a和b的值

  
  
  

  image.png

回调是啥

call a function
call a function back

callback

回调的问题

问题是每个程序员的回调名不一样

image.png

不看文档的话没法知道这些回调的名称

Promise 解决了这个问题

请背下这个代码

function xxx(){
    return new Promise((f1, f2) => {
        doSomething()
        setTimeout(()=>{
            // 成功就调用 f1，失败就调用 f2
        },3000)
    })
}

xxx().then(success, fail)

// 链式操作
xxx().then(success, fail).then(success, fail)

image.png

image.png

• Promise是一个函数，传的参数是一个函数，返回了一个哈希，key-value，其中一个key就是then

image.png