PHP AJAX 與 XML 互動實作教學

功能概述

前端下拉選單選擇歌手，AJAX 請求 PHP 解析 XML 專輯目錄，回傳該歌手的專輯詳細資訊。示範 DOMDocument 針對 XML 進行查詢與輸出。

前端頁面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX XML 範例</title>
<script>
function showCD(str) {
    const box = document.getElementById('txtHint');
    if (!str) {
        box.innerHTML = '';
        return;
    }
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            box.innerHTML = xhr.responseText;
        }
    };
    xhr.open('GET', 'getcd.php?q=' + encodeURIComponent(str), true);
    xhr.send();
}
</script>
</head>
<body>
<form>
    Select a CD:
    <select name="cds" onchange="showCD(this.value)">
        <option value="">Select a CD:</option>
        <option value="Bob Dylan">Bob Dylan</option>
        <option value="Bee Gees">Bee Gees</option>
        <option value="Cat Stevens">Cat Stevens</option>
    </select>
</form>
<br>
<div id="txtHint"><b>CD info will be listed here...</b></div>
</body>
</html>

後端 PHP (getcd.php)

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

$doc = new DOMDocument();
if (!$doc->load('cd_catalog.xml')) {
    exit('無法載入 XML');
}

$artists = $doc->getElementsByTagName('ARTIST');
$found = null;

for ($i = 0; $i < $artists->length; $i++) {
    $artist = $artists->item($i);
    if ($artist->nodeType === XML_ELEMENT_NODE) {
        $name = $artist->childNodes->item(0)->nodeValue;
        if ($name === $q) {
            $found = $artist->parentNode; // 取得父節點 (CD 節點)
            break;
        }
    }
}

if ($found) {
    foreach ($found->childNodes as $node) {
        if ($node->nodeType === XML_ELEMENT_NODE) {
            echo "<b>{$node->nodeName}:</b> {$node->childNodes->item(0)->nodeValue}<br>";
        }
    }
}
?>

XML 資料範例 (cd_catalog.xml)

<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
    <CD>
        <TITLE>Empire Burlesque</TITLE>
        <ARTIST>Bob Dylan</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1985</YEAR>
    </CD>
    <CD>
        <TITLE>Greatest Hits</TITLE>
        <ARTIST>Bee Gees</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Polydor</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1982</YEAR>
    </CD>
</CATALOG>

關鍵流程說明

1. 前端 onchange 送出歌手名稱 q。
2. PHP 載入 XML，取得所有 <ARTIST> 節點。
3. 遍歷比對節點文字內容，找到符合的歌手。
4. 取得其父節點 (<CD>)，輸出所有子元素名稱與值。

改進與擴充建議

• XPath 查詢 : 使用 DOMXPath 簡化搜尋：$xpath->query("//CD[ARTIST='$q']") (需注意注入，建議參數化或過濾)。
• 多筆結果 : 若同一歌手有多張專輯，應輸出所有匹配的 <CD> 節點。
• 錯誤處理 : 捕獲 XML 載入失敗、查無資料，回傳友善訊息。
• 快取 : 將 XML 解析為陣列快取，避免重複載入。
• 資料庫遷移 : 大量資料建議匯入資料庫，使用 SQL 查詢替代 XML 遍歷。
• 現代化前端 : 改用 fetch()，回傳 JSON 而非 HTML 片段，前端自行渲染。