ajax入門

ajaxとは

ajaxの仕組み

サーバーと端末が常に通信する・・とはいえ、rsyncのような常に同期を取るというわけではなく、JavaScriptのsetIntervalコマンドを使い、定期的にサーバーサイドスクリプト変更の指示があるかどうかを確認に行きます。


のように、JavaScriptのsetIntervalコマンドで一定間隔毎にWebサーバーにアクセスする関数を実行します。呼ばれるのは、サーバー側にあるPHPかCGIスクリプトです。呼ばれたサーバーサイドスクリプトはデーターベースへのselectを行い、何か変更があったかどうか確認します。

変更があれば画面を書き換える指示をJavaScript側に返し、それを受け取ったJavaScriptがリロードなしに画面を更新します。

この場合、PHPからselectを発行するのであまり頻繁にアクセスするとDBサーバーへの負担が多くなってしまいます。なのでアクセスは１秒毎ぐらいにしておきます。という事で、本当の意味での”リアル更新”ではなくなってしまうのですが、大抵はタイムラグ１秒以内であれば、そう問題にはならないでしょう。

ajaxの問題点

ブラウザ依存

Googleマップの登場

ajaxオブジェクトを作成

ajax = false;
if(window.XMLHttpRequest) {
        ajax = new XMLHttpRequest();
} else if(window.ActiveXObject) {
        try {
                ajax = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
                ajax = new ActiveXObject("Microsoft.XMLHTTP");
        }
}

サーバーと交信をするための、XMLHttpRequestというオブジェクトを生成します・・・・が、これはインターネットエクスプローラでは使えません。なので、これから作るページはインターネットエクスプローラ非対応のページとします・・

・・・なんてワケにはいきません。基本的にajaxはなるべく多くのブラウザで動作するような記述をします。

if(window.XMLHttpRequest)で、XMLHttpRequestが使えるならそれをオブジェクトとして使い、使えなければMsxml2.XMLHTTPというアクティブXをオブジェクトとして使います。ところが、Msxml2.XMLHTTPはインターネットエクスプローラ6.0以降でしか使えないため、それ以前のバージョンではMicrosoft.XMLHTTPというオブジェクトを使うように指示します。ただし、Microsoft.XMLHTTPは動作が遅いため、最も優先順位を低くします。

シリアルを取得する

function getserial(){
        if (get_f && firefox==1){
                get_f=0;
                getbody();
        } else {
                ajax.open("GET", "http://シリアルを取得するURL");
                ajax.onreadystatechange = function() {
                        if (ajax.readyState == 4 && ajax.status == 200) {
                                serial = eval(ajax.responseText);
                                if (serial>maxserial){
                                        maxserial=serial;
                                        get_f=1;
                                }
                        }
                }
                ajax.setRequestHeader("If-Modified-Since", last_modified);
                ajax.send(null);
        }

        if (get_f && firefox==0){
                get_f=0;
                getbody();
        }
}

$sql="select last_value from chat_number_seq";
if($result=pg_exec($handle,$sql)) {$rows=pg_numrows($result);}else{$rows=0;}
if ($rows>0){
        $last_value=pg_result($result, 0, 0);
}
print $last_value;

中身を取得する

function getbody(){
        ajax.open("GET", "本体を取得するURL");
        ajax.onreadystatechange = function() {
                if (ajax.readyState == 4 && ajax.status == 200) {
                        var obj = document.getElementById("maintext");
                        obj.innerHTML = ascii2str(ajax.responseText);
                }
        }
        ajax.setRequestHeader("If-Modified-Since", last_modified);
        ajax.send(null);
}　

function ascii2str(str){
        var kekka="";
        var sumi=0;
        len=str.length;
        for(cnt=0;cnt<len;cnt+=4){
                moji1=str.substr(cnt,1);
                moji2=str.substr(cnt+1,1);
                moji3=str.substr(cnt+2,1);
                moji4=str.substr(cnt+3,1);
                moji="0x"+moji1+moji2+moji3+moji4;
                moji=String.fromCharCode(moji);
                kekka=kekka.concat(moji);
        }
        return kekka;
}

ajaxの今後

このページの先頭へ