Latest web development tutorials

PHP instance AJAX RSS reader

RSS Reader for reading RSS Feed.


AJAX RSS Reader

In the example below, we will demonstrate an RSS reader, through which the contents are loaded from the RSS in case the page does not refresh:


RSS-feed data list ...

Examples explain - HTML page

When a user in the above drop-down list, select a RSS-feed, it performs named "showRSS ()" function. This function by the "onchange" event is triggered:

<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<script>
function showRSS(str)
{
	if (str.length==0)
	{ 
		document.getElementById("rssOutput").innerHTML="";
		return;
		}
	if (window.XMLHttpRequest)
	{
		// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("rssOutput").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","getrss.php?q="+str,true);
	xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select onchange="showRSS(this.value)">
<option value="">选择一个 RSS-feed:</option>
<option value="rss">读取 RSS 数据</option>
</select>
</form>
<br>
<div id="rssOutput">RSS-feed 数据列表...</div>
</body>
</html>

showRSS () function performs the following steps:

  • Check for RSS-feed is selected
  • Create XMLHttpRequest object
  • Create function when the server is ready to perform the response
  • File on the server to send requests
  • Please note added to the end of the URL parameter (q) (contains the contents of the drop-down list)

PHP File

File rss_demo.xml .

Above this server page called by the JavaScript is called "getrss.php" PHP files:

<?php
// rss 文件
$xml="rss_demo.xml";

$xmlDoc = new DOMDocument();
$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>");
}
?>

When a request is sent from the RSS feed to JavaScript PHP file will occur:

  • Check which is selected RSS feed
  • Create a new XML DOM object
  • Loading RSS xml document in variable
  • Extracted from the channel element and the output element
  • Extracted from the item element and the output element