フロントエンドトレーニング-中級フェーズ(21)-xhr 2、FormData(2019-10-17期)
3555 ワード
フロントエンドの最も基本的なのは
AJAXはよく知られていませんが、低バージョンIEは
XMLHttpRequest Level 2の新機能は、テキストデータの受信をサポートするものではない. 同様に、送信データをサポートするタイプ も追加する.は、ドメイン間要求の能力を増加させ、CORS(Cross-origin resource sharing、ドメイン間リソース共有)ドメイン間メソッドをサポートする. は、データ伝送の進捗情報を取得する能力を増加させる.ダウンロード はタイムアウト制限を追加し、 がトリガーされる.
FormData
以前はファイルをアップロードし、フォームに依存してコミットしました.非同期でアップロードするとiframeに依存します.その後、
Content-Type 実戦
ファイルのアップロード
テストアドレスゲート
参考文献フロントエンドトレーニングカタログ、フロントエンドトレーニング計画、フロントエンドトレーニング計画 XMLHttpRequest
HTML+CSS+Javascriptです.この3つの技術を身につけたのは入門しても入門にすぎず,現在では先端開発の定義はそれだけではない.先端小教室(HTML/CSS/JS)は、技術レベルを向上させ、基礎知識の中心思想をしっかりと確立することに基づいて、私たちは授業を始めました(毎週4).AJAXはよく知られていませんが、低バージョンIEは
new ActiveXObject("Microsoft.XMLHTTP")、他のブラウザはnew XMLHttpRequest()を使用しています.ブラウザから与えられたインタフェースで通信インタラクションを実現し、HTML 5の概念が形成された後、W 3 Cはこのインタフェースの標準化を考慮し始めた.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);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.toptext/plain Content-Type: text/plain
a=1
baz=lilnong.topmultipart/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);参考文献