前端培训-中级阶段（21）-xhr二、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