这是我参与「第五届青训营」伴学笔记创作活动的第 11 天

XMLHttpRequest Level2（新版xhr）

1. 旧版的缺点：

• 只支持文本数据的传输，无法用来上传文件
• 传送和接收数据时，没有进度信息，只能提示有没有完成

2. 新版特性：

• 可以设置http请求的时限
• 可以使用FormData对象管理表单数据
• 可以上传文件
• 可以获得数据传输的进度信息

设置http请求时限

1. xhr新增了timeout属性（单位为毫秒）

xhr.timeout=3000;

2. 过了自定义的时限，自动停止HTTP请求，然后调用timeout事件

xhr.ontimeout=function(event){
  //事件回调函数
}

FormData对象管理表单数据

      // 1、创建FormData对象实例
      var fd = new FormData();
//可以直接获取网页中已存在的表单form   创建FormData对象
      //var fd = new FormData(form);

      // 2、调用append函数   fd中追加数据
      fd.append("uname", "zs");
      fd.append("upwd", "123456");
        // 3、创建xhr对象
      var xhr = new XMLHttpRequest();
    //   4、指定请求类型与URL地址
      xhr.open("POST", "http://www.liulongbin.top:3006/api/formdata");

    //   5、直接提交FOrmData对象   与网页表单的效果完全一样
    //   formdata对象作为请求体数据，已经不需要任何额外的请求头部了
      xhr.send(fd);

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(JSON.parse(xhr.responseText));
        }
      };

      var form = document.getElementsByTagName("form")[0];

      form.addEventListener("submit", function (e) {
        //阻止表单的默认提交行为
        e.preventDefault();

        // 创建FormData对象
        var fd = new FormData(form);
        // 创建xhr对象
        var xhr = new XMLHttpRequest();
        //  指定请求类型与URL地址
        xhr.open("POST", "http://www.liulongbin.top:3006/api/formdata");
        //  直接提交FOrmData对象   与网页表单的效果完全一样
        xhr.send(fd);
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(JSON.parse(xhr.responseText));
          }
        };
      });

上传文件

    <!-- 1、文件选择框 -->
    <input type="file" id="file1" />
    <!-- 2、上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <!-- 3、img标签，显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800" />     


      // 1、获取上传文件的按钮
      var btnUpload = document.getElementById("btnUpload");
      //   2、为按钮添加点击事件
      btnUpload.addEventListener("click", function () {
        // 3、获取到选择的文件列表
        var files = document.getElementById("file1").files;
        if (files.length <= 0) {
          return alert("请选择要上传的文件！");
        }
        // 4、向fd中添加文件
        var fd = new FormData();
        fd.append("avatar", files[0]);

        var xhr = new XMLHttpRequest();
        // 上传文件只能用POST请求方式
        xhr.open("POST", "http://www.liulongbin.top:3006/api/upload/avatar");
        xhr.send(fd);
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            if (data.status === 200) {
              // 上传文件成功
              document.getElementById("img").src =
                "http://www.liulongbin.top:3006" + data.url;
            } else {
              console.log(data.message);
            }
          }
        };
      });

获取数据传输的进度信息

可以通过监听xhr.upload.onprogress事件，获取文件的上传进度

        // 获取进度
        xhr.upload.onprogress = function (event) {
          if (event.lengthComputable) {

            //     lengthComputable是布尔值，表示该进度信息是否可用
            //     event.position   event.loaded都表示已经接受到的字节数
            //     event.totalSize    event.total都表示需要接受的总字节数

            var progress = Math.ceil((event.loaded / event.total) * 100);
            console.log(progress);
          }
        };

jQuery实现文件上传

      $(function () {
        $("#btn").on("click", function () {
          var files = $("#file1")[0].files;
          if (files.length <= 0) return alert("请选择文件！");

          var fd = new FormData();
          fd.append("avatar", files[0]);
          $.ajax({
            method: "POST",
            url: "http://www.liulongbin.top:3006/api/upload/avatar",
            data: fd,
            contentType: false,
            processData: false,
            success: function (res) {
              console.log(res);
            },
          });
        });
      });

jQuery实现loading效果

1. ajaxStart（callback）

• ajax请求开始时，执行ajaxStart函数，在回调函数中显示loading效果
• 该函数只能添加在document文档上，会监听当前文档内所有的ajax请求

        $(document).ajaxStart(function(){
            $("img").show();
        })

        $(document).ajaxStop(function(){
            $("img").hide();
        })

---

AXIOS