cgiでポーリングして取得したデータが変化していた時のみHTMLをリロードする方法

Question

Perlのカテゴリで質問したところ（質問番号：5634620）、JavaScriptで実現
できるかもしれないとのアドバイスを頂いたので、こちらで質問します。

次のことをするcgiを作りたいのですが
　1. cgiを起動したらある装置からデータを読み込んできて配列及びファイルに
　　書き込み、その内容を表(HTML）に表示。(即時）
　2. 5秒ごとに装置に対してデータを読みに行き（ポーリング）、変化があったら
　　（セーブしてあるデータと読みに行ったデータに違いがあったら）表（HTML）を
　　 リロードして新しいデータの内容を表示する。

perlのカテゴリで下記のようなアドバイスを頂きましたが、
Javascriptは全くわからず、お手上げ状態です。

>Ajaxを使えばできそうな気がします。
>setInterval(checkData,5000);
>として5秒毎に、checkData関数を呼び出します。
>checkData関数内では、Ajaxを使ってサーバーのデータを読み込み、現在の
>データと照合し、更新していれば、
>location.reload(true);
>として、リロードさせます。

実際にどの様に記述すれば実現可能か、教えていただけませんでしょうか。
よろしくお願い致します。

Chaire · Accepted Answer

「Ajax」なるバズワードはどうでも良いことで、必要なのは HTTP クライアント。

if ('undefined' === typeof XMLHttpRequest)
　XMLHttpRequest = (function() {
　　var I = arguments.length;
　　var i;
　　for (i = 0; i < I; i++) {
　　　try {
　　　　arguments[i]();
　　　　return arguments[i];
　　　} catch (err) { ; }
　　}
　　return null;
　})(
　　function() { return new ActiveXObject('Msxml2.XMLHTTP.6.0'); },
　　function() { return new ActiveXObject('Msxml2.XMLHTTP.3.0'); })


var gLastModified = 'Tue, 2 Feb 2010 19:43:31 GMT';
var gClient = new XMLHttpRequest;
var gTarget = 'hoge.cgi';

doRequest();

function doRequest() {
　gClient.open('GET', gTargetURI, true);
　gClient.setRequestHeader('If-Modified-Since', gLastModified);
　gClient.onreadystatechange = onreadystatechange;
　gClient.send(null);
}

function onreadystatechange() {
　if (gClient.readyState === 4 /*XMLHttpRequest.DONE*/) {
　　try {
　　　switch (gClient.status) {
　　　case 304 :
　　　　// Not Modified
　　　　break;
　　　case 200 :
　　　　// OK
　　　　// huga(gClient);
　　　　gLastModified = gClient.getResponseHeader('Last-Modofied');
　　　　break;
　　　default　:
　　　　// others
　　　　break;
　　　}
　　} catch (err) { ; }
　　
　　setTimeout(doRequest, 5000);
　}
}

XMLHTTP はその名の通り XML のやり取りに有用です（send() に DOM 文書を渡せば自動的に XML 直列化して POST し、サーバ応答の中身は自動的に DOM 解析される）。しかし一応は XML 以外のデータも扱え、最近では簡易 HTTP クライアントとしての側面が注目されています（いわゆる「Ajax」）。WebSocket や WebWorker が出てくれば、それらと組み合わせてもう少し複雑なやり取りができるようになるでしょう（何と呼ぶようになるのかは分かりませんが）。

babu_baboo · Answer

ごみ投下。叩かれ台です。全角空白は半角に。非同期じゃない時点でAjaxじゃないのか？！そして、これでいいのか？などなど、どなたか教えて～！

yambejp · Answer

ご質問の件は既に回答のあるようにajaxで処理することになりそうです。
ただ、今回の質問内容を見る限り、「ajaxってなんですか？」の
レベルの質問ですので、一度ajaxについて理解を深めてから
再度質問をすることをお勧めします。
ajaxとは・・・を語りだせば本の２～３冊は書ける内容になるので。

cgiでポーリングして取得したデータが変化していた時のみHTMLをリロードする方法

「Ajax」なるバズワードはどうでも良いことで、必要なのは HTTP クライアント。

ごみ投下。

ご質問の件は既に回答のあるようにajaxで処理することになりそうです。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング