XMLHttpRequest オブジェクトは、サーバーとデータを交換するために使用されます。
サーバーにリクエストを送信するには、XMLHttpRequest オブジェクトの open() メソッドと send() メソッドを使用します。
xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();
方法 | 説明する |
---|---|
open(メソッド、 url 、非同期) | リクエストのタイプ、URL、およびリクエストを非同期的に処理するかどうかを指定します。 メソッド: リクエストのタイプ。 url : サーバー上のファイルの場所 async : true (非同期) または false (同期) |
send(文字列) | リクエストをサーバーに送信します。 string : POSTリクエストにのみ使用されます |
GET は POST よりも簡単かつ高速で、ほとんどの状況で機能します。
ただし、次の状況では POST リクエストを使用します。
キャッシュされたファイルを使用できない(サーバー上のファイルまたはデータベースを更新中)
大量のデータをサーバーに送信します (POST にはデータ サイズの制限がありません)。
不明な文字を含むユーザー入力を送信する場合、POST は GET よりも安定しており、信頼性が高くなります。
単純な GET リクエスト:
上の例では、キャッシュされた結果を取得している可能性があります。
これを回避するには、URL に一意の ID を追加します。
GET メソッド経由で情報を送信する場合は、URL に情報を追加します。
単純な POST リクエスト:
HTML フォームのようにデータを POST する必要がある場合は、setRequestHeader() を使用して HTTP ヘッダーを追加します。次に、送信するデータを send() メソッドで指定します。
方法 | 説明する |
---|---|
setRequestHeader(ヘッダー,値) | リクエストにHTTPヘッダーを追加します。 header : ヘッダーの名前を指定します value : ヘッダーの値を指定します |
open() メソッドのurlパラメータは、サーバー上のファイルのアドレスです。
xmlhttp.open("GET","ajax_test.html",true);
ファイルには、.txt や .xml などの任意の種類のファイル、または .asp や .php などのサーバー スクリプト ファイル (応答を送り返す前にサーバー上でタスクを実行できます) を使用できます。
AJAX は、非同期 JavaScript および XML を指します。
XMLHttpRequest オブジェクトを AJAX に使用する場合は、その open() メソッドの async パラメータを true に設定する必要があります。
xmlhttp.open("GET","ajax_test.html",true);
Web 開発者にとって、非同期リクエストの送信は大きな改善です。サーバー上で実行されるタスクの多くは非常に時間がかかります。 AJAX が導入される前は、これによりアプリケーションがハングまたは停止する可能性がありました。
AJAX を使用すると、JavaScript はサーバーからの応答を待つ必要がなく、代わりに次のようになります。
サーバーの応答を待っている間に他のスクリプトを実行する
準備ができたら応答を処理する
async=true を使用する場合、onreadystatechange イベントの準備完了状態に応答して実行される関数を指定します。
onreadystatechange については後の章で詳しく説明します。
async=false を使用する場合は、open() メソッドの 3 番目のパラメーターを false に変更します。
xmlhttp.open("GET","test1.txt",false);
async=false の使用はお勧めしませんが、小規模なリクエストの場合は使用することも可能です。
JavaScript はサーバーの応答の準備ができるまで待ってから続行することに注意してください。サーバーがビジーまたは遅い場合、アプリケーションはハングまたは停止します。
注: async=false を使用する場合は、onreadystatechange 関数を記述せず、コードを send() ステートメントの後に置くだけです。