November 19, 2005
[Ajax] If-Modified-Sinceヘッダを利用してWebページのキャッシュを行うXMLHttpRequestラッパー
以前書いたエントリ「[Ajax tips] XMLHttpRequest と If-Modified-Since」への一つの対応として、XMLHttpRequest にキャッシュ機能を付加するラッパーを作成してみた。
コード ： xmlhttprequestwithcache.js
各種ブラウザ側でWebリソースの更新確認のマネージメントをきちんとしてくれるようになれば、このライブラリは不要になるので、それまでの一時対応的な位置づけ。
■ 使い方
[prototype.jsを使用している場合]
HTML上で、prototype.js を読み込んだあとに読み込むだけで、Ajax.Request() のGETリクエストがキャッシュつきになる。
--------------------------------------------------------
＜script type="text/javascript" src="/pathtoscript/prototype.js"＞＜/script＞
＜script type="text/javascript" src="/pathtoscript/xmlhttprequestwithcache.js"＞＜/script＞
--------------------------------------------------------
[IEでXMLHTTPを使用している場合]
var req = new ActiveXObject('Msxml2.XMLHTTP');
var creq = new XMLHttpRequestWithCache(req);
// 以降、creq を、XMLHttpRequest と同様に使用する。
[IE以外でXMLHttpRequestを使用している場合]
var req = new XMLHttpRequest();
var creq = new XMLHttpRequestWithCache(req);
// 以降、creq を、XMLHttpRequest と同様に使用する。
■サンプル
こちら
■テストしたブラウザとprototype.js
Firefox 1.0.7
Internet Explorer 6 SP1
prototype 1.3.1
■ライセンス
ライセンスはGPL。
XMLHttpRequestのラッピング方法については、
最速インターフェース研究会の XMLHttpRequest for IE を参考にさせていただいた（こちらもGPL）。
■ 特徴
・XMLHttpRequest(あるいはMicrosoftのXMLHTTP) オブジェクトのラッパー。
XMLHttpRequestと同じプロパティ/メソッドを持つ。
・一度GETしたWebコンテンツをキャッシュする。
・再度GETする際には、If-Modified-Since ヘッダを付与する。
Webサーバ側から304 Not Modified が返る場合には、キャッシュしたデータをresponseText, responseXMLにセットする。
・キャッシュのアルゴリズムはデフォルトでLRUを採用（FIFOも使用可能）
・prototype.js の後にインクルードするだけで、prototype.jsのAjax.Request()にキャッシュ機能が付加されるようになる。
■注意点 、Tipsなど
(1) HTTPステータスコードについて
prototype.js では、HTTPステータスコード304はfail扱いになってしまう。そこで、XMLHttpRequestと同じ使い勝手にするため、XMLHttpRequestWithCacheではHTTPステータスコード改変を行っている。
具体的には、実際のHTTPステータスコードが304であり、かつ、対象URLのデータがキャッシュ上に存在する場合、statusプロパティを200に、statusTextプロパティを'OK'に設定している。
ただし、HTTPレスポンスヘッダーは改変しないので、この点については注意が必要。
(2) デフォルト If-Modified-Since
初回のアクセス（キャッシュがない場合のアクセス）では、If-Modified-Sinceに「01 Jan 1970 00:00:00 GMT」がセットされる。
ただし、If-Modified-Since は XMLHttpRequestWithCache呼出し側のプログラムにて、setRequestHeader()を用いて上書きできる。
(3) キャッシュの操作
ブラウザのアドレスバーに以下のように入力することで、キャッシュを操作することが可能（もちろん、Javascriptコード内でも可能）
・キャッシュの中身を見る（注意：キャッシュに大量のデータが入っている時にはブラウザが不安定になるかもしれません。）
javascript:alert(XMLHttpRequestWithCache.cache)
・キャッシュのサイズの変更（デフォルトは100コンテンツ）
javascript:alert(XMLHttpRequestWithCache.resizeCache(20))
・キャッシュアルゴリズムをFIFOにする。
javascript:alert(XMLHttpRequestWithCache.cacheAlgorithm('FIFO'))