การอ่าน RSS ด้วย PHP AJAX

RSS Reader ใช้เพื่ออ่าน RSS Feed。

RSS อนุญาตให้ดูข่าวและปรับปรุงได้อย่างรวดเร็ว:

RSS Reader AJAX

ในตัวอย่าง AJAX ต่อไปนี้ เราจะแสดง RSS Reader ที่ทำงานด้วย AJAX ซึ่งเนื้อหาจาก RSS จะถูกนำเข้าสู่หน้าเว็บโดยไม่ต้องทำการปรับปรุงหน้าเว็บ:

เลือก RSS ข่าวสารที่อยู่ในตารางที่มีต่อไปนี้

กรุณาเลือก RSS-Feed หนึ่ง:

ที่นี่จะแสดง RSS Feed。

ตัวอย่างนี้ประกอบด้วยสามองค์ประกอบ:

  • ฟอร์ม HTML ที่เรียบง่าย
  • JavaScript
  • หน้า PHP

ฟอร์ม HTML

นี่คือหน้า HTML นี้。มันประกอบด้วยฟอร์ม HTML ที่เรียบง่ายและลิงก์ไปยังไฟล์ JavaScript ที่นำไปปฏิบัติ:

<html>
<head>
<script type="text/javascript" src="getrss.js"></script>
</head>
<body>
<form> 
Select an RSS-Feed:
<select onchange="showRSS(this.value)">
<option value="Google">Google News</option>
<option value="MSNBC">MSNBC News</option>
</select>
</form>
<p><div id="rssOutput">
<b>RSS Feed will be listed here.</b></div></p>
</body>
</html>

ตัวอย่างการอธิบาย - ฟอร์ม HTML

เช่นเดียวกับที่คุณเห็นได้ เพลิง HTML ข้างบนมีฟอร์ม HTML ที่มีตัวเลือกดาวน์ลูกเชื่อม

การทำงานของฟอร์มนี้เป็นดังนี้:

  1. เมื่อผู้ใช้เลือกตัวเลือกในดาวน์ลูกเชื่อม จะเกิดเหตุการณ์
  2. เมื่อเกิดเหตุการณ์เกิดขึ้น จะเรียกฟังก์ชัน showRSS()

ต่อไปคือฟอร์มที่มี <div> ชื่อว่า "rssOutput" ต่อไปด้วย。มันใช้เป็นตัวยันต์สำหรับข้อมูลที่ส่งกลับโดยฟังก์ชัน showRSS()

JavaScript

รหัส JavaScript จะถูกเก็บไว้ใน "getrss.js" และถูกเชื่อมโยงกับเอกสาร HTML:

var xmlHttp
function showRSS(str)
 { 
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
  {
  alert ("เบราซเรอร์ไม่สนับสนุน HTTP Request")
  return
  }
 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() 
 { 
 if (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)
 {
 // อินเทอร์เน็ต อิเลคเตอร์
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

ตัวอย่างที่ชี้แจง:

stateChanged() และฟังก์ชัน GetXmlHttpObject ติดต่อ คำขอ AJAX และ PHP ตัวอย่างในนี้เหมือนกัน

ฟังก์ชัน showRSS()

ฟังก์ชันนี้จะทำงานแต่อย่างไรเมื่อเลือกข้อเลือกในดาวน์ลูก

  1. กำหนด URL ที่ส่งไปยังเซิร์ฟเวอร์ (ชื่อไฟล์)
  2. เพิ่มตัวแปร (q) ใส่ URL ซึ่งมีค่าเท่ากับที่เลือกในดาวน์ลูกในรายการ
  3. เพิ่มตัวเลขสุ่มเพื่อป้องกันการซ้ำเก็บไฟล์โดยเซิร์ฟเวอร์
  4. เรียกฟังก์ชัน GetXmlHttpObject ที่จะสร้าง XMLHTTP และบอกให้โอบเจกต์นี้ทำงานเมื่อมีการเปลี่ยนแปลง
  5. เปิด XMLHTTP ผ่าน URL ที่กำหนด
  6. ส่งคำขอ HTTP ไปยังเซิร์ฟเวอร์

หน้า PHP

เรียก JavaScript โดยใช้หน้าเซิร์ฟเวอร์ที่มีชื่อเอกสาร "getrss.php" ซึ่งเป็นไฟล์ PHP:

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

ตัวอย่างที่ชี้แจง:

เมื่อโหมดที่หนึ่งส่งจาก JavaScript จะเกิดขึ้น:

  1. PHP หา RSS feed ที่ถูกเลือก
  2. สร้าง XML DOM ตัวเดียวกับ RSS feed ที่เลือก
  3. หาและออกแสดงส่วนประกอบจากช่องทาง RSS
  4. เลื่อนตรวจสอบส่วนประกอบ RSS สามโครงการแรกและออกแสดง