Webブラウザでキャッシュしないようにするには、いくつか方法があります。
・メタタグを使う(no-cache、expires)
ブラウザにより動作が異なることがあるようなので、確実とはいえません。
・POSTメソッドにする
初心者のうちはGETメソッドのほうが便利なことがあります。Webサービスを利用するとき、GETメソッドならプログラムを書かなくても、URLを入力するだけでデータの表示を確認できます。これについては後に説明します。
どれも一長一短がありますが、実は JavaScript が使える環境なら簡単な方法があります。キャッシュを無効にするというより、回避するといったほうがいいかもしれません。
元々Webブラウザがキャッシュするのは、リクエストしたURLが同じ時です。したがってURLにパラメータを加えて、パラメータの値が毎回変わるようにすればよいのです。以下の数字の部分が毎回変わると考えてください。
newkw.php?time=1200490671468
では実際にどうするのか説明します。まずは数値を変化させる簡単なサンプルで仕組みを理解しましょう。
【1】sample006 フォルダをコピーして sample007 フォルダを作成します。
【2】sample007 フォルダを開き、「getTime.html」を新規に作成します。
＊UTF-8 形式で保存してください。
＊「\」はWindowsでは円記号のことです。
保存先 C:\phpdev\www\ajax\sample007
ファイル名 getTime.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>getTime</title>
</head>
<body>
<script type="text/javascript">
<!--
document.write(new Date());
document.write("<br />");
document.write(new Date().toLocaleString());
document.write("<br />");
document.write(new Date().getTime());
// -->
</script>
</body>
</html>
準備ができたら、Webサーバーを起動して動作確認してみましょう。
【3】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。
【4】今回は Internet Explorer を起動して動作確認します。
http://localhost/ajax/sample007/getTime.html
三通りの日付時刻が表示されましたね。
【5】ブラウザの「更新」ボタンをクリックします。
【6】クリックする度に時刻がどんどん変わります。
特に3番目の値の変化に注目してください。この値をURLのパラメータに使います。
動作を確認したら、この機能を簡易RSSリーダーに組み込んでみましょう。
【7】newkw.js を少しだけ変更します。
var paramList = "";
↓
var paramList = "time=" + (new Date().getTime());
変更はたったこれだけです。
【8】Internet Explorer を起動して動作確認します。
http://localhost/ajax/sample007/
【9】「データ取得」ボタンをクリックします。
【10】データが表示されました。ここまでは今までと同じですね。
【11】ではもう一度「データ取得」ボタンをクリックしてください。
【12】新しいデータが表示されました。時間とキーワードがどんどん変わりますね。
＊通信相手のサーバーに負担をかけないように、適当な間隔を置いてクリックしてください。
これで Internet Explorer でも常に新しいデータを取得できるようになりました。プログラムを変更したので、念のため Firefox でも動作確認してください。
【解説】
(1)今回は簡単な動作テストだったので、「getTime.html」では HTML の中に直接 JavaScript のプログラムを書きました。
しかし JavaScript に未対応のブラウザの場合、プログラムの部分を画面に表示してしまいます。そこでプログラム全体を <!-- と // --> で囲んで、もしブラウザが未対応の場合はコメントにして表示しないようにしています。これはよく使われる書き方です。
(2)document.write はブラウザの画面に、引数に指定した文字列や値を書込みます。引数には文字列や値以外に、オブジェクトや関数が使われることもあります。その場合は処理結果が表示されます。
(3)プログラムと表示は以下のように対応しています。
document.write(new Date());
Wed Jan 16 23:11:18 UTC+0900 2008
new Date() は引数に指定した時刻を表す、日付オブジェクトを生成します。引数を省略した場合は現在の時刻となります。
document.write(new Date().toLocaleString());
2008年1月16日 23:11:18
toLocaleString() メソッドは、日付オブジェクトを現地時刻を表す文字列に変換します。文字列の表示形式はWebブラウザやバージョンによって異なります。 toString() メソッドも使えます。
上記のプログラムは分かりやすく書くと以下のようになります。
d = new Date();
document.write(d.toLocaleString());
↓省略
document.write((new Date()).toLocaleString());
↓さらに省略
document.write(new Date().toLocaleString());
JavaScript にはオブジェクトに対する処理を定義した「メソッド」があらかじめ用意されています。オブジェクトの後にメソッドを書くことで処理結果が得られます。今回の例では日付オブジェクトの生成と同時にメソッドも指定した書き方です。
document.write(new Date().getTime());
1200492678562
getTime() メソッドは 1970年1月1日0時0分0秒（UTC：世界標準時刻）からの経過ミリ秒を表します。値は 1/1000秒ごとに変化します。この値をパラメータに使うことで、リクエストするURLがいつも新しくなります。
(4)パラメータの書き方について
動的なURLを作成するとき、通常は「?」の後にパラメータの組み合わせを書いていきます。
newkw.php?time=1200490671468
「time=1200490671468」が一つの組み合わせです。パラメータが複数ある時は「&」でつなげることができます。
しかし prototype.js を使っていますので、変数に組み合わせを代入するだけで、URLを組み立ててくれます。そのため「?」は不要です。
var url = "newkw.php";
var paramList = "time=" + (new Date().getTime());
new Ajax.Request(url,
{
method: 'get',
onSuccess: getData,
onFailure: showErrMsg,
parameters: paramList
});
(5)渡したパラメータはリクエスト先のプログラムで利用することができます。つまり JavaScript から PHP にデータが渡せますが、今回は特に使っていません。ただ URL を変化させているだけです。
