美文网首页
35 高级:自己实现AJAX

35 高级:自己实现AJAX

作者: Ga611 | 来源:发表于2019-02-27 16:18 被阅读0次
    • 用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

          本文链接:https://www.haomeiwen.com/subject/atmdgftx.html