JSONをWebから取得した際に、JSONの戻り値がブラウザでキャッシュされ意図しない動作をする場合があります。
この記事では、取得した JSON がキャッシュされないようにする方法を紹介します。

対策

キャッシュを防ぐ方法として、以下の対策があります。

URLのパラメーターにタイムスタンプを付加する

URLのパラメーターにタイプスタンプを付けることで、常に違うURLでJSONのハンドラにアクセスし、ブラウザによるキャッシュを防げます。

コード例

JavaScriptでXMLHttpRequestを用いてJSONを返すハンドラにアクセスする例です。

  <script type="text/javascript">
  function getData(id){

    httpObj = new XMLHttpRequest();
    httpObj.onreadystatechange = function () {
      if (httpObj.readyState == 4) {
        if (httpObj.status == 200) {
          var data = JSON.parse(httpObj.responseText)
          var target = document.getElementById("element_id");
          target.text = data.code;
        }
      }
    }
    var now = new Date();
    httpObj.open("get", "jsonHandler.ashx?id=" + id +"&amp;timestamp="+now.getTime(), true);
    httpObj.send(null)
  }

解説

JSONハンドラ"jsonHandler.ashx"へのアクセスの際に、URLに必要なパラメーターに加えタイムスタンプを付加しています。
"&timestamp="+now.getTime() の部分がタイムスタンプです。タイムスタンプのパラメーターの値には現在の時刻を設定しています。

setRequestHeader を指定する

XMLHttpRequestの場合に限られますが、XMLHttpRequestのsetRequestHeader を指定するとキャッシュを読み込まないようにできます。

コード例

JavaScriptでXMLHttpRequestを用いてJSONを返すハンドラにアクセスする例です。

  <script type="text/javascript">
  function getData(id){

    httpObj = new XMLHttpRequest();
    httpObj.onreadystatechange = function () {
      if (httpObj.readyState == 4) {
        if (httpObj.status == 200) {
          var data = JSON.parse(httpObj.responseText)
          var target = document.getElementById("element_id");
          target.text = data.code;
        }
      }
    }
    httpObj.open("get", "jsonHandler.ashx?id=" + id, true);
    httpObj.setRequestHeader('Pragma', 'no-cache');   
    httpObj.setRequestHeader('Cache-Control', 'no-cache');                    
    httpObj.setRequestHeader('If-Modified-Since', 'Sat, 01 Jan 2000 00:00:00 GMT');
    httpObj.send(null)
  }

解説

setRequestHeaderで"Pragma","no-cache"と"Cache-Control","no-cache"を指定します。IE用の対策として"If-Modified-Since"を指定し十分古い時間を指定します。