XMLHttpRequestオブジェクト
XMLHttpRequest オブジェクトを使用すると、ページ全体を再読み込みすることなく、Webページの一部を更新できます。
XMLHttpRequest オブジェクト
XMLHttpRequest オブジェクトは、背後でサーバーとデータを交換するために使用されます。
XMLHttpRequest オブジェクトは開発者の夢です。なぜなら、次のことができます：
- ページを再読み込みせずにWebページを更新する
- ページの読み込み後にサーバーからデータを要求する
- ページの読み込み後にサーバーからデータを受信する
- バックグラウンドでサーバーにデータを送信する
XMLHttpRequest オブジェクトの作成
すべての最新ブラウザ（IE7+、Firefox、Chrome、Safari、Opera）には、組み込みの XMLHttpRequest オブジェクトがあります。
XMLHttpRequest オブジェクトを作成する構文
旧バージョンの Internet Explorer（IE5 および IE6）は ActiveX オブジェクトを使用します：
すべての最新ブラウザと IE5 および IE6 を処理するには、ブラウザが XMLHttpRequest オブジェクトをサポートしているかどうかを確認してください。サポートしている場合は XMLHttpRequest オブジェクトを作成し、サポートしていない場合は ActiveX オブジェクトを作成します：
例
試してみる »
サーバーにリクエストを送信する
サーバーにリクエストを送信するために、XMLHttpRequest オブジェクトの open() メソッドと send() メソッドを使用します：
xmlhttp.send();
| メソッド | 説明 |
|---|---|
| open(method,url,async) | リクエストのタイプ、URL、リクエストを非同期で処理するかどうかを指定します。 method：リクエストのタイプ：GET または POST url：サーバー上のファイルの場所 async：true（非同期）または false（同期） |
| send(string) | リクエストをサーバーに送信します。 string：POST リクエストのみに使用されます |
GET または POST？
GET は POST よりも単純で高速であり、ほとんどの場合に使用できます。
ただし、以下の場合は常に POST リクエストを使用してください：
- キャッシュされたファイルは選択肢になりません（サーバー上のファイルやデータベースを更新する場合）
- サーバーに送信するデータ量が大きい場合（POST にはサイズ制限がありません）
- ユーザー入力を送信する場合（未知の文字が含まれる可能性があります）、POST は GET よりも強力で安全です
URL - サーバー上のファイル
open() メソッドの url パラメータは、サーバー上のファイルのアドレスです：
そのファイルは、任意のタイプのファイル（.txt や .xml など）、またはサーバースクリプトファイル（.html や .php など。応答を送り返す前にサーバー上でアクションを実行できます）です。
非同期 - True または False?
リクエストを非同期で送信するには、open() メソッドの async パラメータを true に設定する必要があります：
非同期リクエストの送信は、Web 開発者にとって大きな進歩です。サーバー上で実行される多くのタスクは非常に時間がかかります。
非同期送信により、JavaScript はサーバーの応答を待つ必要はありませんが、代わりに次のことができます：
- サーバーの応答を待つ間に、他のスクリプトを実行する
- 応答の準備ができたら応答を処理する
Async=true
async=true を使用する場合、onreadystatechange イベント内で、応答の準備ができたときに実行する関数を指定します：
例
試してみる »
Async=false
async=false を使用する場合は、open() メソッドの3番目のパラメータを false に変更してください：
async=false の使用は推奨されませんが、いくつかの小さなリクエストを処理する場合は問題ありません。
JavaScript は、サーバーの応答が準備されるまで実行を継続しないことを覚えておいてください。サーバーがビジーまたは遅い場合、アプリケーションはハングアップまたは停止します。
注意：async=false を使用する場合は、onreadystatechange 関数を記述しないでください。send() ステートメントの後にコードを配置するだけです：
例
試してみる »
サーバー応答
サーバーから応答を取得するには、XMLHttpRequest オブジェクトの responseText または responseXML プロパティを使用します。
| プロパティ | 説明 |
|---|---|
| responseText | 応答データを文字列として取得する |
| responseXML | ResponseXML プロパティは XML ドキュメントオブジェクトを返します。DOM ノードツリーのメソッドとプロパティを使用して、そのオブジェクトを検査および解析できます。 |
responseText プロパティ
サーバーからの応答が XML でない場合は、responseText プロパティを使用してください。
responseText プロパティは応答を文字列として返します。それに応じて使用できます：
responseXML プロパティ
サーバーからの応答が XML で、それを XML オブジェクトとして解析したい場合は、responseXML プロパティを使用してください：
例
ファイルをリクエストする応答を解析します：
試してみる »
onreadystatechange イベント
リクエストがサーバーに送信されると、応答に応じて何らかのアクションを実行する必要があります。
onreadystatechange イベントは、readyState が変化するたびにトリガーされます。
readyState プロパティは XMLHttpRequest の状態を保持します。
XMLHttpRequest オブジェクトの3つの重要なプロパティ：
| プロパティ | 説明 |
|---|---|
| onreadystatechange | readyState プロパティが変化するたびに自動的に呼び出される関数（または関数の名前）を格納します |
| readyState | XMLHttpRequest の状態を保持します。0 から 4 まで変化します： 0：リクエストが初期化されていません 1：サーバー接続が確立されました 2：リクエストを受信しました 3：リクエストを処理中 4：リクエストが完了し、応答の準備ができました |
| status | 200："OK" 404：ページが見つかりません |
onreadystatechange イベントでは、サーバーの応答を処理する準備ができたときに何が起こるかを指定します。
readyState が 4 または ステータスが 200 の場合、応答の準備ができています：
例
試してみる »
注意：onreadystatechange イベントは readyState が変化するたびにトリガーされ、合計で4回トリガーされます。
その他の例
リソース（ファイル）のヘッダー情報を取得します。
リソース（ファイル）の指定したヘッダー情報を取得します。
ユーザーが入力フィールドに文字を入力したときに、Webページが Web サーバーとどのように通信するか。
Webページが XMLHttpRequest オブジェクトを使用してデータベースから情報を抽出する方法。
XMLHttpRequest を作成して XML ファイルからデータを取得し、そのデータを HTML テーブルに表示します。
その他の拡張機能