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中文网(php.cn)</title>
<script>
function showRSS(str)
{
	//检查是否有 RSS-feed 被选择
	if (str.length==0)
	{ 
		document.getElementById("rssOutput").innerHTML="";
		return;
		}
	//创建 XMLHttpRequest 对象
	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","2.php?q="+str,true);
	xmlhttp.send();
}
</script>
</head>
<body>
<form>
<!-- 在域的内容改变时触发onchange 事件 -->
<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>

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.

The showRSS() function will perform the following steps:

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";
//创建一个新的 XML DOM 对象
$xmlDoc = new DOMDocument();
//创建一个新的 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://www.php.cn</link>
  <description>学的不仅技术，更新梦想！！</description>
  <item>
    <title>RSS 教程</title>
    <link>http://www.php.cn/rss/rss-tutorial.html</link>
    <description>通过使用 RSS，您可以有选择地浏览您感兴趣的以及与您的工作相关的新闻</description>
  </item>
  <item>
    <title>XML 教程</title>
    <link>http://www.php.cn/xml/xml-tutorial.html</link>
    <description>XML 指可扩展标记语言（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

Continuing Learning

new file

<html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script> function showRSS(str) { //检查是否有 RSS-feed 被选择 if (str.length==0) { document.getElementById("rssOutput").innerHTML=""; return; } //创建 XMLHttpRequest 对象 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","2.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>

submit Reset Code

Automatic operation

PHP development basic tutorial AJAX RSS Reader

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]