サーバから非同期にレスポンスを受け取る方法 (Ajax)

Ajax (Asynchronous JavaScript + XML) で、サーバから非同期にレスポンスを受け取る方法について解説します。

XMLHttpRequestオブジェクト

プロパティ

分類 プロパティ 型 説明
  readyState short HTTPリクエストの状態
レスポンス responseText String レスポンス (ヘッダを含まない)
responseXML Document レスポンス (XMLとして解析済み)
ステータス status short HTTPステータス コード
statusText String HTTPステータス コードの文字列表現
※ すべて読み取り専用

responseXMLプロパティは、レスポンスをXMLとして解析できない場合はnullになります。XMLとして解析されるためには、次の条件を満足する必要があります。

  1. Content-Typeヘッダに「text/xml」や「application/xml」などが指定され、XMLドキュメントであることが明示されている。
  2. エラーなく解析できる、XMLマークアップで構成されている。
readyStateプロパティの値
値 名前 説明 発生状況
0 Uninitialized 初期状態 次のいずれか
  • open()メソッドの呼び出し前
  • abort()メソッドの呼び出し後
1 Open リクエスト未送信 open()メソッドの呼び出し後
2 Sent レスポンス未受信 send()メソッドの呼び出し後
3 Receiving レスポンス受信中 サーバからデータを受信中 ※1
4 Loaded レスポンス受信済み サーバのレスポンスの受信が完了
※1 おおきなサイズのデータを受信するとき、Firefoxでは複数回イベントが発生するが、IEでは一度だけである。

メソッド

メソッド 説明
open HTTPリクエスト パラメータを初期化する
send HTTPリクエストを送信する
abort リクエストを停止する
getAllResponseHeaders すべてのHTTPレスポンス ヘッダを未解析の文字列として取得する
getResponseHeader 指定のHTTPレスポンス ヘッダの値を取得する
setRequestHeader 未送信のリクエストに、HTTPリクエスト ヘッダを設定する

イベントハンドラ

イベントハンドラ 説明
onreadystatechange readyStateプロパティが変更されるごとに呼び出される

1. XMLHttpRequestオブジェクトの生成

XMLHttpRequestオブジェクトの生成は、IEとそれ以外のブラウザで異なります。よって複数の方法で試行する必要があります。

// XMLHttpRequestオブジェクトを生成する
var xmlHttpRequest;

try
{
    xmlHttpRequest = new XMLHttpRequest();
}
catch( e )
{
    try
    {
        // IE6向けの処理
        xmlHttpRequest = new ActiveXObject( 'Msxml2.XMLHTTP' );
    }
    catch( e )
    {
        // IE5とIE5.5向けの処理
        xmlHttpRequest = new ActiveXObject( 'Microsoft.XMLHTTP' );
    }
}

2. 非同期イベントを処理する関数のイベントハンドラへの登録

// 非同期の通知を受け取るイベントハンドラを登録する
xmlHttpRequest.onreadystatechange = function()
{
    var READYSTATE_COMPLETED = 4;
    if( xmlHttpRequest.readyState == READYSTATE_COMPLETED )
    {
        var HTTP_STATUS_OK = 200;
        if( xmlHttpRequest.status == HTTP_STATUS_OK )
        {
            // サーバから受信したレスポンスを表示する
            alert( xmlHttpRequest.responseText );
        }
        else
        {
            // エラーを表示する
            alert( xmlHttpRequest.status + xmlHttpRequest.statusText );
        }
    }
}

3. HTTPリクエストの初期化と送信

// HTTPリクエストパラメータを初期化する
xmlHttpRequest.open( 'GET', requestUrl );

// HTTPリクエストを送信する
xmlHttpRequest.send( null );

HTTPリクエストの初期化

void open(
    String method,   // HTTPメソッド (GET, POST, HEAD, etc...)
    String url,      // リクエスト対象のURL
    boolean async,   // 非同期に処理するかどうか (省略もしくはtrueで非同期)
    String username, // 認証情報 (ユーザー名)
    String password  // 認証情報 (パスワード)
    )

メソッド名はopenとなっていますが、このメソッドは接続を開いたりはしません。send()メソッドを実行するためのリクエストを初期化するだけです。

同一起源ポリシー (同一出身ポリシー) (same origin policy)

リクエスト対象とできるURLには、以下の制限があります。
  • ホストとポート番号が同一 (同一起源ポリシー)
  • httpスキーム

別ドメインにリクエストする必要があるとき、そのサーバがJSONPでデータを返すならばスクリプトを動的に読み込む方法で同一起源ポリシーの制約を回避できます。

HTTPリクエストの送信

void send(
    Object body      // リクエストの本体
    )

open()メソッドのHTTPメソッドが「POST」の場合には、body引数でリクエスト本体を指定します。それ以外のメソッドではnullを指定します。

参照

関連ページ