PHP and AJAX RSS Reader

Ang RSS reader ay ginagamit para basahin ang RSS Feed.

RSS ay nagbibigay ng mabilis na pagbabasa ng balita at mga update.

AJAX RSS Reader

Sa ibabaw ng mga halimbawa ng AJAX sa ibabaw, amin magpapakita ng isang RSS reader kung saan ang nilalaman ng RSS ay ilalagay sa pahina nang walang pag刷新.

Pumili ng isang RSS balita subscription sa ibabaw ng listahan

Pumili ng isang RSS-Feed:

Ito ay inilalagay dito ang RSS Feed.

Ang halimbawa na ito ay naglalaman ng tatlong elemento:

  • Simple HTML Form
  • JavaScript
  • PHP pahina

HTML Form

Ito ay HTML pahina. Ito ay naglalaman ng isang simpleng HTML form at link sa isang JavaScript file:

<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>

Talakayan ng Halimbawa - HTML Form

Tulad ng nakikita ninyo, ang HTML page na ito ay naglalaman ng simple na HTML form na may dropdown list.

Pagkilos ng form:

  1. Kapag pinili ng user ang opsyon sa dropdown, magiging trigger ang isang event.
  2. Kapag nagaganap ang event, nagpapatupad ang function showRSS().

Ang form sa ibaba ay isang <div> na may pangalan na "rssOutput". Ginagamit ito bilang placeholder para sa data na ibabalik ng function showRSS().

JavaScript

Ang JavaScript code ay nakaugnay sa "getrss.js", na nakakabit sa HTML document:

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");
  }
 }
ibabalik ang xmlHttp;
}

例子解释：

stateChanged() at ang function GetXmlHttpObject ay may kaugnayan sa PHP and AJAX Requests Ang halimbawa sa ito ay katulad.

showRSS() function

Kapag napili ang isang option sa dropdown, ang function na ito ay magsasagawa:

  1. Tukuyin ang url na magpapadala sa server (filename)
  2. Magdagdag ng parameter (q) sa url, ang nilalaman ng parameter ay ang pinili mula sa dropdown
  3. Magdagdag ng isang random number upang maiwasan ang caching ng file ng server
  4. Tumawag sa function na GetXmlHttpObject upang lumikha ng XMLHTTP object, at sabihin sa object na dapat maisagawa ang stateChanged function kapag may pagbabago
  5. Magbukas ng XMLHTTP sa ibig sabihin ng url
  6. Maglunsad ng HTTP request sa server

PHP pahina

Ang pahina na tinatawag na "getrss.php" ay isang PHP file na nagsasagawa ng serbisyo sa JavaScript code:

<?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("<br />");
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 ("<br />");
 echo ($item_desc . "</p>");
 }
?>

例子解释：

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

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