最新のWeb開発のチュートリアル
 

XMLHttpRequestオブジェクト

❮前 次の章❯

すべての近代的なブラウザでは、サーバーからデータを要求するために、内蔵のXMLHttpRequestオブジェクトを持っています。

すべての主要なブラウザは、XMLにアクセスして操作するための組み込みのXMLパーサを持っています。

XMLHttpRequestオブジェクト

XMLHttpRequestオブジェクトは、Webサーバからデータを要求するために使用することができます。

XMLHttpRequestオブジェクトは、 a developers dreamのことができますので、：

  • ページをリロードせずにWebページを更新します
  • サーバーからのリクエストデータ - ページが読み込まれた後
  • サーバーからデータを受信 - ページが読み込まれた後
  • サーバにデータを送信する - バックグラウンドで

XMLHttpRequestの例

あなたは下の入力フィールドに文字を入力すると、XMLHttpRequestのがサーバーに送信され、そしていくつかの名前の候補が返されます(from the server) ：

例

Start typing a name in the input field below:

Name:

Suggestions:

XMLHttpRequestのを送信

すべての近代的なブラウザでは、組み込みのXMLHttpRequestオブジェクトを持っています。

それを使用するための一般的なJavaScriptの構文は次のようにはるかになります。

例

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
       // Action to be performed when the document is read;
    }
};
xhttp.open("GET", " filename ", true);
xhttp.send();
»それを自分で試してみてください

XMLHttpRequestオブジェクトの作成

上記の例の最初の行は、XMLHttpRequestのオブジェを作成します。

var xhttp = new XMLHttpRequest();

onreadystatechangeイベント

readyStateのプロパティは、XMLHttpRequestのの状態を保持します。

onreadystatechangeイベントは、readyStateのは、変更するたびにトリガされます。

サーバ要求時には、readyStateのは、0から4に変更されます。

0：要求が初期化されていません
1：サーバ接続が確立します
2：受信した要求
3：処理要求
4：完成した要求と応答の準備ができて

readyStateの変更時onreadystatechangeプロパティでは、実行する機能を指定します。

xhttp.onreadystatechange = function()

readyStateのは4で、ステータスが200である場合、応答は準備ができています：

if (xhttp.readyState == 4 && xhttp.status == 200)

XMLHttpRequestのプロパティとメソッド

方法 説明
new XMLHttpRequest() 新しいXMLHttpRequestオブジェクトを作成します。
open( method, url, async ) 要求のタイプを指定します。
method ：要求のタイプ：GETまたはPOST
url ：ファイルの場所
async ：真(asynchronous)またはfalse (synchronous)
send() サーバーにリクエストを送信します(used for GET)
send( string ) サーバへのリクエスト文字列を送信(used for POST)
onreadystatechange readyStateのプロパティが変更さ呼び出される関数
readyState XMLHttpRequestのステータス
0：要求が初期化されていません
1：サーバ接続が確立します
2：受信した要求
3：処理要求
4：完成した要求と応答の準備ができて
status 200：OK
404：ページが見つかりません
responseText 文字列として応答データ
responseXML XMLデータとして応答データ

ドメイン間のアクセス

セキュリティ上の理由から、最近のブラウザは、ドメイン間のアクセスが許可されていません。

これは、Webページ、それがロードしようとXMLファイルの両方が、同じサーバ上に配置されなければならないことを意味しています。

w3iiドメインに位置w3ii開いているすべてのXMLファイルの例。

あなたがあなた自身のウェブページの1に上記の例を使用する場合は、ロードXMLファイルは、独自のサーバー上に配置する必要があります。

responseTextプロパティ

responseTextプロパティは、文字列として応答を返します。

あなたがテキスト文字列として応答を使用する場合は、responseTextプロパティを使用します。

例

document.getElementById("demo").innerHTML = xmlhttp.responseText;
»それを自分で試してみてください

responseXMLプロパティ

responseXMLプロパティは、XML DOMオブジェクトとしてレスポンスを返します。

あなたはXML DOMオブジェクトとしてレスポンスを使用したい場合は、のresponseXMLプロパティを使用します。

例

ファイル要求cd_catalog.xmlをし、XML DOMオブジェクトとしてレスポンスを使用します。

xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
    txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
»それを自分で試してみてください

GETやPOST？

GETは、POSTより単純かつ迅速であり、そしてほとんどの場合に使用することができます。

