作成したWebページの一部だけを更新したい。
jQueryのAjaxとそれを定期的に動作させるために jquery.periodicalupdater.js を利用する。
jquery.periodicalupdater.js はこちらから取得
更新部分を実装する
1秒間隔で "ajax.txt" を読み込んで、文字列を書き換える。
…ように実装したつもりだが一回しか更新されない。
"ajax.txt" を更新するたびに文字列が変わるような想定だったが、
何がいけないのかいまいちわからない。。
追記：解決しました。コード内コメント部参照
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.periodicalupdater.js"></script>
<script type="text/javascript">
$(function(){
$.PeriodicalUpdater('./ajax.txt',{
method: 'get',
minTimeout: 1000,
type: 'html'
},
function(data){
<!-- 元々の実装、PeriodicalUpdaterで読み込んでいるためloadは不要、textの更新だけ行う
$("#ajax_txt").load("./ajax.txt");
-->
$("#ajax_txt").text(data);
});
});
</script>
</head>
<body>
<div id="ajax_txt">aaa</div>
</body>
</html>
オプション設定を見直す
なぜか時間が経つと更新されなくなるので、
オプション設定を再度確認したところ、
multiplier と maxTimeout の組み合わせが原因になっていた。
処理実行毎に minTimeout の設定値に対して multiplier の設定値を掛けて次のインターバルとして使い、
そのインターバルの最大値が maxTimeout の設定値になっていた。
デフォルト設定では下記設定になっているため、
自分で設定しないとインターバルがどんどん長くなっていっていたみたい。
maxTimeout:64000, // maximum length of time between requests
multiplier: 2, // if set to 2, timerInterval will double each time the response hasn't changed (up to maxTimeout)
改めて実装しなおしたのが下記のコード
$.PeriodicalUpdater('./ajax.txt',{
method: 'get',
minTimeout: 1000,
type: 'html',
multiplier:1,
maxCalls: 0
},
参考にしたWebページ
「jQuery日本語リファレンス」
http://semooh.jp/jquery/
「Think deeply, Do less, More effective」
http://kwski.net/jquery/1022/