PearlやPHPでサイト上にデータを表示する場合で、そのデータがリアルタイムで変わる場合、ページをリロードをせずに、そのページの一部のデータを自動的＆定期的に変える方法について書いています。
【参考】jQueryのAjaxを使って、ページ遷移せずにデータをPOSTする方法
これは、Ajaxを使えば実現出来ます。
Ajaxというのは、JavaScriptの通信機能を使ってデータを取得し、画面を書き換える方法の総称のことです。「JavaScriptを使ったプログラムの一種」です。
具体的には、以下のページを比較してみてください。
具体的な方法は、以下の通りです。サンプルコードもあります。
に記載しているコードを使用すれば実現出来ます。一つ注意しなければならないのは、prototype.jsのバージョンを1.7で使って下さい（2013年3月現在）。1.6を使うとエラーが発生します。
サンプル
金のリアルタイム価格を取得するプログラムで使っているコードの一部をサンプルとして書いておきます。
【HTML】
aj_index.php で表示される内容を、 container へアウトプットする、というコードです。
aj_index.php 自体は、表示させたその時の価格などを表示しています。それを下のHTMLで呼び出して、裏側で5秒毎にリロードしているという訳です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
//head に記載 <script type="text/javascript" src="./js/prototype.js"></script> <script type="text/javascript"> var myajax; function execute() { myajax = new Ajax.PeriodicalUpdater( "container", "aj_index.php", { "method": "get", // "parameters": "p=hoge", frequency: 5, // 5秒ごとに実行 onSuccess: function(request) { // 成功時の処理を記述 // alert('成功しました'); // jsonの値を処理する場合↓↓ // var json; // eval("json="+request.responseText); // ↓IEでもキャッシュを読み込まずに毎回リモート接続を実行するためのコード(パラメータの書き換え) var str = myajax.options.parameters; var hash = str.parseQuery(); hash["ajax_request_id"] = Math.random(); hash = $H(hash); myajax.options.parameters = hash.toQueryString(); }, onComplete: function(request) { // 完了時の処理を記述 // alert('読み込みが完了しました'); // jsonの値を処理する場合↓↓ // var json; // eval("json="+request.responseText); }, onFailure: function(request) { alert('読み込みに失敗しました'); }, onException: function (request) { alert('読み込み中にエラーが発生しました'); } } ); } function stop() { if (myajax != null && myajax != undefined) { myajax.stop(); } } </script> //body に記載 <div id="container"></div> |
このプログラムを作りたいが、ご自身では難しいという場合は、お問い合わせ下さい。8000円（税別） / 時 でプログラムの制作を受託します。
