AJAXRSS

AJAX RSS 閱讀器

在下面的AJAX 實例中，我們將示範一個RSS 閱讀器，透過它，來自RSS 的內容在不進行刷新的情況下載入網頁。

中下使用它包含一個簡單的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 表單，其中帶有一個下拉列錶框。表單是這樣運作的：

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() 和GetXmlHttpObject 函數與 PHP 和AJAX 請求這一節的範例相同。 showRSS() 函數

每當在下拉方塊中選擇選擇時，函數就會執行：

1. 定義傳送到伺服器的url （檔案名稱）

2. 將參數(q) 加到url，參數內容是下拉方塊中的被選項

3. 加一個隨機數，以防止伺服器快取檔案

4. 呼叫GetXmlHttpObject 函數來建立XMLHTTP 對象，並告知該對像在觸發一個改變時去執行stateChanged 函數

5. 透過給定的url 來開啟XMLHTTP

##6. 透過給定的url 來開啟XMLHTTP

6. 發動到伺服器

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("<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 專案中的元素，並進行輸出

繼續學習

新建檔案

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

重置程式碼

自動運行

提交

預覽 Clear