AJAX - サーバーへ送信リクエスト

XMLHttpRequest オブジェクトはサーバーとのデータ交換に使用されます。

サーバーにリクエストを送信

サーバーにリクエストを送信するには、次を使用しますXMLHttpRequestオブジェクトのopen()とsend()メソッド：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

メソッド 説明
open(method,url,async)

リクエストのタイプ、URL、およびリクエストを非同期で処理するかどうかを指定します。

  • method：リクエストのタイプ；GET または POST
  • url：サーバー上のファイルの場所
  • async：true（非同期）または false（同期）
send(string)

リクエストをサーバーに送信します。

  • string：POST リクエストのみに使用

GET それとも POST？

POST と比較すると、GET はより単純で高速であり、ほとんどの場合に使用できます。

ただし、次の場合は POST リクエストを使用してください：

  • キャッシュファイルを使用したくない場合（サーバー上のファイルやデータベースを更新する場合）
  • サーバーに大量のデータを送信する場合（POST にはデータ量の制限がありません）
  • 未知の文字を含むユーザー入力を送信する場合、POST は GET よりも安定しており信頼性も高くなります

GET リクエスト

簡単な GET リクエスト：

例

xmlhttp.open("GET","/try/ajax/demo_get.php",true); xmlhttp.send();

試してみる »

上記の例では、キャッシュされた結果が返される可能性があります。

この問題を回避するには、URL に一意の ID を追加してください：

例

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true); xmlhttp.send();

試してみる »

GET メソッドで情報を送信する場合は、URL に情報を追加してください：

例

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true); xmlhttp.send();

試してみる »

POST リクエスト

簡単な POST リクエスト：

例

xmlhttp.open("POST","/try/ajax/demo_post.php",true); xmlhttp.send();

試してみる »

HTML フォームのようにデータを POST する必要がある場合は、setRequestHeader() を使用して HTTP ヘッダーを追加します。次に、send() メソッドで送信したいデータを指定します：

例

xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");

試してみる »

メソッド 説明
setRequestHeader(header,value)

リクエストに HTTP ヘッダーを追加します。

  • header: ヘッダーの名前を指定します
  • value: ヘッダーの値を指定します

url - サーバー上のファイル

open() メソッドのurlパラメータはサーバー上のファイルのアドレスです：

xmlhttp.open("GET","ajax_test.html",true);

このファイルは、.txt や .xml などの任意のタイプのファイル、または .asp や .php などのサーバースクリプトファイル（応答を返す前にサーバー上でタスクを実行できます）です。

非同期 - True または False？

AJAX は、非同期 JavaScript および XML（Asynchronous JavaScript and XML）を指します。

XMLHttpRequest オブジェクトを AJAX に使用する場合、その open() メソッドの async パラメータを true に設定する必要があります：

xmlhttp.open("GET","ajax_test.html",true);

Web 開発者にとって、非同期リクエストの送信は大きな進歩です。サーバー上で実行される多くのタスクはかなり時間がかかります。AJAX が登場する前は、これによりアプリケーションがハングアップしたり停止したりする可能性がありました。

AJAX を使用すると、JavaScript はサーバーの応答を待つ必要がなく、代わりに次のことができます：

  • サーバーの応答を待っている間に他のスクリプトを実行する
  • 応答の準備ができたら応答を処理する

Async=true

async=true を使用する場合は、応答が onreadystatechange イベント内で ready 状態になったときに実行する関数を指定してください：

例

xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); xmlhttp.send();

試してみる »

onreadystatechange の詳細については、後の章で学習します。

Async = false

async=false を使用する場合は、open() メソッドの 3 番目のパラメータを false に変更してください：

xmlhttp.open("GET","test1.txt",false);

async=false の使用は推奨されませんが、小規模なリクエストには問題ありません。

JavaScript はサーバーの応答が準備できるまで待ってから実行を続けることに注意してください。サーバーがビジー状態または低速の場合、アプリケーションはハングアップまたは停止します。

注意：async=false を使用する場合は、onreadystatechange 関数を記述しないでください。コードを send() ステートメントの後に置いてください：

例

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false); xmlhttp.send(); document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

試してみる »
その他の拡張