JavaScriptを使い、HTMLページの一部分だけを再読み込みしたいのですが、何か良い方法があればご教示ください。
たとえばこのページにあるように、任意のタグ(divなど)にクラスをつけるだけで対応できるようにしたいのです。
http://www.ginnokagi.com/2008/04/javascripthtml.html
宜しくお願いします。
iframe でいいならリンク先の画像の場合と同じことが出来ますね。
div (など) でやりたいのならXMLHttpRequestでやるしかありません。
例えは div に auto_update というクラスを付けて、div の id に更新の取得先の URL を入れておくとします。
<div class="auto_update" id="http://example.com/abcde"> ほにゃらら </div>
これを毎分更新するなら、
<script language="JavaScript"> <!-- (function(){ //XMLHttpRequestを使ってinnerHTMLを書き換え function update(div,url){ //URL適当な引数を付けることで、ブラウザのキャッシュが効いてしまうのを防ぐ url = (url.split('?').length > 1)? url + '&' + new Date().getTime() : url + '?' + new Date().getTime(); var x = new XMLHttpRequest; x.open('GET', url, true); x.onload = function(){div.innerHTML = x.responseText}; x.send(null); } //クラス名にauto_updateを含むdiv要素を見付ける function auto_update(){ var divs = document.getElementsByTagName('div'); for(var i=0,l=divs.length;i<l;i++){ if(divs[i].className.indexOf('auto_update')>0) update(divs[i], divs[i].id); } } } //1分ごとに実行 setInterval(auto_update,60*1000) })() //--> </script>
みたいな感じになります。
上のコードは試してないので動くかどうかわかりません。IE の場合は XMLHttpRequest を定義してやらないといけません。そのへんのノウハウは色んなところに転がってますが、例えばこのへんを参考に→ http://la.ma.la/blog/diary_200509031529.htm
何にせよ、簡単にやりたいなら iframe で十分だと思います。(ただ iframe は嫌う人がいますので)
たいへん参考になりました。ありがとうございました。