基本的なコード
Ajaxを使ったシステムを組みたい場合、CGIとJavaScriptの知識さえあれば、以下のスクリプトを使って簡単にAjaxの仕組みを使うことができます。
XML HTTP生成
AjaxではJavaScriptから「XMLHTTP」というオブジェクトを使います。
このオブジェクトはブラウザによって生成方法が異なるため、以下のような関数を用意しておきます。
function fnCreateXMLHttp(){
if(window.ActiveXObject){
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
return null;
}
}
} else if(window.XMLHttpRequest){
return new XMLHttpRequest();
} else {
return null;
}
}
XML HTTP通信
メイン処理ではサーバと通信するための以下のような処理を行います。
- サーバへのデータ送信
- サーバからのデータ受信
- 受信したデータを入力部品の値として設定
(ここは変数に受け取ったり、innerHTMLで受け取ったりしてもいいです。)
上記の処理を行うため、以下のような関数を用意しておきます。
function fnGetRemoteScript(strURL,strGet,strElm){
//Cache Excape
var dNow = new Date();
var strReq = strURL + '?time=' + dNow.getTime();
var strRes;
//Adjust Request Param
if (strGet != '') { strReq += '&' + strGet; }
//XML HTTP Request
var xmlhttp = fnCreateXMLHttp();
if (xmlhttp) {
xmlhttp.open('GET', strReq);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
strRes = xmlhttp.responseText;
document.getElementById(strElm).value = strRes;
}
}
xmlhttp.send(null);
}
}
各パラメータは以下の通りです。
- strURL
- どのURLにリクエストするのかを指定します。
- 例えば「/cgi-bin/chat.cgi」といった値です。
- strGet
- どのようなパラメータを渡してリクエストするのかを指定します。
- 例えば「a=125&b=oop」といった値です。
- strElm
- 受信したデータを、どのidを持つ部品に設定するのかを指定します。
- 例えばHTML上に「id="comment"」のテキストボックスがあれば、このパラメータには「comment」といった値を渡します。