PHP and AJAX RSS Reader
An RSS Reader is used to read RSS Feeds
RSS allows fast browsing for news and updates
AJAX RSS Reader
In the AJAX example below we will demonstrate an RSS reader where the content from the RSS is loaded into the webpage without refreshing.Select an RSS News Feed in the Box Below
RSS Feed will be listed here.
This example consists of three pages:- a simple HTML form
- a JavaScript
- a PHP page.
The HTML Form
This is the HTML page. It contains a simple HTML form and a link to a 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> |
Example Explained - The HTML Form
As you can see, the HTML page above contains a simple HTML form with a drop-down box.The form works like this:
1. An event is triggered when the user selects an option in the drop down box
2. When the event is triggered, a function called showRSS() is executed.
3. Below the form is a <div> called "rssOutput". This is used as a placeholder for the return data of the showRSS() function.
The JavaScript
The JavaScript code is stored in "getrss.js" and linked to the HTML document: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;} |
Example Explained
The stateChanged() and GetXmlHttpObject functions are the same as in the PHP AJAX Suggest chapter.The showRSS() Function
Every time an option is selected in the input field this function executes the following:
1. Defines the url (filename) to send to the server
2. Adds a parameter (q) to the url with the selected option from the drop down box
3. Adds a random number to prevent the server from using a cached file
4. Calls on the GetXmlHttpObject function to create an XMLHTTP object, and tells the object to execute a function called stateChanged when a change is triggered
5. Opens the XMLHTTP object with the given url.
6. Sends an HTTP request to the server
The PHP Page
The server page called by the JavaScript code is a PHP file called "getrss.php":<?php//get the q parameter from URL$q=$_GET["q"];//find out which feed was selectedif($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>"); }?> |
Example Explained - The PHP Page
When an option is sent from the JavaScript the following happens:1. PHP finds out which RSS feed was selected
2. An XML DOM object is created for the selected RSS feed
3. The elements from the RSS channel are found and outputted
4. The three first elements from the RSS items are looped through and outputted
PHP and AJAX Poll
AJAX Suggest
In the AJAX example below we will demonstrate a poll where the web page can get the result without reloading.Do you like PHP and AJAX so far?
This example consists of four pages:
- a simple HTML form
- a JavaScript
- a PHP page
- a text file to store the results
The HTML Form
This is the HTML page. It contains a simple HTML form and a link to a JavaScript:<html><head><script src="poll.js"></script> </head><body><div id="poll"><h2>Do you like PHP and AJAX so far?</h2><form>Yes: <input type="radio" name="vote" value="0" onclick="getVote(this.value)"><br />No: <input type="radio" name="vote" value="1" onclick="getVote(this.value)"></form></div></body></html> |
Example Explained - The HTML Form
As you can see, the HTML page above contains a simple HTML form inside a "<div>" with two radio buttons.The form works like this:
1. An event is triggered when the user selects the "yes" or "no" option
2. When the event is triggered, a function called getVote() is executed.
3. Around the form is a <div> called "poll". When the data is returned from the getVote() function, the return data will replace the form.
The Text File
The text file (poll_result.txt) is where we store the data from the poll. It is stored like this:
0||0 |
Note: Remember to allow your web server to edit the text file. Do NOT give everyone access, just the web server (PHP).
The JavaScript
The JavaScript code is stored in "poll.js" and linked to in the HTML document:var xmlHttp;function getVote(int){xmlHttp=GetXmlHttpObject();if (xmlHttp==null) { alert ("Browser does not support HTTP Request"); return; } var url="poll_vote.php";url=url+"?vote="+int;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("poll"). innerHTML=xmlHttp.responseText; } } function GetXmlHttpObject(){ var objXMLHttp=null;if (window.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest(); }else if (window.ActiveXObject) { objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP"); }return objXMLHttp;} |
No comments:
Post a Comment