AJAXRSS
AJAX RSS Reader
In the following AJAX example, we will demonstrate an RSS reader through which the content from RSS is not processed. Load the web page while refreshing.
It contains a simple HTML form and a link to execute a JavaScript file:
As you can see, the HTML page above contains a simple HTML form with a drop-down list box.The form works like this:
1. When the user selects an option in the drop-down box, an event will be triggered
2. When the event is triggered, execute showRSS( ) Function
Below the form is a
JavaScript
The JavaScript code is stored in "getrss.js", which is connected 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 explanation:
The stateChanged() and GetXmlHttpObject functions are the same as the examples in the PHP and AJAX Requests section.showRSS() function
This function will be executed whenever a selection is selected in the drop-down box:
1. Define the url (file name) sent to the server
2. Add the parameter (q) to the url, the parameter content is the selected option in the drop-down box
3. Add a random number to prevent the server from caching the file
4. Call the GetXmlHttpObject function to create an XMLHTTP object, and tell the object to execute the stateChanged function when a change is triggered
5. Open XMLHTTP through the given url
6. Put the HTTP request Launched to the server
PHP pageThe server page that calls the JavaScript code is a PHP file named "getrss.php":
load($xml); //get elements from "Example explanation:" $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 " " echo(" " . $channel_title . ""); echo("
"); //get and output "
"); echo($channel_desc . "- " 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 ("
" . $item_title . ""); echo ("
"); } ?>
"); echo ($item_desc . "
When an option is sent from JavaScript, what happens:1. PHP finds out which RSS feed is selected
2. Create an XML DOM object for an RSS feed
3. Find and output the elements from the RSS channel
4. Traverse the elements in the first three RSS items and output them
![Front-end Vue3 actual combat [handwritten vue project]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![APIPOST tutorial [Popularization of technical concepts related to network communication]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
