Widely available すべての主要ブラウザで対応済み。安心して使用可能。

XMLHttpRequest

FormData インターフェイスは、フォームフィールドおよびそれらの値から表現されるキーと値のペアのセットを簡単に構築する手段を提供します。これは fetch()、XMLHttpRequest.send()、navigator.sendBeacon() の各メソッドを用いることで送信が可能です。エンコーディング型を "multipart/form-data" に設定した場合にフォームが使用するものと同じ形式を使用します。

単純な GET の送信を用いる <form> が行うようなクエリー引数を生成したい場合は、URLSearchParams コンストラクターに直接渡すことも可能です。

FormData を実装したオブジェクトは、entries() の代わりに for...of 構造の内部で直接使用できます。for (const p of myFormData) は for (const p of myFormData.entries()) と等価です。

ネットワーク通信

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`FormData`	5	12	4	5	18	5
`@@iterator` [シンボル.イテレータ］	50	18	44	11.1	50	11.3
`append` append() は FormData インターフェイスのメソッドで、FormData オブジェクト内の既存のキーに新しい値を追加します。キーがまだ存在しない場合は追加します。	5	12	4	5	18	5
`append (filename parameter)` `filename` パラメータ	16	12	22	6	18	6
`delete` delete() は FormData インターフェイスのメソッドで、FormData オブジェクトからキーとその値を削除します。	50	18	39	11.1	50	11.3
`entries` FormData.entries() メソッドは、この FormData に含まれているすべてのキー/値のペアを走査するイテレーターを返します。それぞれのペアのキーは文字列オブジェクトで、値は文字列または Blob のどちらかです。	50	18	44	11.1	50	11.3
`forEach`	50	18	47	11.1	50	11.3
`FormData` FormData() コンストラクターは、新しい FormData オブジェクトを生成します。	5	12	4	5	18	5
`FormData (submitter)` `submitter` パラメータ	112	112	111	16.4	112	16.4
`get` get() は FormData インターフェイスのメソッドで、FormData オブジェクトの中から、指定されたキーに関連付けられた最初の値を返します。複数の値を期待し、すべてが欲しい場合は、代わりに FormData.getAll() メソッドを使用してください。	50	18	39	11.1	50	11.3
`getAll` getAll() は FormData インターフェイスのメソッドで、FormData オブジェクト内から指定されたキーに関連付けられたすべての値を返します。	50	18	39	11.1	50	11.3
`has` has() は FormData インターフェイスのメソッドで、FormData オブジェクトに指定されたキーがあるかどうかを返します。	50	18	39	11.1	50	11.3
`keys` FormData.keys() メソッドは、この FormData に含まれるすべてのキーを走査するイテレーターを返します。キーは文字列です。	50	18	44	11.1	50	11.3
`set` set() は FormData インターフェイスのメソッドで、FormData オブジェクト内の既存のキーに値を追加したり、存在しないキーと値の組を追加したりします。	50	18	39	11.1	50	11.3
`values` FormData.values() メソッドは、この FormData に含まれるすべての値を走査するイテレーターを返します。値は文字列または Blob オブジェクトです。	50	18	44	11.1	50	11.3
`worker_support` 労働者で利用可能	50	79	39	13.1	50	13.4
`ProgressEvent` ProgressEvent インターフェイスは、プロセスの進捗、例えば HTTP リクエスト（XMLHttpRequest、または img, audio, video, style, link のような基本的なリソースの読み込み）などを計測するイベントを表します。	1	12	3.5	3.1	18	2
`lengthComputable` ProgressEvent.lengthComputable は読み取り専用のプロパティであり、論理値のフラグで、 ProgressEvent が関係するリソースに計算可能な長さがあるかどうかを示します。そうでない場合、ProgressEventプロパティは重要な値を持ちません。	1	12	3.5	3.1	18	2
`loaded` ProgressEvent.loaded は読み取り専用プロパティであり、整数で基礎となるプロセスの既に行われた仕事の量を表します。進捗率は、このプロパティと ProgressEvent.total から計算することができます。 HTTP を使用してリソースをダウンロードする場合、この値はバイト単位を示し（ビット単位ではありません）、ヘッダーやその他のオーバーヘッドを除いた内容物自体のみを表します。	1	12	3.5	3.1	18	2
`ProgressEvent` ProgressEvent() コンストラクターは、長いプロセスの現在の完了状況を表す ProgressEvent を新しく生成して返します。	16	14	18	6	18	6
`ProgressEvent (loaded total options accept double)` `loaded` および `total` オプションは double 型を受け付けます	136	136	138	Preview	136
`total` ProgressEvent.total は読み取り専用のプロパティであり、 64 ビット符号なし整数値で、処理または転送されるデータの全体の大きさを示します。 HTTP 通信の場合は、これはメッセージの本文の大きさ (Content-Length) であり、ヘッダーやその他のオーバーヘッドは含みません。	1	12	3.5	3.1	18	2
`worker_support` 労働者で利用可能	47	79	54	10	47	10
`XMLHttpRequest` XMLHttpRequest (XHR) オブジェクトは、サーバーと対話するために使用されます。ページ全体を更新する必要なしに、データを受け取ることができます。これでユーザーの作業を中断させることなく、ウェブページの一部を更新することができます。	1	12	1	1.2	18	1
`abort` XMLHttpRequest.abort() メソッドは、すでに送信されたリクエストを中止します。リクエストが中止されたら、 XMLHttpRequest.readyState が XMLHttpRequest.UNSENT (0) に変化し、リクエストの XMLHttpRequest.status コードが 0 に設定されます。	1	12	1	1.2	18	1
`abort_event` abort イベントは、例えばプログラムが XMLHttpRequest.abort() を呼び出した時など、リクエストが中断されたときに発行されます。	1	12	3.5	1.3	18	1
`authorization_removed_cross_origin` クロスオリジンリダイレクトから`Authorization`ヘッダーが削除されました			111	16.1		16.1
`error_event` error イベントは、リクエストでエラーが発生したときに発行されます。	1	12	1	1.3	18	1
`getAllResponseHeaders` XMLHttpRequest の getAllResponseHeaders() メソッドは、すべてのレスポンスヘッダーを CRLF で区切った文字列として返し、レスポンスを受信していない場合は null を返します。	1	12	1	1.2	18	1
`getAllResponseHeaders (header names lowercase)` ヘッダー名はすべて小文字で返されます	60	79	64	11	60	11
`getResponseHeader` XMLHttpRequest の getResponseHeader() メソッドは、特定のヘッダー値のテキストを含んだ文字列を返します。	1	12	1	1.2	18	1
`load_event` load イベントは XMLHttpRequest のトランザクションが完全に完了したときに発行されます。	1	12	1	1.3	18	1
`loadend_event` loadend イベントは、リクエストが完全に完了したとき（XMLHttpRequestEventTarget/loadevent の後）、または失敗したとき（XMLHttpRequestEventTarget/abortevent または XMLHttpRequestEventTarget/error_event の後）に発行されます。	18	12	5	4	18	3
`loadstart_event` loadstart イベントは、リクエストがデータを読み込み始めたときに発行されます。	1	12	3.5	1.3	18	1
`open` XMLHttpRequest の open() メソッドは、新しく作成されたリクエストを初期化したり、既存のリクエストを再初期化したりします。	1	12	1	1.2	18	1
`overrideMimeType` XMLHttpRequest の overrideMimeType() メソッドは、リクエストで転送されるデータを解釈するときに、サーバーが提供されたもの以外の MIME タイプを代わりに使用するように指定します。	1	12	1	1.2	18	1
`progress_event` progress イベントはリクエストがより多くのデータを受信したときに定期的に発行されます。	1	12	1	3	18	1
`readyState` XMLHttpRequest.readyState プロパティは XMLHttpRequest (XHR) クライアントの状態を返します。XHR クライアントは次の状態のいずれかをとります。	1	12	1	1.2	18	1
`readystatechange_event` readystatechange イベントは、 XMLHttpRequest の XMLHttpRequest.readyState プロパティが変化するたびに発生します。	1	12	1	1.2	18	1
`response` XMLHttpRequest の response プロパティは、そのリクエストの本体の内容を、 ArrayBuffer、Blob、Document、JavaScript の Object、文字列など、リクエストの XMLHttpRequest.responseType プロパティの値に応じた形で返します。	9	12	6	5.1	18	5
`responseText` XMLHttpRequest の responseText プロパティは読み取り専用で、送信されたリクエストに続いてサーバーから受け取ったテキストを返します。	1	12	1	1.2	18	1
`responseType` XMLHttpRequest (XHR) の responseType プロパティは列挙型の文字列値で、レスポンスに含まれているデータの型を示します。	31	12	6	5.1	31	5
`responseType (arraybuffer value)`	31	12	6	5.1	31	5
`responseType (blob value)`	31	12	6	5.1	31	5
`responseType (document value)`	31	12	11	7	31	7
`responseType (json value)`	31	79	10	7	31	7
`responseURL` XMLHttpRequest.responseURL プロパティは読み取り専用で、レスポンスのシリアライズされた URL を返します。 URL が null の場合は、空文字を返します。 URL に存在する URL フラグメントはすべて取り除かれます。 responseURL の値は、任意のリダイレクト後に得られる最後の URL になります。	37	14	32	8	37	8
`responseXML` XMLHttpRequest.responseXML は読み取り専用のプロパティで、リクエストによって受け取った HTML または XML を含む Document、またはリクエストが成功しなかった場合、まだ送信されていない場合、データが XML または HTML として解釈できない場合は null を返します。	1	12	1	3	18	1
`send` XMLHttpRequest の send() メソッドは、リクエストをサーバーに送信します。	1	12	1	1.2	18	1
`send (body ArrayBuffer type)` send() の引数としての ArrayBuffer	9	12	9	6	18	6
`send (body ArrayBufferView type)` send() の引数としての ArrayBufferView	22	12	20	7	25	7
`send (body Blob type)` send() の引数としての Blob	22	12	2	6	25	6
`send (body FormData type)` send() のパラメータとしての FormData	6	12	2	6	18	6
`send (body URLSearchParams type)` send() のパラメータとしての URLSearchParams	59	17	44	15	59	15
`setRequestHeader` XMLHttpRequest の setRequestHeader() メソッドは、HTTP リクエストヘッダーの値を設定します。 setRequestHeader() は、 XMLHttpRequest.open の呼び出しの後、 XMLHttpRequest.send の呼び出しの前に呼び出さなければなりません。同じヘッダーについてこのメソッドを複数回呼び出された場合は、複数の値が単一のリクエストヘッダーにマージされます。	1	12	1	1.2	18	1
`status` XMLHttpRequest.status プロパティは読み取り専用で、 XMLHttpRequest のレスポンスにおける数値の HTTP ステータスコードを返します。	1	12	1	1.2	18	1
`statusText` XMLHttpRequest.statusText は読み取り専用のプロパティで、文字列で HTTP サーバーから返されるステータスメッセージを示します。 XMLHttpRequest.status が数値のステータスコードを示すのとは異なり、このプロパティはレスポンスステータスのテキストを、 "OK" や "Not Found" のように示します。リクエストの readyState が UNSENT または OPENED の状態であった場合、 statusText の値は空文字列になります。	1	12	1	1.2	18	1
`timeout` XMLHttpRequest.timeout は unsigned long 型で、リクエストが自動的に終了するまでの時間をミリ秒で示します。既定値は 0 で、タイムアウトが無いことを示します。 timeout はdocument environmentで利用される同期 XMLHttpRequest や InvalidAccessError の例外を投げるものに使用することはできません。タイムアウトとなった場合、 timeout イベントが発行されます。	29	12	12	7	29	7
`timeout_event` timeout イベントは、設定された時間が経過したことで進行が終了すると発行されます。	29	12	12	7	29	7
`upload` XMLHttpRequest の upload プロパティは、アップロードの進捗を監視することができる XMLHttpRequestUpload オブジェクトを返します。	2	12	3.5	4	18	3
`withCredentials` XMLHttpRequest.withCredentials プロパティは論理値で、サイト間の Access-Control リクエストが Cookie、認証ヘッダー、 TLS クライアント証明書などの資格情報を使用して行うべきかどうかを示します。 withCredentials を設定しても、同じオリジンへのリクエストには影響しません。	3	12	3.5	4	18	3.2
`worker_support` 労働者で利用可能	4	12	3.5	4	18	5
`XMLHttpRequest` XMLHttpRequest() コンストラクターは新しい XMLHttpRequest を生成します。	1	12	1	3	18	1
`XMLHttpRequestEventTarget` XMLHttpRequestEventTarget インターフェイスは、 XMLHttpRequest と XMLHttpRequestUpload で共有されるイベントハンドラーを示します。	1	12	1	1	18	1
`XMLHttpRequestUpload` XMLHttpRequestUpload インターフェイスは、特定のXMLHttpRequestのアップロード処理を表します。これは不透明オブジェクトで、基盤であるブラウザー依存のアップロード処理を表します。これはXMLHttpRequestEventTargetであり、XMLHttpRequest.uploadを呼び出すことで取得できます。	2	12	3.5	4	18	3
`abort_event` abort イベントは、例えばプログラムが XMLHttpRequest.abort() を呼び出した時など、リクエストが中断されたときに発行されます。	2	12	3.5	4	18	3
`error_event` error イベントは、リクエストでエラーが発生したときに発行されます。	2	12	3.5	4	18	3
`load_event` load イベントは XMLHttpRequest のトランザクションが完全に完了したときに発行されます。	2	12	3.5	4	18	3
`loadend_event` loadend イベントは、リクエストが完全に完了したとき（XMLHttpRequestEventTarget/loadevent の後）、または失敗したとき（XMLHttpRequestEventTarget/abortevent または XMLHttpRequestEventTarget/error_event の後）に発行されます。	18	12	5	4	18	3
`loadstart_event` loadstart イベントは、リクエストがデータを読み込み始めたときに発行されます。	2	12	3.5	4	18	3
`progress_event` progress イベントはリクエストがより多くのデータを受信したときに定期的に発行されます。	2	12	3.5	4	18	3
`timeout_event` timeout イベントは、設定された時間が経過したことで進行が終了すると発行されます。	29	12	12	7	29	7

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

実務での使いどころ

XMLHttpRequest の活用

FormData インターフェイスは、フォームフィールドおよびそれらの値から表現されるキーと値のペアのセットを簡単に構築する手段を提供します。

注意点

古いブラウザでは対応していない場合がある。

実装メモ

一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

対応ブラウザ

実務での使いどころ

XMLHttpRequest の活用

注意点

実装メモ

参考リンク