XMLHttpRequest2.0

XMLHttpRequest2.0

XMLHttpRequest是一个javascript内置对象，使得Javascript可以进行异步的HTTP通信。2008年2月，就提出了XMLHttpRequest Level 2 草案。

老版本的XMLHttpRequest的缺点：

1. 仅支持传输文本数据，无法传说二进制文件，比如图片视频等。
2. 传输数据时，没有进度信息，只能提示完成与否。
3. 受到了"同源策略"的限制

新版本的功能：

1. 可以设置timeout超时时间
2. 可以使用formData对象管理表单数据
3. 允许请求不同域名下的数据（跨域）
4. 支持上传二进制文件
5. 可以获取数据传输的进度信息

注意：我们现在使用new XMLHttpRequest创建的对象就是2.0对象了，我们之前学的是1.0的语法，现在学习一些2.0的新特性即可。

1. timeout设置超时

xhr.timeout = 3000;//设置超时时间
xhr.ontimeout = function(){
  alert("请求超时");
}

2. formData管理表单数据

formData对象类似于jquery的serialize方法，用于管理表单数据

使用特点： 
1. 实例化一个formData对象， new FormData(form); form就是表单元素
2. formData对象可以直接作为 xhr.send(formData)的参数。注意此时数据是以二进制的形式进行传输。
3. formData有一个append方法，可以添加参数。formData.append("id", "1111");
4. 这种方式只能以post形式传递，不需要设置请求头，浏览器会自动为我们设置一个合适的请求头。
参数: form 表单元素
    //(1) 没有传参, 表示没有收集 form 表单数据
    //(2) 如果传了 form元素, 将来就会收集 表单元素 中所有设置了 name 属性的值, 进行提交

代码示例：

//1. 使用formData必须发送post请求
    xhr.open("post", "02-formData.php");
    
//2. 获取表单元素
var form = document.querySelector("#myForm");
//3. 创建form对象，可以直接作为send的参数。
var formData = new FormData(form);

//4. formData可以使用append方法添加参数
formData.append("id", "1111");
// formData.append("file", 文件对象)
//formData.append("file", file);

//5. 发送，不需要指定请求头，浏览器会自动选择合适的请求头
xhr.send(formData);

3. 文件上传

以前，文件上传需要借助表单进行上传，但是表单上传是同步的，也就是说文件上传时，页面需要提交和刷新，用户体验不友好，xhr2.0中的formData对象支持文件的异步上传。

var formData = new FormData();
//获取上传的文件，传递到后端
var file = document.getElementById("file").files[0];
formData.append("file", file);
xhr.send(formData);

  <script>

    var fileInp = document.getElementById("fileInp");
    var div = document.querySelector("div");

    // 当用户重新选择文件后
    fileInp.onchange = function() {
      console.dir( fileInp );
      // 将文件对象从 fileInp 中取出
      var file = fileInp.files[0]; // 文件对象
      
      // 异步上传文件
      var xhr = new XMLHttpRequest();
      // formData 必须是 post 请求
      xhr.open("post", "file.php");

      // formData 不用设置请求头
      var formData = new FormData();

      // formData.append("file", 文件对象)
      formData.append("file", file);

      xhr.send( formData );      

      xhr.onreadystatechange = function() {
        if ( xhr.readyState === 4 ) {
          if ( xhr.status === 200 ) {
            console.log( xhr.responseText );
            var imgUrl = xhr.responseText;
            div.innerHTML = '<img src="' + imgUrl + '">';
          }
        }
      }
    }
  </script>

4. 显示文件进度信息

xhr2.0还支持获取上传文件的进度信息，因此我们可以根据进度信息可以实时的显示文件的上传进度。

1. 需要注册 xhr.upload.onprogress = function(e){} 事件，用于监听文件上传的进度.注意：需要在send之前注册。
2. 上传的进度信息会存储事件对象e中
3. e.loaded表示已上传的大小   e.total表示整个文件的大小

代码参考：

xhr.upload.onprogress = function (e) {
  
  inner.style.width = (e.loaded/e.total*100).toFixed(2)+"%";
  span.innerHTML = (e.loaded/e.total*100).toFixed(2)+"%";
}

xhr.send(formData);

如果上传文件超过8M，php会报错，需要进行设置，允许php上传大文件。

5. 跨域资源共享(CORS) ( 兼容性IE10+ )