RSS 阅读器用于阅读 RSS Feed。 RSS 允许对新闻和更新进行快速浏览。
AJAX RSS 阅读器在下面的 AJAX 实例中,我们将演示一个 RSS 阅读器,通过它,来自 RSS 的内容在不进行刷新的情况下载入网页。
在下面的列表框中选择一个 RSS 新闻订阅Select an RSS-Feed: Google News MSNBC News
在此列出 RSS Feed。
本例包括三个元素: - 简单的 HTML 表单
- JavaScript
- PHP 页面
HTML 表单这是 HTML 页面。它包含一个简单的 HTML 表单和执行一个 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 表单,其中带有一个下拉列表框。 表单是这样工作的: - 当用户选择下拉框中的选项时,会触发一个事件
- 当事件触发时,执行 showRSS() 函数
表单下面是名为 "rssOutput" 的一个 <div>。它用作 showRSS() 函数所返回的数据的占位符。
JavaScriptJavaScript 代码存储在 "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 函数与 PHP 和 AJAX 请求 这一节中的例子相同。 showRSS() 函数每当在下拉框中选择选择时,该函数就会执行: - 定义发送到服务器的 url (文件名)
- 把参数 (q) 添加到 url,参数内容是下拉框中的被选项
- 添加一个随机数,以防止服务器缓存文件
- 调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象,并告知该对象在触发一个改变时去执行 stateChanged 函数
- 通过给定的 url 来打开 XMLHTTP
- 把 HTTP 请求发动到服务器
PHP 页面调用 JavaScript 代码的服务器页面是名为 "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("
- ");
- 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 ("
- ");
- echo ($item_desc . "</p>");
- }
- ?>
复制代码 例子解释:当一个选项从 JavaScript 发送时,会发生: - PHP 找出哪个 RSS feed 被选中
- 为选中的 RSS feed 创建 XML DOM 对象
- 找到并输出来自 RSS 频道的元素
- 遍历前三个 RSS 项目中的元素,并进行输出
|