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

Erosvan

2019-10-22

前端最基础的就是 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 的新功能

不止支持文本数据的接收。还添加了更多类型的支持，如: 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;
 }

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

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);

增加了跨域请求的能力
支持了 CORS（Cross-origin resource sharing，跨域资源共享） 跨域方法。
增加了获得数据传输的进度信息的能力。
下载 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来判断各个阶段。
增加了超时限制
通过设置xhr.timeout = 3000;来实现，默认值为0，意味着永不超时。如果请求超时会触发ontimeout事件

FormData

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

Content-Type

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

Content-Type: application/x-www-form-urlencoded

a=1&b=lilnong.top

text/plain

Content-Type: text/plain

a=1
baz=lilnong.top

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);