Hatena::ブログ(Diary)

葉っぱ日記 このページをアンテナに追加

2009-09-25

[] jQuery.ajax でリクエストをキャッシュさせない方法  jQuery.ajax でリクエストをキャッシュさせない方法を含むブックマーク

jQuery.ajax を使ってGETでリソースにアクセスした場合、IEでは2回目以降のリクエストが実際には発行されずにキャッシュされた結果が使われてしまいます。これを防ぐには

$.ajax( {
    url : "http://example.com/",
    cache : false,
    data : {
        a : "abcd"
    },
    ...
} );

のように、cache オプションに false を指定すればいいようにドキュメント(http://docs.jquery.com/Ajax/jQuery.ajax#toptions)に書かれています。実際に cache : false を設定してみると、リクエストの発行される URL は、 http://example.com/?a=abcd&_=1253861397368 のようにクエリの末尾に現在時刻のミリ秒が付加されたものになります。

たいていの場合はこれでOKなのですが、相手先の仕様によってはURLの末尾に無意味なデータが付与されるのを許容しないという状況もあり得ます。

そのような場合は、XMLHttpRequest.setRequestHeader を使ってリクエストヘッダで If-Modified-Since を設定することでキャッシュされた結果が帰ってくるのを回避できます。ただし、XMLHttpRequest.setRequestHeader は XMLHttpRequest.open が呼ばれた以降でなければエラーになりますので、jQuery.ajax を使う場合には beforeSend でコールバック関数を指定してやります。

$.ajax( {
    url : "http://example.com/",
    cache : true, // URL末尾のタイムスタンプはいらないよ
    param : {
        a : "abcd"
    },
    beforeSend : function( xhr ){
        xhr.setRequestHeader("If-Modified-Since", "Thu, 01 Jun 1970 00:00:00 GMT");
    },
    ...
} );

このように、XMLHttpRequest.send に先立ち If-Modified-Since を適切に設定することで、リクエストをキャッシュさせずに発行することができます。…という滅多に遭遇しないであろうシチュエーションだけど書いておかないと忘れそうなので自分用メモでした。