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