實作 Ajax 版 RSS 閱讀工具

我們所要實作的 Ajax 版 RSS 閱讀工具是精簡的 RSS 新聞匯集軟體 (News Aggregator) , 使用伺服端的免費 PHP 程式來剖析 RSS 文件, 以 Ajax 技術取得和顯示 Yahoo! 的 RSS 摘要資訊。

RSS 閱讀工具的程式架構

RSS 閱讀工具的程式架構是由 HTML 表單的使用介面、JavaScript 程式碼的 Ajax 引擎和伺服端 PHP 程式所組成, 如下圖所示：

上述 AjaxRSS.htm 擁有 HTML 表單使用介面的下拉式選單, 當使用者選擇指定的 RSS 後, 就呼叫 Ajax.js 的 JavaScript 函數來取得 RSS 摘要資訊, 它是建立 XMLHttpRequest 物件來送出非同步 HTTP 請求至伺服端的 readRSS.php。

PHP 程式 readRSS.php 是使用 Vojtech Semecky 設計免費的 lastRSS 0.9.1 版來剖析 RSS 的 XML 文件, 程式檔案名稱是 lastRSS.php, 可以將 RSS 文件轉換成結合陣列來取得所需的摘要資訊。

RSS 閱讀工具的使用

一旦將 RSS 閱讀工具的所有程式檔案都公佈到支援 PHP 的 Web 伺服器的目錄後, 請啟動 Internet Explorer 開啟 HTML 文件 AjaxRSS.htm, 就可以看到執行結果, 如下圖所示：

在下拉式選單選擇 RSS 種類, 例如：Yahoo! 運動, 稍等一下, 就可以在下方顯示 RSS 摘要資訊的標題清單, 如下圖所示：

只需按一下摘要資訊的標題, 就可以顯示詳細內容。

RSS 閱讀工具的程式說明

RSS 閱讀工具的應用程式共有 5 個程式檔案和一張小圖示的圖片, 樣式檔案 style.css 是 AjaxRSS.htm 使用的外部樣式檔案, PHP 程式 lastRSS.php 是 Vojtech Semecky 的 RSS 剖析程式, 其他程式的詳細說明如下所示：

JavaScript 程式 Ajax.js 就是 Ajax 應用程式的 Ajax 引擎, 內含數個函數可以建立、開啟、送出 HTTP 請求和處理回應資料, 其程式碼如下所示：

這兩個函數的用途很清楚，筆者就不額外說明。

在下方第 33 列指定 20 分鐘來執行一次 readRSS() 函數, 第 35~47 列的 readRSS() 函數呼叫 getHttpRequestObject() 和 makeRequest() 函數來送出非同步的 HTTP 請求, 如下所示：

32: var xmlHttp;
33: window.setInterval("readRSS()", 1200000);  // 設定計時周期
34: // 送出HTTP請求來取得RSS的摘要資訊
35: function readRSS(value) {
36:    // 建立XMLHttpRequest物件
37:    xmlHttp = getHttpRequestObject(showRSSItem);
38:    if ( xmlHttp != null ) {
39:       var url = "readRSS.php";  // 建立URL網址
40:       url = url + "?id=" + value;
41:       makeRequest(xmlHttp, url); // 建立HTTP請求
42:    }
43:    else {
44:       alert ("錯誤! 瀏覽程式不支援XMLHttpRequest物件!");
45:       return;
46:    }
47: }

在第 39~40 列建立 URL 網址後, 第 41 列開啟和送出 HTTP 請求來取得伺服端的回應。下方 showRSSItem() 函數是 onreadystatechange 屬性指定的事件處理程序, 如下所示：

48: // 顯示RSS的摘要資訊
49: function showRSSItem() {
50:    if ( xmlHttp.readyState == 4 ) {
51:       // 取得回應RSS項目清單
52:       var xmlResult = xmlHttp.responseXML;
53:       var objNode = xmlResult.documentElement.childNodes;
54:       var str = "＜ul＞";
55:       // 顯示所有XML節點
56:       for ( i = 0; i < objNode.length; i++ ) {
57:          var iLink = objNode.item(i).childNodes(0).text;
58:          var iTitle = objNode.item(i).childNodes(1).text;
59:          var iPubDate = objNode.item(i).childNodes(2).text;
60:          str += "＜li＞( " + iPubDate + 
61:                 "＜/font＞) ＜a herf='" + iLink + "'＞ 
62:                 iTitle + "＜/a＞＜/li＞";
63:       }
64:       result.innerHTML = str + "";
65:    }
66: }

	

上述第 50~65 列的 if 條件判斷是否完成回應, 如果是, 在第 52 列取得送回的 XML DOM 物件, 第 53 列取得所有子節點, 在第 56~63 列使用 for 迴路顯示摘要資訊的清單, 並且更新 <div> 標籤的內容。

HTML 文件 AjaxRSS.htm 是 Ajax 應用程式的使用介面, 在第 4 列插入外部樣式表檔案 style.css, 第 5 列插入 JavaScript 程式檔案, 即 Ajax 引擎 Ajax.js, 如下所示：

上述第 10~18 列是 HTML 表單, 內含 <select> 和 <option> 標籤的下拉式選單, 使用 onchange 屬性指定事件處理程序 readRSS(), 如有更改就呼叫此函數, 其參數是選取值。第 19 列是顯示 RSS 摘要資訊的 <div> 標籤。

PHP 程式 readRSS.php 是使用 lastRSS.php 來剖析 RSS 的 XML 文件, 在下方第 4 列插入此程式檔案, 如下所示：

上述程式碼在第 6 列建立 lastRSS 物件後, 在第 7~11 列指定剖析 RSS 所需的相關屬性。下方第 13~18 列是 RSS 清單的結合陣列, 如下所示：

上述第 20~22 列取得 URL 參數 id 的值後, 取得 RSS 的網址, 然後在第 24 列使用 get() 方法剖析 RSS 文件, 參數是 RSS 網址。下方第 26~35 列建立回應的 XML 文件, 如下所示：

12: // RSS清單的結合陣列
13: $rssList = array(
14:   "News" => "http://tw.news.yahoo.com/rss/realtime",
15:   "Sports" => "http://tw.news.yahoo.com/rss/sports",
16:   "Heath" => "http://tw.news.yahoo.com/rss/health",
17:   "Finance" => "http://tw.news.yahoo.com/rss/finance"
18: );
19: // 選擇的RSS編號
20: $rssId = $_GET["id"];
21: // 取得RSS的URL網址
22: $url = $rssList[$rssId];
23: // 剖析RSS
24: $rs = $rss->get($url);	

上述第 28~34 列的 foreach 迴路取得剖析後的結合陣列來建立 XML 元素 item, 內含子元素 link、title 和 pubDate。

事實上, 因為 RSS 就是一份 XML 文件, 換句話說, 我們也可以直接使用 XMLHttpRequest 物件送出 HTTP 請求來取回此份 XML 文件, 然後使用 JavaScript 程式碼自行剖析 XML 文件。

有關其他精彩範例以及說明, 可以參考《JavaScript 與 Ajax 網頁製作徹底研究》一書第 16 章。