带着你一步一步自己去实现window.jquery.ajax

前言：最近后台让帮个忙，改一下之前他们的后台管理系统的代码，看到了request = new XMLHttpRequest()，request.onreadystatechange等，很是不理解，后来一顿搜索，才发觉这个是.ajax的原生写法，而我一直在工作中都是只是用的.ajax。同时令我感到很惊奇的是，竟然还搜出了很多面试题，就是原生方法写ajax，既然这样，那就重视一下，让我们尝试自己去实现window.jquery.ajax吧~~

关键词：window.jquery.ajax,promise，回调函数,简单的解构赋值~~......

正文：
1、最初版本
我们就不从最开始写了，我觉得这样很浪费时间，我觉得下面这些代码比较好理解，所以就从这里开始吧：

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
  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)
}
myButton.addEventListener('click', (e)=>{
  window.jQuery.ajax( '/frank', 'get','a=1&b=2', (x)=>{console.log(1)},(y)=>{console.log(2)})
})

其实，代码的重点部分是从window.jQuery.ajax来开始的，我们把它进行了封装，等到点击事件的时候，我们调用传入参数。但是不是和我们正常用的$.ajax还是有很大的区别？当我们直接看我们传的参数的时候，我们无法无法确定他们到底代表着什么意义，并且，当我们是get方法的时候，body所代表的第四部分是不需要传的，那我们就不传会不会报错呢，这就产生了很多的问题，那就接着让我们来进行一下优化：
2、升级版本
首先怎么优化呢？根据上面暴露出来的问题，我们需要在调用的时候传一个有结构的参数，在js里面，只有对象是有结构的，那我们就把参数变成一个有结构的对象。

window.jQuery = function(nodeOrSelector){
  let nodes = {}
  nodes.addClass = function(){}
  nodes.html = function(){}
  return nodes
}
window.$ = window.jQuery

window.jQuery.ajax = function(options){
  let url = options.url;
  let methods= options.methods;
  let body= options.body;
  let successFn= options.successFn;
  let failFn= options.failFn;

  let request = new XMLHttpRequest()
  request.open(method, url) // 配置request
  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)
}
myButton.addEventListener('click', (e)=>{
  window.jQuery.ajax({
    url:/xxx,
    methods:get,
    successFn:(x)=>{
        console.log(x)
    },
    failFn:() =>{}
  })
})

给你们出个问题，代码中的console.log(x),这个x是什么？答：request.responseText.上文中一层一层去查successFn，你会注意到有：successFn.call(undefined, request.responseText)这么一句。
在这里点出一个js中的一个定义，回调函数，先把定义给大家说一下，什么是回调函数：
函数A作为参数(函数引用)传递到另一个函数B中，并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式)，就叫做匿名回调函数。
所以，大家找到了吗？上述代码中，哪个是回调函数？
successFn和failFn都是回调函数。
2、二次升级版本
我们这里，只传了一个参数，如果你想传两个参数该怎么传呢？这里，我们以另一个参数为URL来举例：

window.jQuery = function(nodeOrSelector){
  let nodes = {}
  nodes.addClass = function(){}
  nodes.html = function(){}
  return nodes
}
window.$ = window.jQuery

window.jQuery.ajax = function(options){
  let url
  if(arguments.length === 1){
    url = options.url
  }else if(arguments.length === 1){
    url = arguments[0];
    options = arguments[1]
  }
  let methods= options.methods;
  let body= options.body;
  let successFn= options.successFn;
  let failFn= options.failFn;
  let headers= options.headers;

  let request = new XMLHttpRequest()
  request.open(method, url) // 配置request
  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)
}
myButton.addEventListener('click', (e)=>{
  window.jQuery.ajax({
    url:/xxx,
    methods:get,
    successFn:(x)=>{
        console.log(x)
    },
    failFn:() =>{}
  })
})

3、三次升级版本
大家看了二次升级的版本，有没有觉得哪里别扭？那四个let多麻烦多别扭，这里，在给大家介绍一种依靠es6的优化方法：
解构赋值：

window.jQuery = function(nodeOrSelector){
  let nodes = {}
  nodes.addClass = function(){}
  nodes.html = function(){}
  return nodes
}
window.$ = window.jQuery

window.jQuery.ajax = function({methods，body，successFn， failFn，headers}){//变化在这里----------意思是直接拿到这几个变量，然后同时再声明这几个变量
  let url
  if(arguments.length === 1){
    url = options.url
  }else if(arguments.length === 1){
    url = arguments[0];
    options = arguments[1]
  }
  // 第一步 let  {methods，body，successFn， failFn，headers} = options //变化在这里-------------这一句等于上面的五句。

  let request = new XMLHttpRequest()
  request.open(method, url) // 配置request
  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)
}
myButton.addEventListener('click', (e)=>{
  window.jQuery.ajax({
    url:/xxx,
    methods:get,
    successFn:(x)=>{
        console.log(x)
    },
    failFn:() =>{}
  })
})

4最终版本：

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)
    }
  })
})