放置していたってレベルじゃない勢いだったこのBlogですが、久々に色々と調べごとをして、勉強になった事があったので、報告しておきます。
今回はjavascriptのライブラリ「jQuery」とフレームワーク「prototype」でのページの自動更新についてです。
僕は今までWebページの部分更新でprototypeを使ってたんですが、どうやらjQueryでも出来るらしい、と言うか実装してみたのでそれについてご紹介です。
部分更新と言うのは、ページの一部分だけを最新の状態に書き換えたいるというものです。
あるページをリアルタイムに自動更新をしようとしたときに、ページ全体を読み直していたらサーバに負荷がかかるし、速度が大変な事になります。
なので、それを一部分だけ更新するようにして、負荷を抑えることが出来るんですね。
あと更新部分以外には影響を及ぼさないので、もしもページ内に入力フォームなんかがあった時に、その部分が消えてしまうなんてことも防ぐ事が出来ますね。
さて、ではその実装について、まずjQueryとprototypeはそれぞれのサイトからダウンロードしてきてパスを通して頂くとしてですね。
jQuery：https://jquery.com/
prototype：http://prototypejs.org/
で、僕の実装では以下のようになりました。
prototype、jQuery両方のjsファイル名は「reload.js」とします。
prototypeの場合
var myajax;
function reload() {
myajax = new Ajax.PeriodicalUpdater(
"hoge", // 入れ替える部分のID
"index.php", // 入れ替える内容
{
"method": "get",
"parameters": "value=1234", // パラメータ
frequency: 1, // 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();
}
}
jQueryの場合
function reload() {
$('#hoge').load('index.php?value=1234'); //初回呼び出し
setInterval(function(){
$('#hoge').load('index.php?value=1234');
}, 1000); // 1000ミリ秒感覚で更新
}
HTML側
<head>
<title>TestPage</title>
<script type="text/javascript" charset="UTF-8" src="prototype.js"></script>
<script type="text/javascript" charset="UTF-8" src="jquery.min.js"></script>
<!-- 上記何れかを選択してください -->
<script type="text/javascript" charset="UTF-8" src="reload.js"></script>
</head>
<body onload="reload();">
<div id="hoge">
ここが更新されます。
</div>
</body>
jQuery側の初回呼び出しと言うのは、setInterval関数は間隔をあけて実行してくれる関数なんですが、最初の実行時にもご丁寧に指定された間隔をあけて実行してくれます。
なので、例えば間隔を10000ミリ秒に指定していた場合、最初の画面が表示されるまで10秒待たされる事になるんですね。
そのために最初の表示を行っています。
jQueryの実装の方が簡素で分かりやすいように見えますね。
ただprototypeの方の関数Ajax.PeriodicalUpdaterは更新部分に変化が無かった場合には次回の自動更新の間隔を伸ばして負荷を減らすという機能があるようです。
このページで分かりやすく解説されています。
試していないのですが、jQueryのプラグインにも同じような機能が実装されているみたいで、それについてはこのページで解説されているので、また試したいところです。
ちなみにjQueryとprototypeの共存も可能みたいですが、 競合する部分があるようで、オススメはされて無かったです。方法についてはこちらのページで解説されてましたが、僕は面倒だったので試してません。何もやってないなぁ僕･･･
0 件のコメント:
コメントを投稿