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中文網(wǎng)(php.cn)</title>
<script>
function showRSS(str)
{
//檢查是否有 RSS-feed 被選擇
if (str.length==0)
{
document.getElementById("rssOutput").innerHTML="";
return;
}
//創(chuàng)建 XMLHttpRequest 對(duì)象
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執(zhí)行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//創(chuàng)建在服務(wù)器響應(yīng)就緒時(shí)執(zhí)行的函數(shù)
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("rssOutput").innerHTML=xmlhttp.responseText;
}
}
//向服務(wù)器上的文件發(fā)送請(qǐng)求
xmlhttp.open("GET","2.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<!-- 在域的內(nèi)容改變時(shí)觸發(fā)onchange 事件 -->
<select onchange="showRSS(this.value)">
<option value="">選擇一個(gè) RSS-feed:</option>
<option value="rss">讀取 RSS 數(shù)據(jù)</option>
</select>
</form>
<br>
<div id="rssOutput">RSS-feed 數(shù)據(jù)列表...</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";
//創(chuàng)建一個(gè)新的 XML DOM 對(duì)象
$xmlDoc = new DOMDocument();
//創(chuàng)建一個(gè)新的 XML DOM 對(duì)象
$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.miracleart.cn</link> <description>學(xué)的不僅技術(shù)，更新夢(mèng)想！！</description> <item> <title>RSS 教程</title> <link>http://www.miracleart.cn/rss/rss-tutorial.html</link> <description>通過使用 RSS，您可以有選擇地瀏覽您感興趣的以及與您的工作相關(guān)的新聞</description> </item> <item> <title>XML 教程</title> <link>http://www.miracleart.cn/xml/xml-tutorial.html</link> <description>XML 指可擴(kuò)展標(biāo)記語(yǔ)言（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
