- 締切済み
cgiでポーリングして取得したデータが変化していた時のみHTMLをリロードする方法
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)
「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
- ベストアンサー率51% (268/525)
ごみ投下。叩かれ台です。全角空白は半角に。 非同期じゃない時点で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>
- yambejp
- ベストアンサー率51% (3827/7415)
ご質問の件は既に回答のあるようにajaxで処理することになりそうです。 ただ、今回の質問内容を見る限り、「ajaxってなんですか？」の レベルの質問ですので、一度ajaxについて理解を深めてから 再度質問をすることをお勧めします。 ajaxとは・・・を語りだせば本の２～３冊は書ける内容になるので。
関連するQ&A
- ポーリングとHTMLデータのリロードの方法
次のことをするcgiを作りたいのですが 1. 起動したらデータを読み込み、その内容を表に表示。(即時） 2. 5秒ごとにデータを読みに行き（ポーリング）、変化があったら表を リロードして新しいデータの表を表示する。 下記のようにすると、リロードされずに表がいくつも表示されてしまいます。 （リロード処理を入れてないので当たり前なんですが） また、その表示が5秒ごとではなく、かなり長い時間（数十秒?)たってから 1度に数個表示されるというのを繰り返してしまいます。 Q1 リロードさせるには、javascriptを使えばよいのかと思うのですが、 どのようなスクリプトを使えばよいのでしょうか。 また、javascriptでなくても他に方法があれば教えてください。 (Perlのプログラム上では無理でしょうか) Q2 起動時にまずは最初のデータを表示させたいのですが、sleeを使うと 起動後すぐ表示されないように思いますが、どのようにしたらよい でしょうか。 なお、下記テストプログラムでは、データを更新して表示する処理は 省いています。 よろしくお願い致します。 －－－－－－－－－－－－－－－－－－－－－－－－－ $kaisuu = 0; $change = 0; while (1) { &data; if($kaisuu == 0 ){ &hyou; $kaisuu = 1; }elsif (($kaisuu == 1) && ($change == 1)){ &hyou; } sleep 5; } sub data { #データの読み込み処理 if(データに変化あり){ $change = 1; } } sub hyou { print "Content-type: text/html\n"; print "\n"; print "<html>\n"; print "<head>\n"; print "<title>Test</title>\n"; print "</head>\n"; print " <table border=2 frame=border>\n"; print " <tr><td>項目</td>\n"; print " <td>名前</td></tr>\n"; print " <tr><td>１</td>\n"; print " <td>まるまる</td></tr>\n"; print " <tr><td>２</td>\n"; print " <td>ばつばつ</td></tr>\n"; print " </table>\n"; print "</body>\n"; print "</html>\n"; }
- ベストアンサー
- Perl
- HTML上（javascript）からCGIを実行する方法
javascriptから外部実行ファイル（javascriptファイルではなくperlなどのCGI） を実行する方法を探しています。 下記のようにindex.htmとtest.cgiファイルを用意して、index.htm内の javascriptから外部cgiを実行させ、cgiの結果（test.cgiでは単に 『test』と表示するのみ）を表示したいと考えています。 利用増ですが、cgiやssiが使用できないサーバにindex.htmを置いて、 cgiが使用できるサーバ上のcgi結果を取得したいものです。 通常のcgiのように、1ページでcgi結果を表示するものではなく、 HTMLファイルの一部にcgi処理結果を表示させたいものです。 そもそも、SSIを使用しなければ下記のようなHTML内にcgiなどの 実行結果を表示する事は出来ないのでしょうか。 よろしくお願い致します。 ※下例のプログラムではcgi結果は表示されませんでした・・・。 ---<index.htm>---------------------------------------- <HTML> <BODY> <SCRIPT language="Javascript" src="http://xxx.xxx.xxx.xxx/test.cgi"></SCRIPT> </BODY> </HTML> ---<test.cgi>---------------------------------------- #!/usr/bin/perl print "test"
- ベストアンサー
- JavaScript
- 「SubmitせずにAjaxからCGIを呼び出して結果をHTML上に表
「SubmitせずにAjaxからCGIを呼び出して結果をHTML上に表示したい」 HTMLファイル上にテキストボックスとそれと対になるラベル（ラベルじゃなくても良いのですが。。）のセットがいくつかあります。 テキストボックスにコードを入力したら、ラベルにそのコードに対応する商品名を表示したいと思っています。 テキストボックスにコードを入力後、フォーカスが離れたら（Onchangeで）Ajaxでそのコードの値を取得し、そのデータをCGIに渡してサーバにあるDBに接続し、その結果をHTML上のラベルに表示したいと思います。 Sbmitせずにフォーカスが離れた場合に、データをCGIに受け渡し、そのデータを画面遷移しないで、HTML上に表示するのはどのようにすればいいのでしょうか。 Ajaxを使えばいいと教わったのですが、色んなサイトを調べてみたのですが、Ajaxが初心者で、よくわからず、コードなどございましたら教えて頂けましたら嬉しいです。 よろしくお願い致します。
- ベストアンサー
- AJAX
- クッキーが邪魔をする
AjaxとCGI(Perl)は初心者のものです。 Ajaxを使ってCGIにデータを送信し、TXTを書き換えるのを作りました。 しかし、書き換えたTXTをAjaxで読み取ると、書き換える前のままなのです。 TXTを開いてみると更新されていて、 それを開いてから出ないと、HTMLに反映されません＞＜ 「HTML」⇒⇒(１)⇒⇒「CGI」⇒⇒(２)⇒⇒「TXT」 ↓ ↑ ⇒⇒⇒⇒⇒⇒⇒⇒(３)⇒⇒⇒⇒⇒⇒⇒↑ (１)データをAjaxで送信 (２)CGIを使って書き換え (３)AjaxでTXTの内容を読み取り 上の(３)で、古いデータが引き出されます。 どなたか分かる方がいましたら、お助けください。
- ベストアンサー
- AJAX
- ダイナミックHTMLの取得方法
ブラウザでURLにアクセスすると電力を表示する装置があります。 電力の値だけを取り込んでファイルに保存したいのですが、 HTMLソースを取り込んで見ると、Javascriptで書かれたプログラムが含まれており、 WebサーバーにあるPearlのプログラムに10秒毎にアクセスして値を更新しているようです。 この更新された値をファイルに保存するにはどんな方法がありますか？
- 締切済み
- JavaScript
- AJAXで取得されているデータのスクレイピング
PerlでWEB上のデータを収集したりしていますが、 AJAXでデータを取得する部分は、ブラウザでonload後に 行われている為、サーバサイドで実行するPerlで取得する事が出来ません。 そもそもデータの取得は不可能でしょうか？ それとも他に実現可能な手段はありますでしょうか？ 宜しくお願いいたします。
- 締切済み
- Perl
- HTML（AJAX）－perl -DB(MySQL)-perl -HTML（AJAX）のデータの流れについて。
こんにちわ。 早速ですがよろしくお願いします。 タイトルの通り、画面入力のデータAをperlに投げてAを元にperl側でDBデータ取得（A'）、A'を元の入力画面で処理結果として出力する事を考えています。 HTML（AJAX）－perl -DB(MySQL)-perl ↑ここまではできたのですが、最後の perl -HTML（AJAX） が出来ず、A'を入力画面に返す方法が分かりません。 ちなみに処理結果（A'）をHTML側でYahoo! User Interfaceを使用してテーブル処理する予定です。 お恥ずかしながらプログラミングに関しての知識が乏しくて恐縮なのですが、どうぞよろしくお願い致します。
- ベストアンサー
- Perl
- HTMLの外部jsのようなcgiファイルについて
はじめまして。かなりレアなケースになると思うのですが、すでにリリースしており、泣き寝入りする事態が起きまして、CGIの出力のところがわからなくて困っております。 １、あるHTMLをブラウザで開くと<head>内のCGIが実行される。 <script language="JavaScript" type="text/javascript" src="○○.cgi"></script> ２、このCGIが実行されるとMySQLのデータを取得し、HTMLでデータを取り扱えるよう、取得した値をJavaScriptの配列の形式に加工され、「Temporary Internet Files」に○○.cgiが保存されます。 var 配列A=new Array(); 配列A[0]="0000001,名前,住所"; 配列A[1]="0000001,名前,住所"; ※○○.cgiを開くと右のような配列の表記が記載されている。 ３、このHTML内で、上記の配列をJavaScriptで呼び出せば、Temporary Internet Filesに保存されたcgiファイルのデータ（配列形式の）が表示されるので、まるで外部JSの配列を扱っているかのようにDBのデータを取得することができます。 mysqlのデータを取得した後、CGIでHTMLに吐き出すぐらいはわかるのですが、 画面上に表示させるのではなく、外部JSなら普通どこかサーバにあるJSファイルを見にいくと思うのですが、Temporary Internet Filesに保存され、それが値として操作できるところです。 このCGIの出力の記述がまったくわからないので困っております。 わかりにくい文章で本当に申し訳ございません。どうかよろしくお願いします。
- 締切済み
- CGI
- ＡＪＡＸでのリロードに関して
ＡＪＡＸでのリロードに関して 教えて下さい。 あるページを一定の時間でリロードしたいと考えています。 その際に、javascript を使用すれば、以下のような記述で何分か単位で 自動リロードが可能ですが、それをＡＪＡＸにて実現するにはどのように記述 すれば良いでしょうか？？？ ***** javascript の場合 <TITLE>ページをリロードする方法</TITLE> <SCRIPT TYPE="text/javascript"> <!-- var timer = "300000"; //指定ミリ秒単位 function ReloadAddr(){ window.location.reload(); //ページをリロード } setTimeout(ReloadAddr, timer); //--> </SCRIPT> よろしくお願いします。
- ベストアンサー
- AJAX
お礼
回答どうもありがとうございました。 これを元に検討してみようと思います。