プロが教えるわが家の防犯対策術！

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

解決済

  • 質問者：tarobe98
  • 質問日時：
  • 回答数：3件

Perlのカテゴリで質問したところ（質問番号：5634620）、JavaScriptで実現
できるかもしれないとのアドバイスを頂いたので、こちらで質問します。

次のことをするcgiを作りたいのですが
　1. cgiを起動したらある装置からデータを読み込んできて配列及びファイルに
　　書き込み、その内容を表(HTML）に表示。(即時）
　2. 5秒ごとに装置に対してデータを読みに行き（ポーリング）、変化があったら
　　（セーブしてあるデータと読みに行ったデータに違いがあったら）表（HTML）を
　　 リロードして新しいデータの内容を表示する。

perlのカテゴリで下記のようなアドバイスを頂きましたが、
Javascriptは全くわからず、お手上げ状態です。

>Ajaxを使えばできそうな気がします。
>setInterval(checkData,5000);
>として5秒毎に、checkData関数を呼び出します。
>checkData関数内では、Ajaxを使ってサーバーのデータを読み込み、現在の
>データと照合し、更新していれば、
>location.reload(true);
>として、リロードさせます。

実際にどの様に記述すれば実現可能か、教えていただけませんでしょうか。
よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： Chaire
  • 回答日時：

「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 が出てくれば、それらと組み合わせてもう少し複雑なやり取りができるようになるでしょう（何と呼ぶようになるのかは分かりませんが）。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答どうもありがとうございました。
これを元に検討してみようと思います。

通報する
お礼日時：2010/02/07 06:08

No.2

  • 回答者： babu_baboo
  • 回答日時：

ごみ投下。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title></title>
<body>
<div id="tb"></div>

<script type="text/javascript">
//@cc_on
function getFile( file ) {
　var data = null, req;
　
　/*@ try { req = new ActiveXObject( 'Msxml2.XMLHTTP.6.0' ); } catch( e1 ) {
　　　　try { req = new ActiveXObject( 'Msxml2.XMLHTTP.3.0' ); } catch( e2 ) { @*/
　　　　　try { req = new XMLHttpRequest; } catch( e3 ) { return null; } /*@ } } @*/
　
　if( req ) {
　　req.open( 'GET', file, false );
　　req.send( '' );

　　data = 200 == req.status ? req.responseText: 'Error';
　　req = null;
　}

　return data;
}


function createHTMLTable( data ) {
　var html = [ '<table border="1">' ];
　var cnt = 0;
　var rows = data.split( /\r\n|\r|\n/g );
　var tmp, cells;
　
　while( tmp = rows[ cnt++ ] ) {
　　cells = tmp.split( /\t|,|\s/g );
　　html.push( '<tr><td>' + cells.join( '<td>' ) );
　}
　
　return html.join( '' ) + '</table>';
}


function updateTable( target, fileName, intervalTime ) {
　var e = document.getElementById( target );
　var b;
　var f = function ( ) {
　　var data = getFile( fileName );
　　if( b != data )
　　　e.innerHTML = createHTMLTable( h = data );
　};
　f();
　setInterval( f, intervalTime );
}

updateTable( 'tb', 'test7.html', 5000 );

</script>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yambejp
  • 回答日時：

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


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

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報