PHP and AJAX RSS Reader

Kita'war RSS ana amfani dashi domin kafin arewa RSS.

RSS yana da yiwuwar ganin yankin na yau da kai na yau.

Kita'war RSS AJAX

A cikin wannan wasan AJAX, za a fi ƙoyar da ɗaukar RSS, kuma kuma ɗaukar ƙarfin RSS a cikin shafin web da bai ƙara ƙara bayanai ba.

Zaɗe arewa RSS daga daffin da a ƙarshe

Zaɗe arewa RSS:

A cikin wannan yanki, za a cika arewa RSS.

Yanin yankin zai ɗauke da hanyoyin:

  • Form HTML da yadda ke nuna
  • JavaScript
  • PHP 页面

Form HTML

Wurin HTML. Ita ya shaɗa da form HTML da ƙoƙarin JavaScript:

<html>
<head>
<script type="text/javascript" src="getrss.js"></script>
</head>
<body>
<form> 
Zaɗe arewa RSS:
<select onchange="showRSS(this.value)">
<option value="Google">Google News</option>
<option value="MSNBC">MSNBC News</option>
</select>
</form>
<p><div id="rssOutput">
<b>Arewa RSS zai kusa wuro.</b></div></p>
</body>
</html>

例子解释 - HTML 表单

正如您看到的，上面的 HTML 页面包含一个简单的 HTML 表单，其中带有一个下拉列表框。

表单是这样工作的：

  1. 当用户选择下拉框中的选项时，会触发一个事件
  2. 当事件触发时，执行 showRSS() 函数

表单下面是名为 "rssOutput" 的一个 <div>。它用作 showRSS() 函数所返回的数据的占位符。

JavaScript

JavaScript 代码存储在 "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() da GetXmlHttpObject fashin da PHP and AJAX Request 这一节中的例子相同。

showRSS() 函数

每当在下拉框中选择选择时，该函数就会执行：

  1. 定义发送到服务器的 url （文件名）
  2. 把参数 (q) 添加到 url，参数内容是下拉框中的被选项
  3. 添加一个随机数，以防止服务器缓存文件
  4. 调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象，并告知该对象在触发一个改变时去执行 stateChanged 函数
  5. 通过给定的 url 来打开 XMLHTTP
  6. 把 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 . "
");
//get and output "" 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 ("
" . $item_title . "");
 echo ("
");
 echo ($item_desc . "
");
 }
?>

例子解释：

当一个选项从 JavaScript 发送时，会发生：

  1. PHP 找出哪个 RSS feed 被选中
  2. 为选中的 RSS feed 创建 XML DOM 对象
  3. 找到并输出来自 RSS 频道的元素
  4. 遍历前三个 RSS 项目中的元素，并进行输出