結合 AJAX 進行 PHP 開發入門（三）：使用 Sajax 打造相簿應用

前言

本文示範如何利用 Sajax 將傳統多頁面 PHP 相簿轉型為單頁面 Ajax 應用，實現無重新整理的動態互動。

核心架構

相簿主要包含兩個函數：get_table()（縮圖列表）與 get_image()（大圖顯示）。透過 Sajax 導出這兩個函數，前端 JavaScript 即可直接呼叫後端 PHP 邏輯。

伺服器端 PHP 程式碼

<?php
require("Sajax.php");

function get_image() { /* 稍後定義 */ }
function get_thumbs_table() { /* 稍後定義 */ }

$sajax_request_type = "GET";
sajax_init();
sajax_export("get_thumbs_table", "get_image");
sajax_handle_client_request();
?>

前端 HTML 與 JavaScript

頁面主體僅需一個容器：

<body>
<h1>Sajax Photo Album</h1>
<div id="window"></div>
</body>

在 <head> 區塊引入 Sajax 產生的 JavaScript，並定義通用回呼函數 to_window() 將伺服器回傳內容直接寫入 #window：

<script language="javascript">
<? sajax_show_javascript(); ?>

function to_window(output) {
    document.getElementById("window").innerHTML = output;
}

window.onload = function() {
    x_get_table(0, 5, to_window);
};
</script>

將連結轉為 Ajax 呼叫

原本的超連結：

• href="index.php?start=0&step=5" → onclick="x_get_table(0, 5, to_window)"
• href="expand.php?index=0" → onclick="x_get_image(0, to_window)"

同步修改產生連結的 PHP 函數 get_table_link() 與 get_image_link()。完成後，所有互動皆在單一頁面透過 JavaScript 與伺服器溝通，URL 保持不變，使用者體驗大幅提升。

優勢總結

• 程式碼模組化：邏輯集中在單一檔案，便於維護。
• 無需額外處理器腳本：Sajax 自動處理請求路由。
• 部署彈性：頁面位置變動不影響功能。