Pembaca RSS AJAX dan PHP
- Halaman Sebelumnya AJAX Live Search
- Halaman Berikutnya AJAX Poll
Pembaca RSS digunakan untuk membaca Feed RSS.
RSS memungkinkan untuk melihat berita dan pembaruan dengan cepat.
Pembaca RSS AJAX
Dalam contoh AJAX di bawah ini, kami akan menunjukkan suatu pembaca RSS, melalui yang Feed RSS akan dimuat ke halaman web tanpa memuat ulang halaman.
Pilih suatu berita berlangganan RSS di kotak daftar di bawah ini
Contoh ini termasuk tiga elemen:
- Formulir HTML sederhana
- JavaScript
- Halaman PHP
Formulir HTML
Ini adalah halaman HTML. Ini termasuk suatu formulir HTML sederhana dan tautan untuk melaksanakan berkas JavaScript:
<html> <head> <script type="text/javascript" src="getrss.js"></script> </head> <body> <form> Pilih Feed RSS: <select onchange="showRSS(this.value)"> <option value="Google">Berita Google</option> <option value="MSNBC">Berita MSNBC</option> </select> </form> <p><div id="rssOutput"> <b>Feed RSS akan disiarkan di sini.</b></div></p> </body> </html>
Pengertian contoh - Formulir HTML
Seperti yang Anda lihat, halaman HTML atas mengandung formulir HTML sederhana yang memiliki kotak pilihan
Bagaimana cara kerja formulir:
- Ketika pengguna memilih opsi di kotak pilihan, peristiwa dijalankan
- Ketika peristiwa dijalankan, eksekusi fungsi showRSS()
Bawah formulir adalah sebuah <div> bernama "rssOutput". Ini digunakan sebagai penempatan data yang dikembalikan oleh fungsi showRSS().
JavaScript
Kode JavaScript disimpan di "getrss.js", yang dihubungkan dengan dokumen HTML:
var xmlHttp function showRSS(str) { xmlHttp=GetXmlHttpObject() jika (xmlHttp==null) { alert ("Browser tidak mendukung Permintaan HTTP") kembalikan } var url="getrss.php" url=url+"?q="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) } function stateChanged() { jika (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("rssOutput") .innerHTML=xmlHttp.responseText } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } kembalikan xmlHttp; }
Contoh penjelasan:
stateChanged() dan fungsi GetXmlHttpObject dengan Permintaan AJAX dan PHP Contoh di bagian ini sama.
Fungsi showRSS()
Fungsi ini akan dijalankan setiap kali pilihan dipilih di daftar pilihan
- Tentukan url yang dikirim ke server (nama berkas)
- Tambahkan parameter (q) ke url, parameternya adalah opsi yang dipilih di daftar pilihan
- Tambahkan angka acak untuk mencegah pengecapan berkas server
- Panggil fungsi GetXmlHttpObject untuk membuat objek XMLHTTP, dan beritahu objek ini untuk melaksanakan fungsi stateChanged saat terjadi perubahan
- Membuka XMLHTTP melalui url yang diberikan
- Membuat permintaan HTTP ke server
Halaman PHP
Laman pelayanan kode JavaScript bernama berkas "getrss.php" adalah berkas PHP yang bernama:
<?php //get the q parameter from URL $q=$_GET["q"]; //find out which feed was selected if($q=="Google") { $xml=("http://news.google.com/news?ned=us&topic=h&output=rss"); } elseif($q=="MSNBC") { $xml=("http://rss.msnbc.msn.com/id/3032091/device/rss/rss.xml"); } $xmlDoc = new DOMDocument(); $xmlDoc->load($xml); //get elements from "<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; //output elements from "<channel>" echo("<p><a href='" . $channel_link . "'>" . $channel_title . "</a>"); echo("<br />"); echo($channel_desc . "</p>"); //get and output "<item>" elements $x=$xmlDoc->getElementsByTagName('item'); for ($i=0; $i<=2; $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>"); } ?>
Contoh penjelasan:
Ketika opsi dikirimkan dari JavaScript, hal yang terjadi adalah:
- PHP menemukan feed RSS mana yang dipilih
- Buat objek XML DOM untuk feed RSS yang dipilih
- Temukan dan output elemen dari kanal RSS
- Berpelukan elemen RSS tiga proyek pertama, dan lakukan output
- Halaman Sebelumnya AJAX Live Search
- Halaman Berikutnya AJAX Poll