Latest web development tutorials

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

XMLHttpRequestオブジェクトは、サーバとデータを交換します。

サーバに要求を送信します

サーバーに要求を送信するために、我々は、XMLHttpRequestオブジェクトのopen（）とsend（）メソッドを使用します。

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

ウェイ 説明
（メソッド、URL、非同期）オープン

タイプは、リクエスト、URLや要求のかどうか非同期処理を指定します。

  • 方法：要求のタイプ、GETまたはPOST
  • URL：サーバ上のファイルの場所
  • 非同期：真（非同期）またはfalse（同期）
送信（文字列）

サーバに要求を送信します。

  • 文字列：POSTリクエストのみのために

GETやPOST？

POSTと比較して、簡単かつ迅速に取得し、ほとんどの場合に使用することができます。

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

  • （サーバー上のデータベースをファイルまたは更新）キャッシュファイルを使用することができません。
  • サーバに大量のデータを（POSTデータの量を限定するものではない）を送信します
  • 送信する際にユーザーの入力が未知の文字が含まれ、POSTはGETよりも安定し、より信頼性があります

リクエストをGET

シンプルなGETリクエスト：

例

xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();

»をお試しください

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

この問題を回避するには、URLに固有のIDを追加します。

例

xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();

»をお試しください

GETメソッドを介して情報を送信したい場合は、URLに情報を追加します。

例

xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();

»をお試しください

POSTリクエスト

簡単なPOSTリクエスト：

例

xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();

»をお試しください

あなたは、HTMLフォームのPOSTなどのデータは、HTTPヘッダを追加するsetRequestHeader（）を使用することが必要な場合。 そして、あなたはsend（）メソッドでデータを送信することを指定します。

例

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

»をお試しください

方法 描述
setRequestHeader( header,value)

向请求添加 HTTP 头。

  • header: 规定头的名称
  • value: 规定头的值

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

URL引数のopen（）メソッドは、ファイルサーバのアドレスです。

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

ファイルには、.txtファイルおよび.xml、またはそのような（サーバー上でタスクを実行するために、応答を返す前に）の.aspと.PHPなどのサーバー・スクリプト・ファイル、として、ファイルの任意のタイプにすることができます。

非同期 - TrueまたはFalse？

AJAXは、非同期JavaScriptとXML（非同期JavaScriptとXML）を意味します。

あなたはAJAX XMLHttpRequestオブジェクトを使用したい場合は、その後、そのopen（）メソッドをtrueに設定する必要があります非同期パラメータ：

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

Web開発者のために、非同期リクエストは大きな前進である送ります。 実行するサーバーでは、多くのタスクは非常に時間がかかります。 AJAX前にアプリケーションがハングまたは停止する恐れがある、起こります。

AJAXは、JavaScriptを介してサーバーからの応答を待たずに、しかし：

  • サーバからの応答を待っている間に他のスクリプトが実行します
  • 応答は、プロセスに応答する準備ができたら

非同期=真

機能を実行するonreadystatechange準備のイベントに応答して、非同期を使用して= trueを、してください条項：

例

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

»をお試しください

あなたは後の章でonreadystatechange内容について詳しく説明します。

偽非同期=

非同期を使用するには=偽、偽の3番目のパラメータでopen（）メソッドを設定します。 

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

私たちは、偽の非同期を=使用することをお勧めしますが、いくつかの小さな要求に対しても可能であるしないでください。

サーバの応答が進行する準備ができるまでJavaScriptが待機する、覚えておいてください。 サーバーがビジー状態または低速である、またはアプリケーションがハングを停止した場合。

注：非同期を使用する場合=偽、onreadystatechange関数を記述しないでください-送信にコードを置く（）バックステートメントに：

例

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

»をお試しください