前端培訓-中級階段（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