前後端分離時代的 PHP 與 JavaScript 互動：從傳統 JS 呼叫到現代 API 設計

傳統模式：`` 引入。瀏覽器將 PHP 回應視為 JS 執行，達到「無刷新」更新頁面局部的效果。

<?php
// counter.php
$file = 'count.txt';
$count = file_exists($file) ? (int)file_get_contents($file) : 0;
$count++;
file_put_contents($file, $count);
header('Content-Type: application/javascript; charset=utf-8');
echo "document.getElementById('counter').textContent = {$count};";
?>

缺點明顯：耦合度高、難以除錯、無法複用邏輯、安全風險（XSS）、不支援現代模組化開發。

現代最佳實踐：RESTful API + Fetch/Axios

後端：輸出純 JSON

<?php
// api/counter.php
header('Content-Type: application/json; charset=utf-8');
$file = __DIR__ . '/../data/count.txt';
$count = file_exists($file) ? (int)file_get_contents($file) : 0;
$count++;
file_put_contents($file, $count);
echo json_encode(['count' => $count, 'updated_at' => date('c')]);

前端：非同步請求與 DOM 更新

<div id="counter">載入中...</div>
<script type="module">
async function loadCounter() {
  try {
    const res = await fetch('/api/counter.php');
    const data = await res.json();
    document.getElementById('counter').textContent = data.count;
  } catch (e) {
    console.error('計數器載入失敗', e);
  }
}
loadCounter();
</script>

進階模式：Vue/React/Livewire/Alpine.js 整合

• Vue 3 + Vite：`