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>
Copyright 1997-2010 BBB All rights reserved.