35 高级:自己实现AJAX

  • 用JS设置请求头
设置第一部分:request.open('get','/xxx')
设置第二部分:request.setRequestHeader('content-type','x-www-form-urlencoded')
设置第三部分:request.send('key1=value1&key2=value2')
  • 用JS获取响应头
获取第一部分:request.status / request.statusText
获取第二部分:request.getResponseHeader('Content-Type') / request.getAllResponseHeaders()
获取第四部分:request.responseText
  • 为了避免写的API参数太多而混乱的情况,一般把要传入的多个参数变成对象,把该对象的key定下来,就相当于参数命名(ES6的解构赋值)
  • 即使响应是4开头的状态码,也会有第四部分,也可以读取第四部分
  • 通过arguments.length来使得函数可以接收不固定个数的参数
function f1(x1[,x2]){
  if(arguments.length === 1){......}
  else if(arguments.length === 2){......}
}

上述代码可以只传一个参数,也可以传多个参数

  • 假如函数形参少于实际参数,传入的实际参数可以从arguments对象中获得

    image.png

  • es6 解构赋值


    image.png
  • jquery.ajax()会将响应里content-Type是json的内容进行parse将字符串转换成对象

  • 实现jQuery.ajax的封装

window.jQuery.ajax = function({url,method,body}){//函数参数传入用到了es6的解构赋值
  return new Promise(function(resolve,reject){
      let request = XMLHttpRequest()
      request.open(method,url)
      request.onreadychange = function(){
          if(request.readyState === 4){
              if(request.status === 200){resolve()}
              else{reject()}    
          }
      }
      request.send()
    })
}

你可能感兴趣的:(35 高级:自己实现AJAX)