Tutorial asas pembangunan PHP AJAX RSS Reader

Pembaca RSS AJAX

Pembaca RSS digunakan untuk membaca Suapan RSS.

Contoh:

Dalam contoh berikut, kami akan menunjukkan pembaca RSS, yang melaluinya kandungan daripada RSS dibaca tanpa memuatkan semula halaman web:

Contoh ini termasuk tiga bahagian:

Halaman borang HTML
Fail PHP
Fail XML

Halaman borang HTML

Apabila pengguna memilih Suapan RSS dalam senarai lungsur turun di atas, fungsi bernama "showRSS()" dilaksanakan. Fungsi ini dicetuskan oleh peristiwa "onchange":

Lihat 1.php untuk kod sumber

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

Halaman HTML di atas mengandungi borang HTML ringkas dengan kotak senarai juntai bawah.

Beginilah cara borang berfungsi:

Apabila pengguna memilih pilihan dalam kotak lungsur turun, peristiwa dicetuskan
Apabila acara dicetuskan, laksanakan fungsi showRSS()
Di bawah borang ialah <div> yang dinamakan "rssOutput". Ia digunakan sebagai ruang letak untuk data yang dikembalikan oleh fungsi showRSS().

Fungsi showRSS() akan melaksanakan langkah berikut:

Semak sama ada suapan RSS dipilih
Cipta objek XMLHttpRequest
Cipta fungsi yang dilaksanakan apabila respons pelayan sedia
Hantar permintaan ke fail pada pelayan
Sila ambil perhatian parameter (q) yang ditambahkan pada penghujung URL (mengandungi kandungan senarai lungsur turun)

Fail PHP

Halaman pelayan yang dipanggil di atas melalui JavaScript ialah fail PHP bernama "2.php":

Lihat 2.php untuk kod sumber

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

Apabila permintaan untuk suapan RSS dihantar daripada JavaScript ke fail PHP, apa yang berlaku:

Semak suapan RSS yang mana dipilih
Buat objek XML DOM baharu
Muatkan dokumen RSS dalam pembolehubah xml
Ekstrak dan keluarkan elemen daripada elemen saluran
Ekstrak dan keluarkan elemen daripada elemen item

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

Pengalaman pembelajaran

Contoh ini terutamanya merangkumi perkara pengetahuan berikut:

Asas borang
acara onkeyup: apabila kekunci papan kekunci ditekan Berlaku apabila dilepaskan
Panggilan fungsi, pemindahan nilai fungsi
Penciptaan objek AJAX XMLHttpRequest, fungsi yang dilaksanakan apabila pelayan bertindak balas, kepada Permintaan penghantaran fail pada pelayan: lihat 1-5 untuk pengalaman pembelajaran
HTML DOM getElementById() kaedah: Mengembalikan rujukan kepada objek pertama dengan ID yang ditentukan

Pengetahuan berkaitan XML

Buat objek XML DOM
Muatkan fail XML ke dalam objek XML DOM baharu
Dapatkan objek dengan teg tertentu name: getElementsByTagName ()
Mengembalikan nod anak pertama elemen: HTML DOM item() kaedah

Meneruskan pembelajaran

fail baharu

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

serahkan Tetapkan Semula Kod

Operasi automatik

Tutorial asas pembangunan PHP AJAX RSS Reader

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]