prototype.jsのAjax.PeriodicalUpdaterをIEでも正しく動かす方法:phpspot開発日誌

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

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

関連サイト