概要
いまさらあけましておめでとうございます。
2月に入り、入社1年経ちました。
素敵な1年になるよう頑張ります!!
さて本題です。
Ajaxを使ってブラウザを更新せずにhtmlの一部だけを数秒毎更新する方法です。
チャットや掲示板をイメージしてもらえると、分かりやすいかと思います。
本当はDBとかに値が入ったら更新というのがベストですが、簡易版ということで。
内容
prototype.jsを使用。
html
1 2 3 4 5 6 7 |
<html> <body> test <div id="test"></div> // ここに通信結果が定期的に挿入される </body> </html> |
Ajax
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript"> new Ajax.PeriodicalUpdater( 'test', // 返り値を挿入するidを指定 './xxx.html', // 非同期通信を行いたいURL { method: 'get', frequency: 2 // 何秒毎に通信を行うか } ) </script> |
まとめ
これだけでページの一部を指定時間ごとに更新させることができます。
今はあまり使われないですかね?
昔の掲示板とかチャットは5秒毎に更新とかあった気がします。
でもページ全体の更新が多かったので、
5秒毎に画面がチカチカして、ちょっと鬱陶しかったですね。笑
実はこれやったのだいぶ前なんです。
“これだけで”とか言いましたが、
Ajaxの概念みたいなところからなかなか理解できなかった覚えがあります…。
少しずつですが、いろんなことを覚えたいですね!