PHP AJAX RSS 閱讀器實作教學

功能概述

使用者從下拉選單選擇 RSS 來源，前端透過 AJAX 請求 PHP 解析 XML，無需重新整理即可顯示最新文章列表。本範例示範 DOMDocument 解析 RSS 2.0 格式。

前端頁面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX RSS 閱讀器</title>
<script>
function showRSS(str) {
    if (!str) {
        document.getElementById('rssOutput').innerHTML = '';
        return;
    }
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById('rssOutput').innerHTML = xhr.responseText;
        }
    };
    xhr.open('GET', 'getrss.php?q=' + encodeURIComponent(str), true);
    xhr.send();
}
</script>
</head>
<body>
<form>
    <select onchange="showRSS(this.value)">
        <option value="">選擇一個 RSS-feed</option>
        <option value="rss">讀取 RSS 資料</option>
    </select>
</form>
<br>
<div id="rssOutput">RSS-feed 資料列表...</div>
</body>
</html>

後端 PHP (getrss.php)

<?php
$feed = isset($_GET['q']) ? $_GET['q'] : '';
if (!$feed) exit;

$xmlFile = 'rss_demo.xml'; // 實際應用可對應多個 feed 檔案或 URL
$doc = new DOMDocument();
if (!$doc->load($xmlFile)) {
    exit('無法載入 XML');
}

$channel = $doc->getElementsByTagName('channel')->item(0);
$title = $channel->getElementsByTagName('title')->item(0)->nodeValue;
$link = $channel->getElementsByTagName('link')->item(0)->nodeValue;
$desc = $channel->getElementsByTagName('description')->item(0)->nodeValue;

echo "<p><a href='$link' target='_blank'>$title</a><br>$desc</p>";

$items = $doc->getElementsByTagName('item');
$limit = min(5, $items->length); // 顯示前 5 筆
for ($i = 0; $i < $limit; $i++) {
    $item = $items->item($i);
    $itTitle = $item->getElementsByTagName('title')->item(0)->nodeValue;
    $itLink = $item->getElementsByTagName('link')->item(0)->nodeValue;
    $itDesc = $item->getElementsByTagName('description')->item(0)->nodeValue;
    echo "<p><a href='$itLink' target='_blank'>$itTitle</a><br>$itDesc</p>";
}
?>

RSS XML 範例 (rss_demo.xml)

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
    <title>範例 RSS</title>
    <link>https://example.com</link>
    <description>這是一個測試 RSS</description>
    <item>
        <title>第一篇文章</title>
        <link>https://example.com/post1</link>
        <description>內容摘要...</description>
    </item>
    <item>
        <title>第二篇文章</title>
        <link>https://example.com/post2</link>
        <description>內容摘要...</description>
    </item>
</channel>
</rss>

關鍵流程說明

1. 前端 onchange 觸發 showRSS()，送出 q 參數。
2. PHP 以 DOMDocument::load() 載入 XML (支援本地檔或遠端 URL，需 allow_url_fopen)。
3. 使用 getElementsByTagName() 遍歷 <channel> 與 <item> 節點。
4. 輸出 HTML 片段，前端直接注入 #rssOutput。

擴充建議

• 多來源支援：建立 feed 陣列對應檔案/URL，q 傳遞識別碼。
• 快取機制：RSS 解析較耗資源，建議快取解析結果 (APCu、Redis、檔案快取) 5-15 分鐘。
• 錯誤處理：捕獲 DOMDocument 載入失敗、網路逾時、XML 格式錯誤，回傳友善訊息。
• 命名空間：部分 RSS 含有 dc:creator, content:encoded 等，需用 getElementsByTagNameNS() 處理。
• 現代化前端：改用 fetch() + async/await，搭配模板引擎渲染。