給自己維護(hù)的一個(gè)小網(wǎng)站加個(gè)首頁(yè)新聞，瀏覽器用 Ajax 或者 Ajah 從服務(wù)器取新聞異步的顯示出來(lái)，同時(shí)提供 RSS 源供聚合器訂閱。
XMLHTTPRequest 從上次做過(guò)一個(gè)手機(jī)模擬器后就再?zèng)]碰過(guò)，這次在網(wǎng)上搜尋發(fā)現(xiàn)了一個(gè)好東西：
http://www.scss.com.au/family/andrew/webdesign/xmlhttprequest/，一個(gè) Cross-Browser 的 XMLHttpRequest 實(shí)現(xiàn)，作者在創(chuàng)作共用條款（Creative Commons License）下發(fā)布這個(gè)庫(kù)，只要你不移除腳本中作者的姓名和網(wǎng)址就可以自由使用，就用它了！下載 xmlhttprequest.js 以備后用。
數(shù)據(jù)可以保存在數(shù)據(jù)庫(kù)中也可以簡(jiǎn)單的寫(xiě)入到服務(wù)器的一個(gè)文件中，為了靈活起見(jiàn)我就在 MySQL 中新建一個(gè)表放站內(nèi)新聞了，就這么幾個(gè)字段：id、title、content、time。新聞錄入和從數(shù)據(jù)庫(kù)中取數(shù)據(jù)提供給 Ajax/Ajah 請(qǐng)求略。
下面是客戶端 XMLHTTPRequest 的代碼：
<html><head><title>首頁(yè)新聞測(cè)試</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><script type="text/javascript" src="xmlhttprequest.js"></script></head><body><div id="News">新聞讀取中……</div><script type="text/javascript">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 );}</script></body></html>
這里唯一值得說(shuō)明的就是 XMLHTTPRequest 默認(rèn)是用 UTF-8 傳遞數(shù)據(jù)的，所以你的數(shù)據(jù)源最好也用 UTF-8 否則（因?yàn)槲覀冞@里客戶端已經(jīng)指定了要用 GB2312 了）得到的會(huì)是亂碼，這在 IE 下會(huì)引發(fā) JavaScript 錯(cuò)誤，在 FireFox 下卻沒(méi)問(wèn)題，所以我用 try 和 catch 把上面的代碼包住了，免得測(cè)試的時(shí)候出現(xiàn)錯(cuò)誤。如果想試試的話可以用下面的代碼作為 news.php：
<?phpecho iconv( "GB2312", "UTF-8", "這就是新聞" );//echo "這就是新聞";?>
如果注釋掉第一句而開(kāi)放第二句的話不僅看到的是亂碼，在 IE 下還會(huì)出現(xiàn) -1072896748 錯(cuò)誤。有意思的是 IE 好像還會(huì)緩存由 XMLHTTPRequest 收到的內(nèi)容，而 FireFox 則不會(huì)，所以在測(cè)試中會(huì)出現(xiàn)刷新 IE 很多次看到的還是舊數(shù)據(jù)的問(wèn)題，可以在程序里加上下面 4 句話解決這個(gè)問(wèn)題：
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" );
要將首頁(yè)新聞提供給聚合器訂閱就要將后臺(tái)輸入的新聞生成 RSS feed，RSS 2.0 的規(guī)范可以參考
http://feedvalidator.org/docs/rss2.html，相應(yīng)的中文翻譯版本可以在
http://www.cpcwedu.com/Document/WEBOfficial/095447158.htm 找到。
RSS 格式其實(shí)也是 XML 眾多方言中的一種，所以也要以 開(kāi)頭，根節(jié)點(diǎn)的名稱必須是 rss，符合 RSS 2.0 規(guī)范的 RSS 中這個(gè) rss 節(jié)點(diǎn)要有一個(gè) version="2.0" 的屬性。rss 節(jié)點(diǎn)有一個(gè)名為 channel 的子節(jié)點(diǎn)，channel 就是一個(gè)頻道。channel 有 3 個(gè)必要的子節(jié)點(diǎn)，分別為 title、link 和 description。以 Blog 為例，title 就是 Blog 的名字，link 是 Blog 的 URL 地址，而 description 是 Blog 的描述。
channel 可以包含若干個(gè) item 子節(jié)點(diǎn)，在 Blog 中每一個(gè) item 就對(duì)應(yīng)一篇 post，我們這里每一個(gè) item 就是一篇新聞。item 的所有子節(jié)點(diǎn)均為可選，但至少要包含 title 和 description，由于新聞要有時(shí)間，所以我們?cè)俳o它加上一個(gè) pubDate 節(jié)點(diǎn)，下面就是一個(gè)符合 RSS 2.0 規(guī)范的 RSS 文件內(nèi)容：
<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"><channel><title>The name of my site</title><link>
http://www.mysite.com</link><description>Just for testing</description><item><title>About</title><description>Hi, I'm 2ndboy. Welcome to my site!</description><pubDate>Sat, 07 Sep 2005 0:00:01 GMT</pubDate></item><item><title>New service is out!</title><description>It's great for using.</description><pubDate>Sat, 21 Sep 2005 1:23:45 GMT</pubDate></item></channel></rss>
從數(shù)據(jù)庫(kù)中讀取最新的新聞內(nèi)容生成 RSS 的代碼這里就不貼了，無(wú)非是一些字符串的拼接，當(dāng)然了，你也可以用 PHP 的 XML DOM 接口來(lái)生成這個(gè) RSS 內(nèi)容。這樣一來(lái)在網(wǎng)站上提供 RSS 訂閱就搞定了。
在做完 RSS 部分后我突然有了一個(gè)想法，為了給使用 Ajax 取數(shù)據(jù)的瀏覽器提供信息，服務(wù)器要針對(duì) Ajax 的請(qǐng)求單獨(dú)作些響應(yīng)處理，那何不就讓瀏覽器把我們前面已經(jīng)生成了的 RSS 當(dāng)作數(shù)據(jù)源來(lái)顯示首頁(yè)新聞呢？這似乎是個(gè)不錯(cuò)的想法，但 RSS 是個(gè) XML 格式的文件，很顯然，想達(dá)到這樣的目的就要讓客戶端用 JavaScript 來(lái)解析 XML 文件并加以顯示。
為了用 JavaScript 來(lái)操控 XML，我決定使用 Google 的一個(gè)開(kāi)源項(xiàng)目——AjaXSLT（
http://goog-ajaxslt.sourceforge.net/），更多 Google 開(kāi)源項(xiàng)目可以訪問(wèn)
http://code.google.com/。Google 提供的這個(gè) AjaXSLT 項(xiàng)目用 JS 實(shí)現(xiàn)了一個(gè) XML 的 DOM 接口和一個(gè) XSLT 實(shí)現(xiàn)，下面把里面的幾個(gè)主要文件做個(gè)簡(jiǎn)單介紹：
misc.js：一些常量定義和 helper 函數(shù)，還有 log 的實(shí)現(xiàn)。dom.js：XML DOM 接口的 JS 實(shí)現(xiàn)，主要的函數(shù)是 xmlParse( XMLString )，調(diào)用成功后就可以用標(biāo)準(zhǔn) DOM 方式來(lái)操控返回的 XDocument 了。
xpath.js：XPath 的 JS 實(shí)現(xiàn)。
xslt.js：XSLT 的 JS 實(shí)現(xiàn)，要用到里面的 xsltProcess( XML, XSLT )，給定 XML 和 XSLT 得到轉(zhuǎn)換的結(jié)果。
你可以只使用其中的 DOM 實(shí)現(xiàn)部分，而 dom.js 又依賴于 misc.js，所以要先載入 misc.js 再載入 dom.js。為了在首頁(yè)上顯示好看的新聞，我們要用 CSS 來(lái)打扮一下新聞的外觀，所以要對(duì)新聞的數(shù)據(jù)組織方式有些要求，比如說(shuō)要把得到的新聞最終組織成下面這個(gè)樣子
<div id="News"><div class="News"><span class="Title">title</span><span class="Time">time</span><span class="Content">content</span></div></div>
這樣之后我們就可以事先寫(xiě)一些針對(duì) #News 和 div.News 等等的規(guī)則來(lái)裝扮首頁(yè)新聞了。好了，下面看看用 JS 解析 RSS 的代碼怎么寫(xiě)（當(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 += "<div class='News'>";title = items[i].getElementsByTagName( "title" );News += ( "<span class='Title'>" + title[0].firstChild.nodeValue + "<\/span>" );time = items[i].getElementsByTagName( "pubDate" );News += ( "<span class='Time'>" + time[0].firstChild.nodeValue + "<\/span>" );description = items[i].getElementsByTagName( "description" );News += ( "<span class='Content'>" + description[0].firstChild.nodeValue + "<\/span>" );News += "<\/div>";}document.getElementById('News').innerHTML = News;
好了，到現(xiàn)在為止我們的首頁(yè)新聞就算完工了，但是既然 AjaXSLT 提供了 XSLT 的 JS 實(shí)現(xiàn)，我們拿來(lái)試試。先照著《XML 高級(jí)編程》寫(xiě)個(gè) 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="http://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 代碼還要把這個(gè) XSLT 從服務(wù)器上取下來(lái)，之后一句話就可以搞定上面一堆 JS 代碼才能完成的工作：document.getElementById('News').innerHTML = xsltProcess( xmlParse( rss ), xmlParse( xslt ) );
OK，大功告成！注意，由于 XSLT 在轉(zhuǎn)換時(shí)使用了 XPath，所以要先包含 xpath.js 再引用 xslt.js。