しかし、常に時のPOSTリクエストを使用します。

  • キャッシュされたファイルはオプションではありません(update a file or database on the server)
  • サーバーに大量のデータを送信（POSTにはサイズの制限がありません）
  • ユーザー入力の送信(which can contain unknown characters) 、POSTはGETよりも堅牢で安全です

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

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

xmlhttp.open("GET", "xmlhttp_info.txt", true);

ファイルは.aspファイルと（バック応答を送信する前に、サーバー上のアクションを実行することができます）の.phpなどの.txtファイルおよび.xml、またはサーバーのスクリプトファイルと同様に、ファイルの任意の種類とすることができます。

非同期 - TrueまたはFalse？

非同期リクエストを送信するには、の非同期パラメータopen()メソッドをtrueに設定する必要があります。

xmlhttp.open("GET", "xmlhttp_info.txt", true);

非同期リクエストを送信すると、Web開発者のための巨大な改善です。 サーバー上で実行されるタスクの多くは、非常に時間がかかります。

非同期的に送信することにより、JavaScriptはサーバーの応答を待つ必要はありませんが、その代わりにすることができません：

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

非同期=真

真の非同期=を使用する場合、応答はonreadystatechangeイベントで準備ができたときに実行する関数を指定します。

例

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
       document.getElementById("demo").innerHTML = xmlhttp.responseText;
    }
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send();
»それを自分で試してみてください

偽非同期=

非同期を使用するには、falseに三番目のパラメータを変更するopen() falseにする方法：

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

= falseの非同期を使用することは推奨されませんが、いくつかの小さな要求のために、これは大丈夫であることができます。

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

Note:あなたは非同期= falseを使用すると、onreadystatechange関数を記述しないでください-直後のコードを入れてsend()ステートメントを：

例

xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText;
»それを自分で試してみてください

XMLパーサー

すべての近代的なブラウザでは、組み込みのXMLパーサを持っています。

XMLドキュメントオブジェクトモデル(the XML DOM) 、XMLにアクセスして編集する方法が多く含まれています。

XML文書にアクセスする前にしかし、それは、XML DOMオブジェクトにロードされなければなりません。

XMLパーサーは、プレーンテキストを読み、XML DOMオブジェクトに変換することができます。

テキスト文字列の解析

この例では、XML DOMオブジェクトにテキスト文字列を解析し、JavaScriptでそれから情報を抽出します。

例

<html>
<body>

<p id="demo"></p>

<script>
var text, parser, xmlDoc;

text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";

parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");

document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>

</body>
</html>
»それを自分で試してみてください

古いブラウザ(IE5 and IE6)

Internet Explorerの旧バージョン(IE5 and IE6) XMLHttpRequestオブジェクトをサポートしていません。

IE5やIE6を処理するために、ブラウザはXMLHttpRequestオブジェクトをサポートしているかどうかを確認、または他のActiveXObjectのを作成します。

例

if (window.XMLHttpRequest) {
    // code for modern browsers
    xmlhttp = new XMLHttpRequest();
 } else {
    // code for old IE browsers
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
»それを自分で試してみてください

Internet Explorerの旧バージョン(IE5 and IE6)はDOMParserオブジェクトをサポートしていません。

IE5やIE6を処理するために、ブラウザははDOMParserオブジェクトをサポートしているかどうかを確認、または他のActiveXObjectのを作成します。

例

if (window.DOMParser) {
  // code for modern browsers
  parser = new DOMParser();
  xmlDoc = parser.parseFromString(text,"text/xml");
} else {
  // code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async = false;
  xmlDoc.loadXML(text);
} 
»それを自分で試してみてください
例

その他の例

ヘッダ情報を取得しgetAllResponseHeaders()
リソースのヘッダ情報を取得する(file) 。

で特定のヘッダー情報を取得するgetResponseHeader()
リソースの特定のヘッダ情報取得(file) 。

ASPファイルの内容を取得します
どのようにWebページには、入力フィールドにユーザタイプの文字間にWebサーバと通信することができます。

データベースからコンテンツを取得
どのようにWebページには、XMLHttpRequestオブジェクトを使用してデータベースから情報を取り出すことができます。

XMLファイルの内容を取得します
XMLファイルからデータを取得し、HTMLテーブル内のデータを表示するためにXMLHttpRequestを作成します。


❮前 次の章❯