AJAX RSS リーダー
次の AJAX の例では、RSS のコンテンツを更新せずに Web ページに読み込む RSS リーダーを示します。表Htmlフォーム
これはHTMLページです。これには、単純な HTML フォームと JavaScript ファイルを実行するためのリンクが含まれています:
<html>
<head>
<script type="text/javascript" src="getrss.js"></script>
</head>
<body>
<form>
Select an RSS-Feed:
<select onchange="showRSS(this.value)">
<option value="Google">Google News</option>
<option value="MSNBC">MSNBC News</option>
</select>
</form>
<p><div id="rssOutput">
<b>RSS Feed will be listed here.</b></div></p>
</body>
</html>
例の説明 - HTML フォーム
ご覧のとおり、上記の HTML ページには、「There is a Drop」という単純な HTML フォームが含まれています。ダウンリストボックス。 フォームは次のように機能します:
1. ユーザーがドロップダウン ボックスでオプションを選択すると、イベントがトリガーされます
2. イベントがトリガーされると、showRSS() 関数が実行されます
フォームは「rssOutput」<div> という名前のファイルです。これは、showRSS() 関数によって返されるデータのプレースホルダーとして使用されます。
JavaScript
JavaScript コードは「getrss.js」に保存され、HTML ドキュメントに接続されます:
var xmlHttp
function showRSS(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getrss.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("rssOutput")
.innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}例の説明:
stateChanged() 関数と GetXmlHttpObject 関数 (セクション PHP および AJAX リクエストと同じ) 。 showRSS() 関数
この関数は、ドロップダウン ボックスで選択されるたびに実行されます:
1. サーバーに送信される URL (ファイル名) を定義します
2. パラメーター (q) を追加します。 URL にパラメータの内容を追加します
3. サーバーがファイルをキャッシュしないように乱数を追加します
4. GetXmlHttpObject 関数を呼び出して XMLHTTP オブジェクトを作成し、変更がトリガーされたときに stateChanged 関数を実行するオブジェクトを作成します
5. 指定された URL を通じて XMLHTTP を開きます
6. サーバーへの HTTP リクエストを起動します
PHP ページ
JavaScript コードを呼び出すサーバー ページは「getrss.php」という名前の PHP ファイル:<?php
//get the q parameter from URL
$q=$_GET["q"];
//find out which feed was selected
if($q=="Google")
{
$xml=("http://news.google.com/news?ned=us&topic=h&output=rss");
}
elseif($q=="MSNBC")
{
$xml=("http://rss.msnbc.msn.com/id/3032091/device/rss/rss.xml");
}
$xmlDoc = new DOMDocument();
$xmlDoc->load($xml);
//get elements from "<channel>"
$channel=$xmlDoc->getElementsByTagName('channel')->item(0);
$channel_title = $channel->getElementsByTagName('title')
->item(0)->childNodes->item(0)->nodeValue;
$channel_link = $channel->getElementsByTagName('link')
->item(0)->childNodes->item(0)->nodeValue;
$channel_desc = $channel->getElementsByTagName('description')
->item(0)->childNodes->item(0)->nodeValue;
//output elements from "<channel>"
echo("<p><a href='" . $channel_link
. "'>" . $channel_title . "</a>");
echo("<br />");
echo($channel_desc . "</p>");
//get and output "<item>" elements
$x=$xmlDoc->getElementsByTagName('item');
for ($i=0; $i<=2; $i++)
{
$item_title=$x->item($i)->getElementsByTagName('title')
->item(0)->childNodes->item(0)->nodeValue;
$item_link=$x->item($i)->getElementsByTagName('link')
->item(0)->childNodes->item(0)->nodeValue;
$item_desc=$x->item($i)->getElementsByTagName('description')
->item(0)->childNodes->item(0)->nodeValue;
echo ("<p><a href='" . $item_link
. "'>" . $item_title . "</a>");
echo ("<br />");
echo ($item_desc . "</p>");
}
?>
例の説明:
JavaScript からオプションが送信されると、何が起こります:1. PHP はどの RSS フィードが選択されているかを調べます
2. XML DOM を作成します。選択した RSS フィードのオブジェクト
3. RSS チャネルから要素を検索して出力します
4. 最初の 3 つの RSS アイテムの要素を調べて出力します
次のセクション