必要に迫られて Ajax のおべんきょ。
正直なとこ JavaScript 自体がデバグしずらいわ、UA に依存するわ、何よりクライアント側で実行されていて全体の動きがわかりづらい…というか要するに苦手なんですね。
で。
「フレームとか iframe 使えばいーじゃーん」なんて思ったりするのですが、不勉強でいるうちにいつの間にか iframe は非推奨(というか廃止)されているわけで、仕方なく Ajax の使い方(?)を教えてくれ～とぐーぐる先生に泣きついた次第。
で。
ほぼコピペですが、ざっくり。
<script type=”text/javascript” src=”/js/prototype.js”></script>
<script type=”text/javascript”>
<!–
var myajax = new Ajax.PeriodicalUpdater(
“container”,
“./test.php”,
{
“method”: “get”,
“parameters”: “p=hoge”,
frequency: 600, // 10分ごとに実行
onSuccess: function(request) {
var str = myajax.options.parameters;
var hash = str.parseQuery();
hash[“ajax_request_id”] = Math.random();
hash = $H(hash);
myajax.options.parameters = hash.toQueryString();
},
onFailure: function(request) {
alert(‘読み込みに失敗しました’);
}
}
);
//–>
</script>
<div id=”container”>
<?php
require_once(“./test.php”);
?>
</div>
キモは
・ id=”container” に Ajax で読み込んだコンテンツを表示する。
・ Ajax で読み込めなかったときのために、require_once() でも読み込んでおく
・ frequency: (秒数)で指定したインターバルで定期的にコンテンツを読み込む。
・ onSuccess のとこでランダムなパラメータを URL に付加して、ブラウザキャッシュで解決させないようにする。
以上！
…まぁページ全体がリロードしないだけで、定期的なサーバへのアクセス(非同期通信？)は発生するわけですから、あまり乱用しない方がいいですわね。