同一名称imageファイルの自動更新、画像入れ替え

質問

ブラウザ：FireFox
表示中の画像を定期的に更新するページを作っています。

現在は、javascriptで作成しておりますが、Ajaxでできるのかなと考えております。ただ、Ajaxでの作成方法が分かりません。
お分かりの方いらっしゃいましたら、宜しくお願い致します。

<div id='test'></div>
<script type='text/javascript'>
hoge="";

hoge += "<img src='test.png'>";
$("document").ready(function(){
$('#test').append(hoge);
})

setInterval('update()', 10000);
function update(){
hoge="";
hoge+= "<img src='test.png'>";
$('#test').empty();
$('#test').append(hoge);
}
</script>
test.pngの画像内容は、グラフです。
定期的に中の内容を更新していくので、それを画面に反映させたいと思っております。
画像を切り替える際、ファイル名が別の場合は画像は切り替わるのですが、同一名称だと画像が切り替わりません。

宜しくお願い致します。

回答No.1

OKbokuzyo · ベストアンサー

ソースはjqueryを使っているんですかね？

>画像を切り替える際、ファイル名が別の場合は画像は切り替わるのですが、
>同一名称だと画像が切り替わりません。

画像ファイルがキャッシュに残るためです。
test.pngファイルのgetリクエスト時にダミー引数を設定すると良いです。
ソース上でいうとupdate()関数の下記部分を下記の通り変更してみてください。

hoge+= "<img src='test.png'>";
　↓
hoge+= "<img src='test.png?" + (new Date()).getTime() + "'>";

しかしこれはAjaxというのだろうか‥？
まぁやってることはAjaxと言われればAjaxだけれども‥。

お礼

ご回答頂き、誠にありがとうございます。
表示することが出来ました。

本来のAjaxの作り方で、次は挑戦したいと思います。

ありがとうございました。