AJAX-XMLHttpRequest
XMLHttpRequestオブジェクトは、サーバーからデータを要求するために使用されます。
サーバーにリクエストを送信する
サーバーにリクエストを送信するには、XMLHttpRequest オブジェクトのopen()メソッドとsend()メソッドを使用します。
|
Method |
Description |
|---|---|
| open（method, url, async) | リクエストのタイプを指定します method:リクエストのタイプ:GETまたはPOST URL:サーバー(ファイル)の場所 async:true(非同期)またはfalse(同期) |
| send（） | リクエストをサーバーに送信します(GET に使用) |
| send（string) | リクエストをサーバーに送信します(POST に使用) |
URL - サーバー上のファイル
メソッドのurlパラメータはopen()、サーバー上のファイルのアドレスです。
このファイルは、.txtや.xmlなどの任意の種類のファイル、または.aspや.phpなどのサーバースクリプトファイル(応答を返す前にサーバー上でアクションを実行できます)にすることができます。
非同期 - 真か偽か?
サーバーリクエストは非同期で送信される必要があります。
open()メソッドのasyncパラメータをtrueに設定する必要があります。
非同期的に送信することにより、JavaScriptはサーバーの応答を待つ必要がなくなり、代わりに次のことが可能になります。
- サーバーの応答を待っている間に他のスクリプトを実行する
- 応答の準備ができた後に応答を処理する
asyncパラメータのデフォルト値はasync=trueです。
コードから3番目のパラメーターを安全に削除できます。
同期XMLHttpRequest(async=false)は、サーバーの応答が準備できるまでJavaScriptの実行が停止するため、お勧めしません。サーバーがビジーまたは低速の場合、アプリケーションはハングまたは停止します。
GETまたはPOST?
GETはPOSTよりも簡単かつ高速で、ほとんどの場合に使用できます。
ただし、次の場合は常にPOSTリクエストを使用してください。
- キャッシュされたファイルはオプションではありません(サーバー上のファイルまたはデータベースを更新します)。
- サーバーに大量のデータを送信する(POSTにはサイズ制限がありません)。
- ユーザー入力(不明な文字が含まれる可能性がある)を送信するPOSTは、GETよりも堅牢で安全です。
GETリクエスト
シンプルなGETリクエスト：
上記の例では、キャッシュされた結果が得られる場合があります。これを回避するには、一意のIDをURLに追加します。
このメソッドを使用して情報を発信したい場合GETメソッドで、情報をURLに追加します。
サーバーが入力を使用する方法と、サーバーが要求に応答する方法については、後の章で説明します。
POSTリクエスト
シンプルなPOSTリクエスト：
HTMLフォームのようにデータをPOSTするには、setRequestHeader()を使用してHTTPヘッダーを追加します。send()メソッドで送信するデータを指定します。
例
|
Method |
Description |
|---|---|
| setRequestHeader(header, value) | リクエストにHTTPヘッダーを追加します header:ヘッダー名を指定します value:ヘッダー値を指定します |
同期リクエスト
同期リクエストを実行するには、open()メソッドの3番目のパラメータをfalseに変更します。
クイックテストのためにasync=falseが使用されることがあります。古いJavaScriptコードにも同期リクエストがあります。
コードはサーバーの完了を待機するため、onreadystatechange関数は必要ありません。
例
同期XMLHttpRequest(async=false)は、サーバーの応答が準備できるまでJavaScriptの実行が停止するため、お勧めしません。サーバーがビジーまたは低速の場合、アプリケーションはハングまたは停止します。
最新の開発者ツールでは、同期リクエストの使用について警告することが推奨されており、発生時にInvalidAccessError例外がスローされる場合があります。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。