Pembaca RSS AJAX dan PHP

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

Pilih Feed RSS:

Disini daftar Feed RSS.

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:

  1. Ketika pengguna memilih opsi di kotak pilihan, peristiwa dijalankan
  2. 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

  1. Tentukan url yang dikirim ke server (nama berkas)
  2. Tambahkan parameter (q) ke url, parameternya adalah opsi yang dipilih di daftar pilihan
  3. Tambahkan angka acak untuk mencegah pengecapan berkas server
  4. Panggil fungsi GetXmlHttpObject untuk membuat objek XMLHTTP, dan beritahu objek ini untuk melaksanakan fungsi stateChanged saat terjadi perubahan
  5. Membuka XMLHTTP melalui url yang diberikan
  6. 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:

  1. PHP menemukan feed RSS mana yang dipilih
  2. Buat objek XML DOM untuk feed RSS yang dipilih
  3. Temukan dan output elemen dari kanal RSS
  4. Berpelukan elemen RSS tiga proyek pertama, dan lakukan output