推薦：掌握Ajax 第1部分:Ajax簡介
Brett McLaughlin , 作家，編輯, O'Reilly and Associates 2006 年 1 月 04 日 五年前，如果不知道 XML，您就是一只無人重視的丑小鴨。十八個月前，Ruby 成了關(guān)注的中心，不知道 Ruby 的程序員只能坐冷板凳了。今天，如果想跟上最新的技術(shù)時尚，那您的目標(biāo)就

如何用Ajax和RSS制作一個首頁新聞

給自己維護(hù)的一個小網(wǎng)站加個首頁新聞，瀏覽器用 Ajax 或者 Ajah 從服務(wù)器取新聞異步的顯示出來，同時提供 RSS 源供聚合器訂閱。數(shù)據(jù)可以保存在數(shù)據(jù)庫中也可以簡單的寫入到服務(wù)器的一個文件中，為了靈活起見我就在 MySQL 中新建一個表放站內(nèi)新聞了，就這么幾個字段：id、title、content、time。新聞錄入和從數(shù)據(jù)庫中取數(shù)據(jù)提供給 Ajax/Ajah 請求略。

下面是客戶端 XMLHTTPRequest 的代碼：

 
新聞讀取中……




var req = new XMLHttpRequest();

if( req )

{

req.onreadystatechange = function()

{

var News = "新聞讀取失敗";

try

{

if( req.readyState == 4 && ( req.status == 200 || req.status == 304 ) )

News = req.responseText;

}

catch(e)

{

News = e.description;

}

document.getElementById( 'News' ).innerHTML = News;

};

req.open( 'GET', 'news.php' );

req.send( null );

}

這里唯一值得說明的就是 XMLHTTPRequest 默認(rèn)是用 UTF-8 傳遞數(shù)據(jù)的，所以你的數(shù)據(jù)源最好也用 UTF-8 否則（因為我們這里客戶端已經(jīng)指定了要用 GB2312 了）得到的會是亂碼，這在 IE 下會引發(fā) JavaScript 錯誤，在 FireFox 下卻沒問題，所以我用 try 和 catch 把上面的代碼包住了，免得測試的時候出現(xiàn)錯誤。如果想試試的話可以用下面的代碼作為 news.php：

echo iconv( "GB2312", "UTF-8", "這就是新聞" );

//echo "這就是新聞";

?>

如果注釋掉第一句而開放第二句的話不僅看到的是亂碼，在 IE 下還會出現(xiàn) -1072896748 錯誤。有意思的是 IE 好像還會緩存由 XMLHTTPRequest 收到的內(nèi)容，而 FireFox 則不會，所以在測試中會出現(xiàn)刷新 IE 很多次看到的還是舊數(shù)據(jù)的問題，可以在程序里加上下面 4 句話解決這個問題：

header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" );

header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . " GMT" );

header( "Cache-Control: no-cache, must-revalidate" );

header( "Pragma: no-cache" );

要將首頁新聞提供給聚合器訂閱就要將后臺輸入的新聞生成 RSS feed，RSS 2.0 的規(guī)范可以參考 http://feedvalidator.org/docs/rss2.html，相應(yīng)的中文翻譯版本可以在 http://www.cpcwedu.com/Document/WEBOfficial/095447158.htm 找到。RSS 格式其實也是 XML 眾多方言中的一種，所以也要以 開頭，根節(jié)點的名稱必須是 rss，符合 RSS 2.0 規(guī)范的 RSS 中這個 rss 節(jié)點要有一個 version="2.0" 的屬性。rss 節(jié)點有一個名為 channel 的子節(jié)點，channel 就是一個頻道。channel 有 3 個必要的子節(jié)點，分別為 title、link 和 description。以 Blog 為例，title 就是 Blog 的名字，link 是 Blog 的 URL 地址，而 description 是 Blog 的描述。

channel 可以包含若干個 item 子節(jié)點，在 Blog 中每一個 item 就對應(yīng)一篇 post，我們這里每一個 item 就是一篇新聞。item 的所有子節(jié)點均為可選，但至少要包含 title 和 description，由于新聞要有時間，所以我們再給它加上一個 pubDate 節(jié)點，下面就是一個符合 RSS 2.0 規(guī)范的 RSS 文件內(nèi)容：

http://www.mysite.com

Just for testing





Hi, I'm 2ndboy. Welcome to my site!
Sat, 07 Sep 2005 0:00:01 GMT







It's great for using.
Sat, 21 Sep 2005 1:23:45 GMT





 

