PHP development basic tutorial AJAX RSS Reader
AJAX RSS Reader
RSS Reader is used to read RSS Feeds.
Example:
In the following example, we will demonstrate an RSS reader, through which the content from RSS is read without refreshing the web page. Loading:
This example includes three parts
HTML form page
PHP file
XML file
##HTML form page
When the user selects an RSS-feed in the drop-down list above, a function named "showRSS()" is executed. This function is triggered by the "onchange" event: See 1.php for the source code<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script>
function showRSS(str)
{
//檢查是否有 RSS-feed 被選擇
if (str.length==0)
{
document.getElementById("rssOutput").innerHTML="";
return;
}
//創(chuàng)建 XMLHttpRequest 對象
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執(zhí)行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//創(chuàng)建在服務(wù)器響應(yīng)就緒時執(zhí)行的函數(shù)
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("rssOutput").innerHTML=xmlhttp.responseText;
}
}
//向服務(wù)器上的文件發(fā)送請求
xmlhttp.open("GET","2.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<!-- 在域的內(nèi)容改變時觸發(fā)onchange 事件 -->
<select onchange="showRSS(this.value)">
<option value="">選擇一個 RSS-feed:</option>
<option value="rss">讀取 RSS 數(shù)據(jù)</option>
</select>
</form>
<br>
<div id="rssOutput">RSS-feed 數(shù)據(jù)列表...</div>
</body>
</html>The above HTML page contains a simple HTML form with a drop-down list box. The form works like this:
- When the user selects an option in the drop-down box, an event is triggered
- When the event is triggered, execute the showRSS() function
- Below the form is a <div> named "rssOutput". It is used as a placeholder for the data returned by the showRSS() function.
- Check whether an RSS-feed is selected
- Create an XMLHttpRequest object
- Create a function that is executed when the server response is ready
- Send a request to a file on the server
- Please note the parameter (q) added to the end of the URL (containing the contents of the drop-down list)
PHP file
The server page called above through JavaScript is a PHP file named "2.php": See 2.php<?php
// rss 文件地址
$xml="3.xml";
//創(chuàng)建一個新的 XML DOM 對象
$xmlDoc = new DOMDocument();
//創(chuàng)建一個新的 XML DOM 對象
$xmlDoc->load($xml);
// 從 "<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;
// 輸出 "<channel>" 中的元素
echo("<p><a href='" . $channel_link
. "'>" . $channel_title . "</a>");
echo("<br>");
echo($channel_desc . "</p>");
// 輸出 "<item>" 中的元素
$x=$xmlDoc->getElementsByTagName('item');
for ($i=0; $i<=1; $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>");
}
?> for the source code When a request for an RSS feed is sent from JavaScript to a PHP file, what happens is: - Check which RSS feed is selected
- Create a new one XML DOM object
- Load RSS document in xml variable
- Extract and output elements from channel element
- Extract and output elements from item elements
XML file
<?xml version="1.0" encoding="UTF-8" ?> <rss version="2.0"> <channel> <title>php教程</title> <link>http://miracleart.cn</link> <description>學(xué)的不僅技術(shù)，更新夢想?。?lt;/description> <item> <title>RSS 教程</title> <link>http://miracleart.cn/rss/rss-tutorial.html</link> <description>通過使用 RSS，您可以有選擇地瀏覽您感興趣的以及與您的工作相關(guān)的新聞</description> </item> <item> <title>XML 教程</title> <link>http://miracleart.cn/xml/xml-tutorial.html</link> <description>XML 指可擴展標(biāo)記語言（eXtensible Markup Language）</description> </item> </channel> </rss>
Learning experience
This example mainly includes the following knowledge points:- Form basics
- onkeyup event: when the keyboard key is pressed Occurs when released
- Function call, function value transfer
- Creation of AJAX XMLHttpRequest object, function executed when the server responds, and File sending request on the server: see 1-5 for learning experience
HTML DOM getElementById() method: Returns a reference to the first object with the specified ID
XML related knowledge
Create an XML DOM object
Load the XML file into a new XML DOM object
Get the object with a specific tag name: getElementsByTagName ()
Returns the first child node of the element: HTML DOM item() method
