Ajaxでランダムなリンクの切替
JavaScript・XHTML・CSS (43 items)
2005年10月18日
しかしこのままじゃいけないので、ここらで挽回の記事、流行のAjaxネタです。
私自身、まだまだ勉強不足のAjaxですが、
簡単なサンプルを作ってみました。
まずは下記のリンクから動作をご覧ください。。
＞Ajax Sample1
こんな事も出来ます、っていう一例です。
もちろん、htmlをリロードしてる訳じゃなくって、
リンクの部分だけ通信を行って変ってますよ、って事です。
これがAjaxの大事な点の一つです。
で、ソースの解説。
・ajax1.html
・・・・・・・
<body>
<script type="text/javascript">
<!--
function createHttpRequest(){
if(window.ActiveXObject){
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
return null;
}
}
} else if(window.XMLHttpRequest){
return new XMLHttpRequest();
} else {
return null;
}
}
function requestFile( data , method , fileName , async )
{
var httpObj = createHttpRequest();
httpObj.open( method , fileName , async );
httpObj.onreadystatechange = function()
{
if (httpObj.readyState==4)
{
on_loaded(httpObj);
}
}
httpObj.send( data );
}
function on_loaded(Obj)
{
res = Obj.responseText;
//phpの出力内容を取得・・・２
document.getElementById('ajax1').innerHTML = res;
}
//3秒おきに読みこみ・・・１
timerID = setInterval("requestFile( '' , 'GET', 'ajax1.php' , true )", 3000);
//-->
</script>
<p>3秒おきにリンクを読みこみ直します</p>
//phpの出力内容をセット・・・３
<div id="ajax1">
</div>
</body>
</html>
ちょっと長いですが、これがAjax処理の入ったhtmlです。
大事なのはscriptタグ内の処理なんですが、
まず、この中の”createHttpRequest”関数とかは、
他サイトでもサンプルとして取り上げられてるのと同じようなものです。
なんで、ここでは詳細は割愛します。
で、太字の部分を注目します。
・・・１
ここで、3秒おきに”ajax1.php”を呼んでます。
ちなみに注意点ですが、
ここで外部ドメインのモジュールを呼ぶ事はできません。
ドメインは同じでなきゃいけないんですね。
Ajax、というか”XMLHttpRequest”なんかの仕様のようです。
・ajax1.php
<?php
header("Content-type: application/x-javascript");
$url[1] = 'http://www.res-system.com/weblog/';
$url[2] = 'http://www.yahoo.co.jp/';
$url[3] = 'http://www.msn.co.jp/';
$url[4] = 'http://www.goo.ne.jp/';
$url[5] = 'http://www.google.co.jp/';
$title[1] = 'Web Artisan Blog';
$title[2] = 'Yahoo!';
$title[3] = 'MSN';
$title[4] = 'goo';
$title[5] = 'Google';
//ランダムに取得
$i = mt_rand(1, 5);
print <<<END
<p><a href="$url[$i]">$title[$i]</a></p>
END;
?>
”ajax1.php”では、リンクのURLをランダムに設定してます。
リンク部分の出力は、ヒアドキュメント使ってます。
print <<<ENDってやつです。
・・・２
”responseText”で取得する辺りも、他サイトのサンプルのまんまです。
ここでは、１で呼び出したajax1.phpの出力内容を受け取り、
document.getElementById('ajax1').innerHTML
で画面にセットしてます。
・・・３
２でセットした内容は、<div id="ajax1">って定義してるこの部分に、
出力される訳です。
今回のは単純なサンプルですが、”ajax1.php”をもうちと複雑にして、
各サイトのRSSを取得し、それをhtmlに成形するものにすれば、
ころころ内容の切り替わるRSSリーダーなんかも出来る訳ですね。
＜関連記事＞
＞JS:Ajax:動的に別ドメインのスクリプト呼び出し