從數(shù)據(jù)庫中讀取最新的新聞內(nèi)容生成 RSS 的代碼這里就不貼了，無非是一些字符串的拼接，當(dāng)然了，你也可以用 PHP 的 XML DOM 接口來生成這個 RSS 內(nèi)容。這樣一來在網(wǎng)站上提供 RSS 訂閱就搞定了。在做完 RSS 部分后我突然有了一個想法，為了給使用 Ajax 取數(shù)據(jù)的瀏覽器提供信息，服務(wù)器要針對 Ajax 的請求單獨作些響應(yīng)處理，那何不就讓瀏覽器把我們前面已經(jīng)生成了的 RSS 當(dāng)作數(shù)據(jù)源來顯示首頁新聞呢？這似乎是個不錯的想法，但 RSS 是個 XML 格式的文件，很顯然，想達(dá)到這樣的目的就要讓客戶端用 JavaScript 來解析 XML 文件并加以顯示。為了用 JavaScript 來操控 XML，我決定使用 Google 的一個開源項目——AjaXSLT（http://goog-ajaxslt.sourceforge.net/），更多 Google 開源項目可以訪問 http://code.google.com/。Google 提供的這個 AjaXSLT 項目用 JS 實現(xiàn)了一個 XML 的 DOM 接口和一個 XSLT 實現(xiàn)，下面把里面的幾個主要文件做個簡單介紹：

misc.js：一些常量定義和 helper 函數(shù)，還有 log 的實現(xiàn)。dom.js：XML DOM 接口的 JS 實現(xiàn)，主要的函數(shù)是 xmlParse( XMLString )，調(diào)用成功后就可以用標(biāo)準(zhǔn) DOM 方式來操控返回的 XDocument 了。

xpath.js：XPath 的 JS 實現(xiàn)。

xslt.js：XSLT 的 JS 實現(xiàn)，要用到里面的 xsltProcess( XML, XSLT )，給定 XML 和 XSLT 得到轉(zhuǎn)換的結(jié)果。

你可以只使用其中的 DOM 實現(xiàn)部分，而 dom.js 又依賴于 misc.js，所以要先載入 misc.js 再載入 dom.js。為了在首頁上顯示好看的新聞，我們要用 CSS 來打扮一下新聞的外觀，所以要對新聞的數(shù)據(jù)組織方式有些要求，比如說要把得到的新聞最終組織成下面這個樣子

<div id="News"><div class="News">
<span class="Title">title</span>
<span class="Time">time</span>
<span class="Content">content
</span></div>
</div>

這樣之后我們就可以事先寫一些針對 #News 和 div.News 等等的規(guī)則來裝扮首頁新聞了。好了，下面看看用 JS 解析 RSS 的代碼怎么寫（當(dāng)然，之前我們先要用 Ajax 取到 RSS 數(shù)據(jù)）：

var News = "";

var doc = xmlParse( rss );

items = doc.getElementsByTagName( "item" );

for( var i = 0; i < items.length; i++ )

{

News += "
";

title = items[i].getElementsByTagName( "title" );

News += ( "" + title[0].firstChild.nodeValue + "<\/span>" );

time = items[i].getElementsByTagName( "pubDate" );

News += ( "" + time[0].firstChild.nodeValue + "<\/span>" );

description = items[i].getElementsByTagName( "description" );

News += ( "" + description[0].firstChild.nodeValue + "<\/span>" );

News += "<\/div>";

}

document.getElementById('News').innerHTML = News;
 

既然 AjaXSLT 提供了 XSLT 的 JS 實現(xiàn)，我們拿來試試。先照著《XML 高級編程》寫個 XSLT：

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http:
//www.w3.org/1999/XSL/Transform">
<xsl:template match="/"><xsl:apply-templates select="//item"/>
</xsl:template>
<xsl:template match="item"><div class="News">
<xsl:apply-templates select="title"/>
<xsl:apply-templates select="pubDate"/>
<xsl:apply-templates select="description"/>
</div></xsl:template><xsl:template match="title">
<span class="Title"><xsl:value-of select="."/>
</span></xsl:template><xsl:template match="pubDate">
<span class="Time"><xsl:value-of select="."/>
</span></xsl:template><xsl:template match="description">
<span class="Content"><xsl:value-of select="."/></span></xsl:template>
</xsl:stylesheet>

上面的 JavaScript 代碼還要把這個 XSLT 從服務(wù)器上取下來，之后一句話就可以搞定上面一堆 JS 代碼才能完成的工作：document.getElementById('News').innerHTML = xsltProcess( xmlParse( rss ), xmlParse( xslt ) );

方法就是這樣的。但是請注意，由于 XSLT 在轉(zhuǎn)換時使用了 XPath，所以要先包含 xpath.js 再引用 xslt.js。

分享：怎樣使用JavaScript和Ajax發(fā)出異步請求
Brett McLaughlin ，作家，編輯，O'Reilly Media Inc.2006 年 2 月 16 日 多數(shù) Web 應(yīng)用程序都使用請求/響應(yīng)模型從服務(wù)器上獲得完整的 HTML 頁面。常常是點擊一個按鈕，等待服務(wù)器響應(yīng)，再點擊另一個按鈕，然后再等待，這樣一個反復(fù)的過程。有了 Ajax 和 XMLH