Tutoriel de base sur le développement PHP AJAX RSS Reader

AJAX RSS Reader

RSS Reader est utilisé pour lire les flux RSS.

Exemple :

Dans l'exemple suivant, nous allons démontrer un lecteur RSS, à travers lequel le contenu RSS est lu sans actualiser la page Web. >

Cet exemple comprend trois parties :

Page de formulaire HTML
Fichier PHP
Fichier XML

Page de formulaire HTML

Lorsque l'utilisateur sélectionne un Flux RSS dans la liste déroulante ci-dessus, une fonction nommée "showRSS()" est exécutée. Cette fonction est déclenchée par l'événement "onchange" :

Voir 1.php pour le code source

<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>

La page HTML ci-dessus contient un simple formulaire HTML avec une zone de liste déroulante.

Voici comment fonctionne le formulaire :

Lorsque l'utilisateur sélectionne une option dans la liste déroulante, un événement est déclenché
Lorsque l'événement est déclenché, exécutez la fonction showRSS()
Sous le formulaire se trouve un <div> nommé "rssOutput". Il est utilisé comme espace réservé pour les données renvoyées par la fonction showRSS().

La fonction showRSS() effectuera les étapes suivantes :

Vérifiez si un flux RSS est sélectionné
Créer un objet XMLHttpRequest
Créer une fonction qui s'exécute lorsque la réponse du serveur est prête
Envoyer une requête à un fichier sur le serveur
Veuillez noter le paramètre (q) ajouté à la fin de l'URL (contenant le contenu de la liste déroulante)

Fichier PHP

La page du serveur appelée ci-dessus via JavaScript est un fichier PHP nommé "2.php" :

Voir 2.php pour le code source

<?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>");
}
?>

Lorsqu'une demande de flux RSS est envoyée depuis JavaScript vers un fichier PHP, que se passe-t-il :

Vérifiez quel flux RSS est sélectionné
Créer un nouveau objet XML DOM
Charger le document RSS dans une variable XML
Extraire et sortir des éléments de l'élément de canal
Extraire et sortir des éléments des éléments d'élément

Fichier XML

<?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>

Expérience d'apprentissage

Cet exemple comprend principalement les points de connaissances suivants :

Bases du formulaire
Événement onkeyup : lorsque la touche du clavier est enfoncée Se produit lorsqu'elle est relâchée
Appel de fonction, transfert de valeur de fonction
Création d'un objet AJAX XMLHttpRequest, fonction exécutée lorsque le serveur répond, à la requête d'envoi de fichier sur le serveur : voir 1-5 pour l'expérience d'apprentissage
Méthode HTML DOM getElementById() : renvoie une référence au premier objet avec l'ID spécifié

Connaissances liées au XML

Créer un objet XML DOM
Charger le fichier XML dans un nouvel objet XML DOM
Récupérer l'objet avec une balise spécifique name : getElementsByTagName ()
Renvoie le premier nœud enfant de l'élément : méthode HTML DOM item()

section suivante

nouveau fichier

<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>

soumettre Réinitialiser le code

Opération automatique

Plein écran