javascript

Ajax 実装の3ステップ

XMLHttpRequestオブジェクトを生成
コールバック関数（サーバ応答時の処理内容）
サーバへ非同期通信を開始

XMLHttpRequest オブジェクトを生成する

 function getXHR() {
 var req;
   try {
     req = new XMLHttpRequest();
   } catch(e) {
     try {
       req = new ActiveXObject('Msxml2.XMLHTTP');
     } catch(e) {
       req = new ActiveXObject('Microsoft.XMLHTTP');
     }
   }
 }

サーバ応答時の処理を定義する

コールバック関数で、応答時の処理を定義します。コールバック関数は、XMLHttpRequest オブジェクトにより通信のタイミングで呼び出される関数です。以下のような処理を実行することができます。

• サーバから正常な応答を受け取ったタイミングで、ページの更新を行う
• サーバからエラーが返されたときに、エラーページを表示する
• サーバへの通信を開始したタイミングで、「通信中」メッセージを表示する

コールバック関数を定義するのは、onreadystatechanged プロパティを用いる

req.onreadystatehanged = showResult;

サーバに要求データを送信する

open メソッドでリクエストを初期化する

XMLHttpRequestオブジェクト.open(HTTPメソッド, URL [,非同期モードで通信するか[,ユーザ名 [,パスワード]]])

下記が実際の実装

req.open('GET', 'helloAjax.php?name=' + encodeURIComponent(document.fm.name.value), true);

要求データができたら、送信処理を書く

req.send(null);

サンプル

function asyncSend() {
  var req = getXMR();
  req.onreadystatechange = function() {
    if (req.readyState == 4 ) {
      if(req.status == 200) {
        result.innerHTML = req.responseText;
      } else {
        result.innerHTML = "サーバエラーが発生しました。";
      }
    } else {
      result.innerHTML = "サーバエラーが発生しました。";
    }
  } else {
    result.innerHTML = "通信中....";
  }
  req.open('GET', 'helloAjax.php?name=' + encodeURIComponent(document.fm.name.value), true);
  req.send(null);
}

キーワード

• XMLHttpRequest
• onreadystatechange メンバ
  • 通信の状態が変化したタイミングで呼び出されるイベントハンドラ
• open メソッド
  • HTTP リクエストを初期か
• send メソッド
  • HTTP リクエストを送信