1、旧版XMLHttpRequest的缺点

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

2、XMLHttpRequest Level2的新功能

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

1、设置请求时限

【语法】：

xhr.timeout = 3000
//上面的语句，将最长等待时间设为 3000 毫秒。过了这个时限，就自动停止HTTP请求。与之配套的还有一个 timeout 事件，用来指定回调函数：
 xhr.ontimeout = function(event){
     alert('请求超时！')
 }

【示例】：

<script>
  var xhr = new XMLHttpRequest();
  // 设置超时事件
  xhr.timeout = 30;
  xhr.ontimeout = function () {
    alert('请求超时了')
  }
  xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
  xhr.send()
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  }
</script>

2、FormData对象管理表单数据

【步骤】：

创建FormDate实例
向FormDate中添加数据
创建xhr对象实例
调用xhr的open()函数
调用xhr的send()函数，传入数据
判断请求状态和服务器响应状态

【代码示例】：

// 1、创建对象实例
  var fd = new FormData();
  // 2、为formDate()添加数据
  fd.append('name', 'zhangsan')
  fd.append('age', 20)
  // 3、创建xhr对象
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
  xhr.send(fd)
  xhr.onreadystatechange = function () {
    // 判断xhr请求的状态和服务器响应状态
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(JSON.parse(xhr.responseText));
    }
  }

【快速获取form表单数据】：

<script>
  var form = document.querySelector('#form1')
  form.addEventListener('submit', function (e) {
    e.preventDefault();
    var fd = new FormData(form);
    var xhr = new XMLHttpRequest();
    xhr.open('POSt', 'http://www.liulongbin.top:3006/api/formdata')
    xhr.send(fd)
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
      }
    }
  })
</script>

3、上传文件

【步骤】：

定义UI结构
验证是否选择文件
向FormData中追加文件
使用xhr发起上传文件的请求
监听onreadyStatechange事件

【示例代码】

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 文件选择框 -->
  <input type="file" id="file1">
  <!-- 上传文件按钮 -->
  <button id="btnOnload">上传文件</button>
  <!-- 验证是否上传成功 -->
  <img src="" alt="" id="imgs" width="800px">
</body>

<script>
  // 1、判断用户是否选中文件
  var btnUpload = document.querySelector('#btnOnload');
  // 2、给按钮添加点击事件
  btnUpload.addEventListener('click', function () {
    // 3、获取文件列表。返回值是一个数组
    var files = document.querySelector('#file1').files
    // 4、判断数组长度
    if (files.length <= 0) return alert('请选择要上传的文件！')
    // 5、创建formData对象 
    var fd = new FormData();
    // 6、向formData中追加文件
    fd.append('avatar', files[0])
    // 7、创建xhr对象
    var xhr = new XMLHttpRequest();
    // 8、调用open函数指定请求方式和请求地址
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
    // 9、调用send函数发起请求
    xhr.send(fd);
    // 10、监听xhr的onreadystatechange事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        if (data.status === 200) {
          // 11、获取图片元素
          var imgs = document.querySelector('#imgs');
          // 12、修改图片的src属性
          imgs.src = 'http://www.liulongbin.top:3006' + data.url
        } else {
          return alert('上传文件失败！！')
        }
      }
    }
  })
</script>

</html>

4、获取数据传输的进度信息

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./lib/bootstrap.css">
  <script src="./lib/jquery.js"></script>
</head>

<body>
  <!-- 文件选择框 -->
  <input type="file" id="file1">
  <!-- 上传文件按钮 -->
  <button id="btnOnload">上传文件</button>
  <!-- 进度条 -->
  <div class="progress" style="width: 500px; margin: 10px;">
    <div class="progress-bar progress-bar-striped active" id="percent" style="width: 0%;">0%</div>
  </div>
  <!-- 验证是否上传成功 -->
  <img src="" alt="" id="imgs" width="500px">
</body>

<script>
  // 1、判断用户是否选中文件
  var btnUpload = document.querySelector('#btnOnload');
  // 2、给按钮添加点击事件
  btnUpload.addEventListener('click', function () {
    // 3、获取文件列表。返回值是一个数组
    var files = document.querySelector('#file1').files
    // 4、判断数组长度
    if (files.length <= 0) return alert('请选择要上传的文件！')
    // 5、创建formData对象 
    var fd = new FormData();
    // 6、向formData中追加文件
    fd.append('avatar', files[0])
    // 7、创建xhr对象
    var xhr = new XMLHttpRequest();
    // 13、显示文件上传进度
    xhr.upload.onprogress = function (e) {
      if (e.lengthComputable) {
        var proceComplate = Math.ceil((e.loaded / e.total) * 100)
        // 获取进度条
        var percent = document.querySelector('#percent');
        percent.style.width = proceComplate + '%'
        percent.innerText = proceComplate + '%'
      }
    }
    xhr.upload.onload = function () {
      $('#percent').removeClass().addClass('progress-bar progress-bar-success')
    }
    // 8、调用open函数指定请求方式和请求地址
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
    // 9、调用send函数发起请求
    xhr.send(fd);
    // 10、监听xhr的onreadystatechange事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        if (data.status === 200) {
          // 11、获取图片元素
          var imgs = document.querySelector('#imgs');
          // 12、修改图片的src属性
          imgs.src = 'http://www.liulongbin.top:3006' + data.url
        } else {
          return alert('上传文件失败！！')
        }
      }
    }
  })
</script>

</html>