AJAXRSS
AJAX RSS リーダー
次の AJAX の例では、RSS のコンテンツを更新せずに Web ページに読み込む RSS リーダーを示します。表Htmlフォーム
これはHTMLページです。これには、単純な HTML フォームと JavaScript ファイルを?qū)g行するためのリンクが含まれています:
<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 フォームが含まれています。ダウンリストボックス。 フォームは次のように機(jī)能します:
1. ユーザーがドロップダウン ボックスでオプションを選択すると、イベントがトリガーされます
2. イベントがトリガーされると、showRSS() 関數(shù)が実行されます
フォームは「rssOutput」<div> という名前のファイルです。これは、showRSS() 関數(shù)によって返されるデータのプレースホルダーとして使用されます。
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() 関數(shù)と GetXmlHttpObject 関數(shù) (セクション PHP および AJAX リクエストと同じ) 。 showRSS() 関數(shù)
この関數(shù)は、ドロップダウン ボックスで選択されるたびに実行されます:
1. サーバーに送信される URL (ファイル名) を定義します
2. パラメーター (q) を追加します。 URL にパラメータの內(nèi)容を追加します
3. サーバーがファイルをキャッシュしないように亂數(shù)を追加します
4. GetXmlHttpObject 関數(shù)を呼び出して XMLHTTP オブジェクトを作成し、変更がトリガーされたときに stateChanged 関數(shù)を?qū)g行するオブジェクトを作成します
5. 指定された URL を通じて XMLHTTP を開きます
6. サーバーへの HTTP リクエストを起動(dòng)します
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 フィードが選択されているかを調(diào)べます
2. XML DOM を作成します。選択した RSS フィードのオブジェクト
3. RSS チャネルから要素を検索して出力します
4. 最初の 3 つの RSS アイテムの要素を調(diào)べて出力します
