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>