締切済み

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

2010/02/01 21:42

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

tarobe98
お礼率62% (5/8)

JavaScript
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

みんなの回答

Chaire
ベストアンサー率60% (79/130)

2010/02/02 20:11 回答No.3

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

質問者

お礼 2010/02/07 06:08

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

ログインすると、全ての回答が全文表示されます。

babu_baboo
ベストアンサー率51% (268/525)

2010/02/02 16:55 回答No.2

ごみ投下。叩かれ台です。全角空白は半角に。非同期じゃない時点で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>

ログインすると、全ての回答が全文表示されます。