JS 基础 - 实现 AJAX

frontEnd

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
window.jQuery = function(nodeOrSelector){
  let nodes = {}
  nodes.addClass = function(){}
  nodes.html = function(){}
  return nodes
}
window.$ = window.jQuery

window.jQuery.ajax = function({url, method, body, successFn, failFn, headers}){
  let request = new XMLHttpRequest()
  request.open(method, url) // 配置request
  for(let key in headers) {
    let value = headers[key]
    request.setRequestHeader(key, value)
  }
  request.onreadystatechange = ()=>{
    if(request.readyState === 4){
      if(request.status >= 200 && request.status < 300){
        successFn.call(undefined, request.responseText)
      }else if(request.status >= 400){
        failFn.call(undefined, request)
      }
    }
  }
  request.send(body)
}

function f1(responseText){}
function f2(responseText){}

myButton.addEventListener('click', (e)=>{
  window.jQuery.ajax({
    url: '/frank',
    method: 'get',
    headers: {
      'content-type':'application/x-www-form-urlencoded',
      'frank': '18'
    },
    successFn: (x)=>{
      f1.call(undefined,x)
      f2.call(undefined,x)
    },
    failFn: (x)=>{
      console.log(x)
      console.log(x.status)
      console.log(x.responseText)
    }
  })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
window.jQuery = function(nodeOrSelector){
  let nodes = {}
  nodes.addClass = function(){}
  nodes.html = function(){}
  return nodes
}
window.$ = window.jQuery

window.Promise = function(fn){
  // ...
  return {
    then: function(){}
  }
}

window.jQuery.ajax = function({url, method, body, headers}){
  return new Promise(function(resolve, reject){
    let request = new XMLHttpRequest()
    request.open(method, url) // 配置request
    for(let key in headers) {
      let value = headers[key]
      request.setRequestHeader(key, value)
    }
    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(body)
  })
}

myButton.addEventListener('click', (e)=>{
  let promise = window.jQuery.ajax({
    url: '/xxx',
    method: 'get',
    headers: {
      'content-type':'application/x-www-form-urlencoded',
      'frank': '18'
    }
  })

  promise.then(
    (text)=>{console.log(text)},
    (request)=>{console.log(request)}
  )

})

AJAX 所有功能

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

  1. JS 可以设置任意请求 header 吗
    第一部分 request.open(‘get’, ‘/xxx’)
    第二部分 request.setHeader(‘content-type’,’x-www-form-urlencoded’)
    第四部分 request.send(‘a=1&b=2’)

  2. JS 可以获取任意响应 header 吗？
    第一部分 request.status / request.statusText
    第二部分 request.getResponseHeader() / request.getAllResponseHeaders()
    第四部分 request.responseText

window.jQuery

1
2
3
4
5
6
7
8
9
10
window.jQuery = function(node){
	let nodes = {
   	0: node,
   length: 1
 }
 return {
 	addClass: function(){
  }
 }
}

实现 window.jQuery.ajax

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

回调是啥

1
2
3
4
call a function
call a function back

callback

回调的问题

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

Promise 解决了以上的问题

重要代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function xxx(){
	return new Promise((f1, f2) => {
		doSomething()
    setTimeout(()=>{
      // 成功就调用 f1，失败就调用 f2
    },3000)
 })
}
 
xxx().then(success, fail)

// 链式操作

xxx().then(success, fail).then(success, fail)


编辑