質問: function() { \$.ajax({ url: 'test.cgi', type : 'get', dataType: 'text', success: function(data) { \$('#text').html(data); return false; }, error: function(data) { //alert('読込に失敗しました...'); } }); setTimeout("reload()", 3000); } 現在3秒毎に更新としているのですが、 これを「log/log.txt」 の更新時間で、test.cgiを リロードさせるようにするには、 どうすればいいでしょうか? できればソースで教えて頂けるとありがたいです。 どうかよろしくお願いいたしますm(_ _)m
回答: $.ajaxだけでは、 log/log.txtが更新された時点で、サーバーからブラウザに対して 通知する方法がありませんので、現状のように、定期的(?秒おき)に ポーリングして、log.txtが更新されていないかをブラウザ側から確認してやるしかありません。 (1) 画面が「ゲップ」されるのが見苦しいだけなら、定期ポーリングするのはそのままで $.ajaxのsuccess: function内の ~.htmll(data);の部分を 現在表示中の内容とajaxが入手したdataを比較して、 更新されたとときだけ再作画するように条件分岐を入れるとよいでしょう。 理想を言えば、現在表示中の内容に対して増減した部分のみJavaScriptで 削除・挿入するようにすると更新時の表示がスムーズになります。 (htmlへの挿入時にアイテムごとにエレメントを分けておいたり、 test.cgiでアイテムの区別がつくようIDを付けて戻すとか、 表示中の最終時刻と比較して、変更アイテムのみ送るようにして通信量を下げる等の 工夫は必要ですが) (2) サーバー負荷や通信トラフィックを削減したいのなら (案1)test.cgi側で ロングポーリング手法を行う (またはcomentの実装) つまり、log/log.txtが更新されてなければ、test.cgiはすぐに応答しないで タイムアウトしない程度まで応答を保留する。 (案2)WebSocketを使う ただしサーバーやブラウザに対応が必要