傳統 Web 應用:瀏覽器 ←HTML→ 伺服器
服務導向架構 (SOA):應用程式 ←XML/JSON→ 伺服器

CREATE TABLE articles (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(255),
author VARCHAR(255),
description TEXT
);
INSERT INTO articles VALUES
(1, 'What I like about dogs', 'Megan', 'Everything I love about dogs...'),
(2, 'Making action movies', 'Jack', 'How to script HK action flicks...'),
(3, 'Super Paper Mario Tips', 'Lori', 'Win at Paper Mario...'),
(4, 'Why I bark', 'Oso', '');
<?php
$articles = $db->query('SELECT * FROM articles');
foreach ($articles as $a) {
echo "<h2>{$a['title']}</h2>";
echo "<p>By {$a['author']}</p>";
echo "<div>{$a['description']}</div>";
}
?>
<?php
header('Content-Type: application/xml; charset=utf-8');
$articles = $db->query('SELECT * FROM articles');
echo '<?xml version="1.0" encoding="utf-8"?>';
echo '<articles>';
foreach ($articles as $a) {
echo '<article>';
echo '<id>' . $a['id'] . '</id>';
echo '<title><![CDATA[' . $a['title'] . ']]></title>';
echo '<author>' . $a['author'] . '</author>';
echo '<description><![CDATA[' . $a['description'] . ']]></description>';
echo '</article>';
}
echo '</articles>';
?>
fetch('/api/articles.xml').then(r=>r.text()).then(parseXML)ArticleService 類別,封裝所有資料存取邏輯/articles (HTML)、/articles.xml、/articles.json/v1/articles、/v2/articles