AJAXRSS
AJAX RSS 閱讀器
在下面的 AJAX 實(shí)例中，我們將演示一個 RSS 閱讀器，通過它，來自 RSS 的內(nèi)容在不進(jìn)行刷新的情況下載入網(wǎng)頁。
HTML 表單
這是 HTML 頁面。它包含一個簡單的 HTML 表單和執(zhí)行一個 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 頁面包含一個簡單的 HTML 表單，其中帶有一個下拉列表框。
表單是這樣工作的：
1. 當(dāng)用戶選擇下拉框中的選項(xiàng)時，會觸發(fā)一個事件
2. 當(dāng)事件觸發(fā)時，執(zhí)行 showRSS() 函數(shù)
表單下面是名為 "rssOutput" 的一個 <div>。它用作 showRSS() 函數(shù)所返回的數(shù)據(jù)的占位符。
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 函數(shù)與 PHP 和 AJAX 請求 這一節(jié)中的例子相同。
showRSS() 函數(shù)
每當(dāng)在下拉框中選擇選擇時，該函數(shù)就會執(zhí)行：
1. 定義發(fā)送到服務(wù)器的 url （文件名）
2. 把參數(shù) (q) 添加到 url，參數(shù)內(nèi)容是下拉框中的被選項(xiàng)
3. 添加一個隨機(jī)數(shù)，以防止服務(wù)器緩存文件
4. 調(diào)用 GetXmlHttpObject 函數(shù)來創(chuàng)建 XMLHTTP 對象，并告知該對象在觸發(fā)一個改變時去執(zhí)行 stateChanged 函數(shù)
5. 通過給定的 url 來打開 XMLHTTP
6. 把 HTTP 請求發(fā)動到服務(wù)器
PHP 頁面
調(diào)用 JavaScript 代碼的服務(wù)器頁面是名為 "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>");
}
?>例子解釋：
當(dāng)一個選項(xiàng)從 JavaScript 發(fā)送時，會發(fā)生：
1. PHP 找出哪個 RSS feed 被選中
2. 為選中的 RSS feed 創(chuàng)建 XML DOM 對象
3. 找到并輸出來自 RSS 頻道的元素
4. 遍歷前三個 RSS 項(xiàng)目中的元素，并進(jìn)行輸出
