AJAXRSS

AJAX RSS 阅读器

在下面的 AJAX 实例中，我们将演示一个 RSS 阅读器，通过它，来自 RSS 的内容在不进行刷新的情况下载入网页。

HTML 表单

这是 HTML 页面。它包含一个简单的 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. 把 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("<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 项目中的元素，并进行输出

Weiter lernen

neue Datei

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

einreichen Code zurücksetzen

Automatische Operation

AJAXRSS

GrundschuleTutorial zur Imitation einer Imperial CMS-Unternehmenswebsite

GrundschuleNeulinge ohne WordPress-Grundkenntnisse erstellen persönliche Blogs und Unternehmenswebsites

GrundschuleUltimatives CMS-zertifiziertes Anleitungsvideo zum Erstellen von Websites

GrundschuleFront-End-Projekt-Shangyou [umfassende Praxis der HTML/CSS/JS-Technologie]

DazwischenliegendVue3.0 von 0 zum Aufbau einer universellen Backend-Managementsystem-Projektpraxis

GrundschuleNullbasierter Front-End-Kurs [Vue fortgeschrittenes Lernen und praktische Anwendung]

GrundschuleWEB-Frontend-Tutorial [HTML5+CSS3+JS]

GrundschuleKurze Einführung in Apipost

DazwischenliegendVue3 + TypeScript praktische Tutorial-Projektpraxis auf Unternehmensebene

GrundschuleLassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen

DazwischenliegendVUE E-Commerce-Projekt (Front-End- und Back-End-Doppelprojekt, tatsächlicher Kampf)

GrundschulePraktische Anwendung von Apipost [API, Schnittstelle, automatisiertes Testen, Mock]