前端培训-中级阶段（21）- xhr2、FormData（2019-10-17期）

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

AJAX 我们肯定不陌生，低版本IE使用new ActiveXObject("Microsoft.XMLHTTP")，其他浏览器使用new XMLHttpRequest()。
通过浏览器给我们的接口来实现通信交互，HTML 5 的概念形成后，W3C 开始考虑标准化这个接口。2008年2月，就提出了XMLHttpRequest Level 2 草案。

XMLHttpRequest Level 2 的新功能

1. 不止支持文本数据的接收。还添加了更多类型的支持，如: blob、arrayBuffer。
   通过设置 XMLHttpRequest.responseType='blob' 来实现，默认值为 text。
   老办法

    //告知浏览器自定义数据
    xhr.overrideMimeType("text/plain; charset=x-user-defined");
    // 还原成二进制
    for (var i = 0, len = binStr.length; i < len; ++i) {
       var c = binStr.charCodeAt(i);
       var byte = c & 0xff;
    }

2. 同理也添加了支持发送数据的类型

   XMLHttpRequest.send();
   XMLHttpRequest.send(ArrayBuffer data);
   XMLHttpRequest.send(ArrayBufferView data);
   XMLHttpRequest.send(Blob data);
   XMLHttpRequest.send(Document data);
   XMLHttpRequest.send(DOMString? data);
   XMLHttpRequest.send(FormData data);

3. 增加了跨域请求的能力
   支持了 CORS（Cross-origin resource sharing，跨域资源共享） 跨域方法。
4. 增加了获得数据传输的进度信息的能力。
   下载 progress 事件，为 xhr.onprogress。
   上传 progress 事件，为 xhr.upload.onprogress。

   event.loaded / event.total（已传输/需要传输的总字节）。
   如果event.lengthComputable不为真，则event.total等于0。

   之前判断是否成功需要监听xhr.onreadystatechange判断xhr.readyState == 4 && xhr.status == 200来确定。新增加了onload、onabort、onerror、onloadstart、onloadEnd来判断各个阶段。

5. 增加了超时限制
   通过设置xhr.timeout = 3000;来实现，默认值为0，意味着永不超时。如果请求超时会触发ontimeout事件

FormData

之前我们上传文件，依赖表单提交。异步上传的话，依赖iframe。
之后有了 File API 和 FormData 我们才可以很方便的上传文件。

Content-Type

1. application/x-www-form-urlencoded（默认）

   Content-Type: application/x-www-form-urlencoded
   
   a=1&b=lilnong.top

2. text/plain

   Content-Type: text/plain
   
   a=1
   baz=lilnong.top

3. multipart/form-data 也就是我们的FormData

   Content-Type: multipart/form-data; boundary=------WebKitFormBoundaryuSsvkBRljoy0ECJz
   
   ------WebKitFormBoundaryuSsvkBRljoy0ECJz
   Content-Disposition: form-data; name="file"; filename="1571387420490-3.png"
   Content-Type: image/png
   
   ------WebKitFormBoundaryuSsvkBRljoy0ECJz
   Content-Disposition: form-data; name="a"
   
   1
   
   ------WebKitFormBoundaryuSsvkBRljoy0ECJz--

实战

上传文件

测试地址传送门

var formData = new FormData;
formData.append('file', file)//fileInput.files[0]
var xhr = new XMLHttpRequest();
xhr.open('post', '/upload_any');
xhr.send(formData);

设置超时时间

xhr = new XMLHttpRequest();
xhr.open('get','/')
xhr.timeout = 1;
xhr.send()
xhr.onload = ()=>console.log('load',xhr);
xhr.ontimeout = ()=>console.log('tiemout',xhr);

微信公众号：前端linong

参考文献

1. 前端培训目录、前端培训规划、前端培训计划
2. XMLHttpRequest