WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

PHP Example - AJAX RSS Reader


RSS reader is used to read RSS feeds.


AJAX RSS Reader

In the following example, we will demonstrate an RSS reader, through which content from RSS is loaded without the page being refreshed:


RSS-channel will be recorded here...

Example Explained - The HTML Page

When a client chooses a RSS-channel in the dropdown list over, a capacity called "showRSS()" is executed. The work is activated by the "onchange" event:

<html>
<head>
<script>
work showRSS(str) {
  in the event that (str.length==0) {
    document.getElementById("rssOutput").innerHTML="";
    return;
  }
  in the event that (window.XMLHttpRequest) {
   /code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { /code for 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="">Select a RSS-feed:</option>
<option value="Google">Google News</option>
<option value="NBC">NBC News</option>
</select>
</form>
<br>
<div id="rssOutput">RSS-channel will be recorded here...</div>
</body>
</html>

Example explanation-HTML page

When a user selects an RSS-feed from the drop-down list above, a function named "showRSS ()" is executed. This function is triggered by the "onchange" event:

Example

<html> <head> <meta charset="utf-8"> <title>welookups Tutorial(welookups.com)</title> <script> function showRSS(str) { if (str.length==0) { document.getElementById("rssOutput").innerHTML=""; return; } if (window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari Browser execution code xmlhttp=new XMLHttpRequest(); } else { //IE6, IE5 Browser execution code 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="">choose one RSS-feed:</option> <option value="rss">Read RSS data</option> </select> </form> <br> <div id="rssOutput">RSS-feed dataListe...</div> </body> </html>

showRSS () function performs the following steps:

  • Check if an RSS-feed is selected
  • Creating an XMLHttpRequest object
  • Create a function to be 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 (including the content of the drop-down list)

PHP file

The above server page called via JavaScript is a PHP file named "getrss.php":

Example

<?php // rss 文件 $xml="rss_demo.xml"; $xmlDoc = new DOMDocument(); $xmlDoc->load($xml); // From "<channel>" Read element $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 "<channel>" Element in echo("<p><a href='" . $channel_link . "'>" . $channel_title . "</a>"); echo("<br>"); echo($channel_desc . "</p>"); // Output "<item>" Element in $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 for an RSS feed is sent from JavaScript to a PHP file, it will happen:

  • Check which RSS feed is selected
  • Creating a new XML DOM object
  • Load RSS documents in xml variables
  • Extract and output elements from channel elements
  • Extract and output elements from the item element