IE の Ajax (XMLHTTP) で、通信が行われたかキャッシュが使われたかを判定する方法

どうやら

以下の方法で判定することができるようです。

// リクエストオブジェクトを作る
var req = new ActiveXObject('Microsoft.XMLHTTP');

// フラグの準備
var sended = false;

// readystatechange イベントを待つ
req.onreadystatechange = function() {
    if (req.readyState == 4) {

        // キャッシュに存在しない場合
        if (sended) {
            alert('loaded');
        }

        // キャッシュに存在する場合
        else {
            alert('cached');
        }

    }
};

// 通信開始
req.open('GET', 'hoge');
req.send();

// フラグを立てる
sended = true;

解説

• IE では、キャッシュにファイルが存在した場合に req.send 関数の中で req.onreadystatechange が呼ばれる
• つまり、さっきの例の sended というフラグを立てる前に req.onreadystatechange が呼ばれる
• これを利用すれば、キャッシュから読み込まれたか、通信が行われたかが分かる

ということです

どんなものがキャッシュに入っているか

これで試してみると、コンテンツ中で読み込まれたファイル (css とか js とか) は Ajax でアクセスしたときにキャッシュされているようです。
ということは、逆に言ってしまうと js とか css とかの生のテキストが欲しい場合は、非同期ではない Ajax でアクセスしてしまってもなんら問題ない訳ですね。（実際には同期して、キャッシュから読んでいるので）

さらに考える

あと、キャッシュされているなら以下の二つのコードは全く同じということですね

var req = new ActiveXObject('Microsoft.XMLHTTP');
// 非同期通信でも
req.open('GET', 'hoge');
req.send();
var text = req.responseText;

var req = new ActiveXObject('Microsoft.XMLHTTP');
// 同期通信でも
req.open('GET', 'hoge', false);
req.send();
var text = req.responseText;

さらに考える

ということは、以下のようにすればキャッシュにある場合だけ使うということができるということですね！
これは使えるかも！

var req = new ActiveXObject('Microsoft.XMLHTTP');

// 非同期通信するが、 onreadystatechange は使わない。
req.open('GET', 'hoge');
req.send();

var text = null;
try {
  text = req.responseText
}
catch(e) {
  // キャッシュにない場合はここにくる
  req.abort();
}

まとめ

IE 限定ですが、キャッシュから取得されたか通信が行われたかを判定できることが分かりました。