prototype.jsのAjax.PeriodicalUpdaterをIEでも正しく動かす方法
2006年12月15日-
Ajax.PeriodicalUpdater - Ajaxで指定エレメントの内容を定期的に書き換える - prototype.jsリファレンス
prototype.jsのAjax.PeriodicalUpdaterをIEでも正しく動かす方法。
prototype.jsのAjax.PeriodicalUpdaterとは、指定のDIV要素(例えば <div id="content"></div>)を指定秒数で定期的に上書きするための機能です。
主に、チャットなど、定期的に特定部分をAjaxによってサーバの返す値に書き換えたい場合に用います。
しかし、IEでは、 http://example.com/server.php というURLにリクエストした場合、2回目以降、キャッシュを読み込み、サーバにリクエストに行かないという点があります。
(FireFoxでは同じURLでも毎回読んでくれるようです)
そこで、次のようにリクエスト成功時にパラメータを書き換えてあげるとうまく動作します
var myajax = new Ajax.PeriodicalUpdater(
"container",
"/samples/ajax/test.php",
{
"method": "get",
"parameters": "p=hoge",
"frequency": 5, // 5秒ごとに実行
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();
}
}
);
元のリクエストをパースしているので、最初に設定した p=hoge というパラメータを消すことなく、ajax_request_id というパラメータを付与することでキャッシュを読み込まないようにしています。
オレンジ部分が該当の部分になります。
この処理により、2回目以降のAjaxリクエストのパラメータが 「p=hoge&ajax_request_id=0.47884363621686776」のようになります。ajax_request_idの値は毎回変わります。
関連サイト
最新のブログ記事(新着順)
- iPhone, iPad, Mac, Android などのフリーのベクターモックアップ
- macOS用の使いやすいカラーピッカー「pika」
- CSSでボタンにサイバーパンク効果を与えるサンプル
- カラフルな球体をWEB上でうごかすThree.jsをつかったサンプル
- ダークモード対応のミニマルなHTMLページを作れるCSS「spcss」
- CSSのみで実現できるローディングアニメーションやエフェクト集「Css Effects」
- スムーズに横スクロールするレイアウトサンプル
- 斬新なページメニューが作れる「Inline Menu Layout with Gallery Panel」
- 世界中で今何時を計算できる「Spacetime」
- シンプルなタブUIを実現できる「Skeletabs」
- 過去のエントリ