Đọc RSS bằng AJAX và PHP

Bộ đọc RSS được sử dụng để đọc Feed RSS.

RSS cho phép duyệt nhanh tin tức và cập nhật.

Bộ đọc RSS AJAX

Trong ví dụ AJAX dưới đây, chúng ta sẽ演示 một bộ đọc RSS, qua đó nội dung từ RSS được tải vào trang web mà không cần làm mới.

Chọn một đăng ký tin tức RSS trong hộp danh sách dưới đây

Vui lòng chọn một Feed RSS:

Dưới đây là danh sách Feed RSS.

Ví dụ này bao gồm ba yếu tố:

  • Biểu mẫu HTML đơn giản
  • JavaScript
  • Trang web PHP

Biểu mẫu HTML

Đây là trang HTML. Nó chứa một biểu mẫu HTML đơn giản và liên kết đến tệp JavaScript được thực thi:

<html>
<head>
<script type="text/javascript" src="getrss.js"></script>
</head>
<body>
<form> 
Chọn một Feed RSS:
<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 sẽ được liệt kê ở đây.</b></div></p>
</body>
</html>

Giải thích ví dụ - Biểu mẫu HTML

Như bạn đã thấy, trang HTML trên có một biểu mẫu HTML đơn giản với một danh sách thả xuống.

Cách làm việc của biểu mẫu:

  1. Khi người dùng chọn lựa chọn trong danh sách thả xuống, một sự kiện sẽ được kích hoạt
  2. Khi sự kiện được kích hoạt, hàm showRSS() sẽ được thực thi

Dưới biểu mẫu có một div có tên là "rssOutput". Nó được sử dụng làm占位符 cho dữ liệu được trả về bởi hàm showRSS().

JavaScript

Mã JavaScript được lưu trữ trong tệp "getrss.js", nó được kết nối với tài liệu HTML:

var xmlHttp
function showRSS(str)
 { 
 xmlHttp = GetXmlHttpObject()
 if (xmlHttp == null)
  {
  alert("Trình duyệt không hỗ trợ yêu cầu HTTP")
  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)
 {
 // Internet Explorer
 try
  {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

Ví dụ giải thích:

stateChanged() và hàm GetXmlHttpObject với Yêu cầu AJAX và PHP Ví dụ trong phần này tương tự.

Hàm showRSS()

Hàm này sẽ được thực hiện mỗi khi chọn tùy chọn trong combo box:

  1. Định nghĩa url gửi đến máy chủ (tên tệp)
  2. Thêm tham số (q) vào url, nội dung tham số là tùy chọn được chọn trong combo box
  3. Thêm một số ngẫu nhiên để tránh máy chủ lưu trữ tệp
  4. Gọi hàm GetXmlHttpObject để tạo đối tượng XMLHTTP, và thông báo cho đối tượng này rằng cần thực hiện hàm stateChanged khi xảy ra thay đổi
  5. Mở XMLHTTP thông qua url đã cho
  6. Gửi yêu cầu HTTP đến máy chủ

Trang web PHP

Trang web dịch vụ JavaScript có tên là tệp "getrss.php" là tệp 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>");
 }
?>

Ví dụ giải thích:

Khi một tùy chọn được gửi từ JavaScript, sẽ xảy ra:

  1. PHP tìm ra feed RSS nào được chọn
  2. Tạo đối tượng XML DOM cho feed RSS đã chọn
  3. Tìm và xuất ra các phần tử từ các kênh RSS
  4. Duyệt qua các phần tử ba phần tử RSS đầu tiên và xuất ra