XMLHttpRequestの使い方

XMLHttpRequestの処理を大雑把に書くと次のようになります。

XMLHttpRequestの作成
  ↓
onreadystatechangeプロパティ(イベントハンドラの登録)
  ↓
openメソッド(サーバーへのリクエスト方法を指定)
  ↓
sendメソッド(サーバーへのリクエスト)
  ↓
readyStateプロパティ(リクエスト状態の確認)
  ↓
responseTextまたはresponseXMLプロパティ(受信データの処理)

例えば、画面遷移無しで郵便番号の入力から住所を表示するとします。 サーバー側のプログラムは、郵便番号のパラメータを受け取ると住所を 検索して返すとします。

まず、ブラウザによる違いを吸収するため次のような関数を作成します。

function createXmlHttp(){
  if(window.ActiveXObject){
    //Windows IE用
    try {
      return new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        return new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        return null;
      }
    }
  }
  else if(window.XMLHttpRequest){
    //Windows IE以外のXMLHttpRequestオブジェクト実装ブラウザ用
    return new XMLHttpRequest();
  }
  else {
    return null;
  }
}

次に、input要素(テキストボックス)のonblurイベントを使用して住所を取得する 関数を作成します。この関数の中でサーバーへのリクエストを実行します。

リクエストに成功するとhandleHttpResponse()関数で住所を出力します。

function getAddr(){
  var xmlhttp = createXmlHttp();

  if(xmlhttp == null) return;

  xmlhttp.onreadystatechange = handleHttpResponse;

  function handleHttpResponse(){
　　//リクエスト状況を確認(完了)
    if(xmlhttp.readyState == 4){
      addr = xmlhttp.responseText;
      document.getElementById('city').value = addr;
    }
  }

  var zipValue = document.getElementById("zip").value;

  //サーバーへリクエスト
  xmlhttp.open("GET", "getaddr.php?param=" + zipValue, true);
  xmlhttp.send();
}

function createXmlHttp(){
  if(window.ActiveXObject){
    //Windows IE用
    try {
      return new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        return new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        return null;
      }
    }
  }
  else if(window.XMLHttpRequest){
    //Windows IE以外のXMLHttpRequestオブジェクト実装ブラウザ用
    return new XMLHttpRequest();
  }
  else {
    return null;
  }
}

HTMLの例

<form action="post">
  <p>
  ZIP code:
  <input type="text" size="5" name="zip" id="zip" onblur="getAddr();">
  </p>
  <p>
  City:
  <input type="text" name="city" id="city">
  </p>
</form>