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の値は毎回変わります。
関連サイト
最新のブログ記事(新着順)
- 15000以上のいい感じの線形アイコン「Lineicons」
- CSSやTailwindでのCSSスニペットライブラリ「CSS Snippets Library」
- AIを使ってサイトマップが作れる「Octopus.do」
- ライブラリ依存のないモーダルオープンライブラリ「Blendy」
- 個性的な明朝フリーフォント「築豊初号明朝OFL」
- CSSで太陽が差し込むようなアニメーション実装
- 可愛くアニメーションする「beautifully crafted animated icons」
- アイソメトリックなアイコンがアイコンがPNG,SVGでゲットできる「Isoicons」
- ユニークなカタカナフォントtorisippo
- 美しいメッシュグラデーションをCSSで簡単に取得できる「MSHR」
- 過去のエントリ