« October 2005 | メイン

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'))

投稿者 msano : 04:55 PM | コメント (0)