基本的なコード

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」といった値を渡します。
Copyright © 2006 Hikijishi All Rights Reserved.
[] [ajax][0.00249981880187988]