js-XMLHttpRequest 2级

###1. XMLHttpRquest 2级

  1)   FormData

    现代web应用中频繁使用的一项功能就死表单数据的序列化, XMLHttpRquest 2级为此定义了FormData类型

    FormData为序列化表单以及创建于表单格式相同数据(用于通过XHR传输)提供了便利

      eg:  var data = new FormData();

           data.append("name","Tom")      //   append(键  ,  值)

    在post请求表单提交数据时,可直接使用该方法对表单数据进行处理

    eg:     var form = document.getElementById("user-info")      //  id为user-info的form表单

         xhr.send(new FormData(form))

  2)  超时设定 timeout属性,表示请求在等待响应多少毫秒之后就终止,触发该事件后会调用ontimeout事件处理程序

    eg:   xhr.timeout =  1000;        //   将超时设置为1s

       xhr.ontimeout = function(){

         alert("Request did not return in a second");     //  输出“请求没有立即返回”

       }

  3) overrideMimeType()  用于重写XHR响应的MIME类型

  4)进度事件

    6中进度事件

      loadstart:   在接受到相应数据的第一个字节是触发

      progress:   在接受响应期间持续不断触发

      error:   在请求发生错误时

      abort:   调用abort()  触发

      load:    在接收到完整的响应数据是触发

      loadend:   在通信完成或触发error·abort或load事件后触发

    4.1)  load事件

      用以替代readystatechange事件,响应接受完毕后将触发load事件,因此也没有必要去检查readyState属性。

      而onload事件处理程序会接收到一个event对象,其target属性就指向xhr对象实例,可以访问到XHR对象的所有方法和属性

    4.2)progress事件

      会接收到一个event对象,其target属性是XHR对象,但包含着三个额外的属性

        lengthComputable   表示进度信息是否可用的布尔值

        position  表示已经接受的字节数

        totalSize  表示根据Content-Length 响应头部确认的预期字节数

      可以根据这些信息为用户创建一个进度指示器       为确保正常执行,必须在调用open方法之前添加该事件处理程序

      eg: 

         xhr.onprogress = function(event){

            var obj = document.getElementById("xxx");

            if(event.lengthComputable){

              obj.innerHTML = "Received" + event.position + "of" + event.totalSize + "bytes"    // 收到了xxx字节中的xxx个

            }

          }

原文地址:https://www.cnblogs.com/john-hwd/p/10507868.html