前の記事 ≪:prototype.jsでクロスブラウザなWYSIWIGエディタ
次の記事 ≫:Web2.0風デザインの超クールなWordPress用テンプレート「GlossyBlue」

prototype.jsのAjax.PeriodicalUpdaterをIEでも正しく動かす方法

2006年12月15日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法

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の値は毎回変わります。

関連サイト

関連の記事検索:JavaScript, Ajax, prototype.js, チュートリアル
スポンサード リンク

By.KJ : 2006年12月15日 07:05 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)