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.
- 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>//m.sbmmt.com</link> <description>学的不仅技术，更新梦想！！</description> <item> <title>RSS 教程</title> <link>//m.sbmmt.com/rss/rss-tutorial.html</link> <description>通过使用 RSS，您可以有选择地浏览您感兴趣的以及与您的工作相关的新闻</description> </item> <item> <title>XML 教程</title> <link>//m.sbmmt.com/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
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>
<!-- 在域的内容改变时触发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>
Preview
Clear
- Course Recommendations
- Courseware download
Free
Free
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~
Students who have watched this course are also learning
Let's briefly talk about starting a business in PHP
Quick introduction to web front-end development
Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things
Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum]
Login verification and classic message board
Computer network knowledge collection
Quick Start Node.JS Full Version
The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)