PHP开发基础教程之AJAX RSS Reader
AJAX RSS阅读器
RSS 阅读器用于阅读 RSS Feed。
实例:
在下面的实例中,我们将演示一个 RSS 阅读器,通过它,来自 RSS 的内容在网页不进行刷新的情况下被载入:
本实例包括三个部分
HTML表单页面
PHP文件
XML文件
HTML表单页面
当用户在上面的下拉列表中选择某个 RSS-feed 时,会执行名为 "showRSS()" 的函数。该函数由 "onchange" 事件触发:
源代码见1.php
<html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script> function showRSS(str) { //检查是否有 RSS-feed 被选择 if (str.length==0) { document.getElementById("rssOutput").innerHTML=""; return; } //创建 XMLHttpRequest 对象 if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } //创建在服务器响应就绪时执行的函数 xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("rssOutput").innerHTML=xmlhttp.responseText; } } //向服务器上的文件发送请求 xmlhttp.open("GET","2.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> <!-- 在域的内容改变时触发onchange 事件 --> <select onchange="showRSS(this.value)"> <option value="">选择一个 RSS-feed:</option> <option value="rss">读取 RSS 数据</option> </select> </form> <br> <div id="rssOutput">RSS-feed 数据列表...</div> </body> </html>
上面的 HTML 页面包含一个简单的 HTML 表单,其中带有一个下拉列表框。
表单是这样工作的:
当用户选择下拉框中的选项时,会触发一个事件
当事件触发时,执行 showRSS() 函数
表单下面是名为 "rssOutput" 的一个 <div>。它用作 showRSS() 函数所返回的数据的占位符。
showRSS() 函数会执行以下步骤:
检查是否有 RSS-feed 被选择
创建 XMLHttpRequest 对象
创建在服务器响应就绪时执行的函数
向服务器上的文件发送请求
请注意添加到 URL 末端的参数(q)(包含下拉列表的内容)
PHP文件
上面这段通过 JavaScript 调用的服务器页面是名为 "2.php" 的 PHP 文件:
源码见2.php
<?php // rss 文件地址 $xml="3.xml"; //创建一个新的 XML DOM 对象 $xmlDoc = new DOMDocument(); //创建一个新的 XML DOM 对象 $xmlDoc->load($xml); // 从 "<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; // 输出 "<channel>" 中的元素 echo("<p><a href='" . $channel_link . "'>" . $channel_title . "</a>"); echo("<br>"); echo($channel_desc . "</p>"); // 输出 "<item>" 中的元素 $x=$xmlDoc->getElementsByTagName('item'); for ($i=0; $i<=1; $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 ("<br>"); echo ($item_desc . "</p>"); } ?>
当 RSS feed 的请求从 JavaScript 发送到 PHP 文件时,将发生:
检查哪个 RSS feed 被选中
创建一个新的 XML DOM 对象
在 xml 变量中加载 RSS 文档
从 channel 元素中提取并输出元素
从 item 元素中提取并输出元素
XML文件
<?xml version="1.0" encoding="UTF-8" ?> <rss version="2.0"> <channel> <title>php教程</title> <link>http://www.php.cn</link> <description>学的不仅技术,更新梦想!!</description> <item> <title>RSS 教程</title> <link>http://www.php.cn/rss/rss-tutorial.html</link> <description>通过使用 RSS,您可以有选择地浏览您感兴趣的以及与您的工作相关的新闻</description> </item> <item> <title>XML 教程</title> <link>http://www.php.cn/xml/xml-tutorial.html</link> <description>XML 指可扩展标记语言(eXtensible Markup Language)</description> </item> </channel> </rss>
学习心得
本例子主要包括如下知识点:
表单基础
onkeyup事件:在键盘按键被松开时发生
函数调用、函数传值
AJAX XMLHttpRequest对象的创建、在服务器响应的时候执行的函数、向服务器上的文件发送请求:见1-5讲学习心得
HTML DOM getElementById()方法:返回对拥有指定 ID 的第一个对象的引用
XML相关知识
创建XML DOM对象
加载XML文件到新的XML DOM对象
取出特定标签名的对象:getElementsByTagName()
返回元素的首个子节点:HTML DOM item() 方法