自己封装AJAX

Posted on

  1. 用原生 JS 写出一个 AJAX 请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    let request = new XMLHttpRequest()
    request.open('get', '/xxx') // 配置request
    request.send()
    request.onreadystatechange = ()=>{
      if(request.readyState === 4){ 
        if(request.status >= 200 && request.status < 300){
          console.log('说明请求成功')
        }else if(request.status >= 400){
          console.log('说明请求失败') 
        }
      }
    }

  2. 自己封装一个封装一个 jQuery.ajax

jQuery.ajax(url,method,body,success, fail)

满足这种 API。

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
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. 升级刚刚的 jQuery.ajax 满足 Promise 规则
    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)}
      )

    })