PHP 和 AJAX RSS 閱讀器-6.8PHP和AJAX

閱讀 ?·? 發(fā)布日期 2019-06-29 08:33 ?·? admin

RSS 閱讀器用于閱讀 RSS Feed。

RSS 允許對新聞和更新進(jìn)行快速瀏覽。

AJAX RSS 閱讀器

在下面的 AJAX 實(shí)例中，我們將演示一個 RSS 閱讀器，通過它，來自 RSS 的內(nèi)容在不進(jìn)行刷新的情況下載入網(wǎng)頁。

在下面的列表框中選擇一個 RSS 新聞訂閱

Select an RSS-Feed: 

 

在此列出 RSS Feed。

 

本例包括三個元素：

  • 簡單的 HTML 表單
  • JavaScript
  • PHP 頁面

HTML 表單

這是 HTML 頁面。它包含一個簡單的 HTML 表單和執(zhí)行一個 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 表單，其中帶有一個下拉列表框。

表單是這樣工作的：

  1. 當(dāng)用戶選擇下拉框中的選項(xiàng)時(shí)，會觸發(fā)一個事件
  2. 當(dāng)事件觸發(fā)時(shí)，執(zhí)行 showRSS() 函數(shù)

表單下面是名為 "rssOutput" 的一個 <div>。它用作 showRSS() 函數(shù)所返回的數(shù)據(jù)的占位符。

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() 和 GetXmlHttpObject 函數(shù)與 PHP 和 AJAX 請求 這一節(jié)中的例子相同。

showRSS() 函數(shù)

每當(dāng)在下拉框中選擇選擇時(shí)，該函數(shù)就會執(zhí)行：

  1. 定義發(fā)送到服務(wù)器的 url （文件名）
  2. 把參數(shù) (q) 添加到 url，參數(shù)內(nèi)容是下拉框中的被選項(xiàng)
  3. 添加一個隨機(jī)數(shù)，以防止服務(wù)器緩存文件
  4. 調(diào)用 GetXmlHttpObject 函數(shù)來創(chuàng)建 XMLHTTP 對象，并告知該對象在觸發(fā)一個改變時(shí)去執(zhí)行 stateChanged 函數(shù)
  5. 通過給定的 url 來打開 XMLHTTP
  6. 把 HTTP 請求發(fā)動到服務(wù)器

PHP 頁面

調(diào)用 JavaScript 代碼的服務(wù)器頁面是名為 "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("<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>");
 }
?>

例子解釋：

當(dāng)一個選項(xiàng)從 JavaScript 發(fā)送時(shí)，會發(fā)生：

  1. PHP 找出哪個 RSS feed 被選中
  2. 為選中的 RSS feed 創(chuàng)建 XML DOM 對象
  3. 找到并輸出來自 RSS 頻道的元素
  4. 遍歷前三個 RSS 項(xiàng)目中的元素，并進(jìn)行輸出