用Ajax和RSS制作一個首頁新聞_AJAX教程
推薦:細(xì)說循序漸進學(xué)習(xí)Ajax的途徑現(xiàn)在瀏覽器端以 javascript 為核心,基于各種 Web 標(biāo)準(zhǔn)(即:早已完成標(biāo)準(zhǔn)化的XHTML/CSS/DOM/XML/XSLT 和正在進行標(biāo)準(zhǔn)化的XMLHTTP)的技術(shù)正在加速整合,Ajax 就是這一系列技術(shù)的一個統(tǒng)
給自己維護的一個小網(wǎng)站加個首頁新聞,瀏覽器用 Ajax 或者 Ajah 從服務(wù)器取新聞異步的顯示出來,同時提供 RSS 源供聚合器訂閱。
XMLHTTPRequest 從上次做過一個手機模擬器后就再沒碰過,這次在網(wǎng)上搜尋發(fā)現(xiàn)了一個好東西:http://www.scss.com.au/family/andrew/webdesign/xmlhttprequest/,一個 Cross-Browser 的 XMLHttpRequest 實現(xiàn),作者在創(chuàng)作共用條款(Creative Commons License)下發(fā)布這個庫,只要你不移除腳本中作者的姓名和網(wǎng)址就可以自由使用,就用它了!下載 xmlhttprequest.js 以備后用。
數(shù)據(jù)可以保存在數(shù)據(jù)庫中也可以簡單的寫入到服務(wù)器的一個文件中,為了靈活起見我就在 MySQL 中新建一個表放站內(nèi)新聞了,就這么幾個字段:id、title、content、time。新聞錄入和從數(shù)據(jù)庫中取數(shù)據(jù)提供給 Ajax/Ajah 請求略。
下面是客戶端 XMLHTTPRequest 的代碼:
新聞讀取中…… |
這里唯一值得說明的就是 XMLHTTPRequest 默認(rèn)是用 UTF-8 傳遞數(shù)據(jù)的,所以你的數(shù)據(jù)源最好也用 UTF-8 否則(因為我們這里客戶端已經(jīng)指定了要用 GB2312 了)得到的會是亂碼,這在 IE 下會引發(fā) javascript 錯誤,在 FireFox 下卻沒問題,所以我用 try 和 catch 把上面的代碼包住了,免得測試的時候出現(xiàn)錯誤。如果想試試的話可以用下面的代碼作為 news.php:
|
如果注釋掉第一句而開放第二句的話不僅看到的是亂碼,在 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" ); |
要將首頁新聞提供給聚合器訂閱就要將后臺輸入的新聞生成 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)容:
Sat, 07 Sep 2005 0:00:01 GMT 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 格式的文件,很顯然,想達到這樣的目的就要讓客戶端用 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ù)組織方式有些要求,比如說要把得到的新聞最終組織成下面這個樣子
這樣之后我們就可以事先寫一些針對 #News 和 div.News 等等的規(guī)則來裝扮首頁新聞了。好了,下面看看用 JS 解析 RSS 的代碼怎么寫(當(dāng)然,之前我們先要用 Ajax 取到 RSS 數(shù)據(jù)):
var News = ""; |
好了,到現(xiàn)在為止我們的首頁新聞就算完工了,但是既然 AjaXSLT 提供了 XSLT 的 JS 實現(xiàn),我們拿來試試。先照著《XML 高級編程》寫個 XSLT:
我們上面的 javascript 代碼還要把這個 XSLT 從服務(wù)器上取下來,之后一句話就可以搞定上面一堆 JS 代碼才能完成的工作:document.getElementById('News').innerHTML = xsltProcess( xmlParse( rss ), xmlParse( xslt ) );
OK,大功告成!注意,由于 XSLT 在轉(zhuǎn)換時使用了 XPath,所以要先包含 xpath.js 再引用 xslt.js。
分享:掌握 Ajax,第 1 部分 Ajax 簡介 Brett McLaughlin , 作家,編輯, O'Reilly and Associates 2006 年 1 月 04 日 五年前,如果不知道 XML,您就是一只無人重視的丑小鴨。十八個月前,Ruby 成了關(guān)注的中心,不
- Ajax中瀏覽器的緩存問題解決方法
- AJAX和WebService實現(xiàn)省市縣三級聯(lián)動具體代碼
- ajax 登錄功能簡單實現(xiàn)(未連接數(shù)據(jù)庫)
- AJAX和WebService實現(xiàn)郵箱驗證(無刷新驗證郵件地址是否合法)
- AJAX和三層架構(gòu)實現(xiàn)分頁功能具體思路及代碼
- 使用AJAX返回WebService里的集合具體實現(xiàn)
- AJAX獲取服務(wù)器當(dāng)前時間及時間格式輸出處理
- ajax傳遞多個參數(shù)具體實現(xiàn)
- ajax傳遞一個參數(shù)具體實現(xiàn)
- 滑輪滾動到頁面底部ajax加載數(shù)據(jù)配合jsonp實現(xiàn)探討
- jQery ajax——load()方法示例介紹
- jQuery+Ajax實現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序(為表格注入活力)
- 相關(guān)鏈接:
- 教程說明:
AJAX教程-用Ajax和RSS制作一個首頁新聞。