PHP - AJAX 簡介

Hello, 有志於網頁開發的各位！今天，我們將進入 AJAX 與 PHP 的精彩世界。作為你們親切友善的鄰居電腦老師，我將帶領你們開始這個旅程，即使你們之前從未寫過一行代碼。所以，來一杯咖啡（或者茶，如果你喜歡的話），我們開始吧！

PHP - AJAX Introduction

AJAX 是什麼？

AJAX 的全稱是 Asynchronous JavaScript and XML。現在，不要讓這個冗長的名稱嚇到你們！這實際上是一種非常酷的技術，讓網頁變得更加互動和用戶友好。

想像你在一間餐廳裡。沒有 AJAX 的話，每次你想看菜單，你都得離開你的桌子，走到櫃台，問他要菜單，然後再回到座位。有了 AJAX，就像有一個服務生可以不用打擾你的用餐體驗，就把你需要的資訊帶給你。

在網頁的語境中，AJAX 讓你的網頁能夠在不重新加載整個頁面的情況下，從伺服器請求和接收數據。這就像魔法，但更好，因為我們可以理解它是如何運作的！

AJAX 如何工作

網頁中發生某個事件（例如點擊一個按鈕）
JavaScript 創建一個 XMLHttpRequest 對象
XMLHttpRequest 對象向網頁伺服器發送請求
伺服器處理請求
伺服器將回應傳送回網頁
JavaScript 閱讀回應
JavaScript 根據回應執行相應的操作

執行 AJAX 需要什麼？

要執行 AJAX，你需要三個主要成分：

支援 JavaScript 和 XMLHttpRequest 對象的網頁瀏覽器
能夠處理 AJAX 請求的網頁伺服器（例如 Apache）
一種伺服器端編程語言（在我們的例子中，是 PHP）

好消息！大多數現代網頁瀏覽器都支援 AJAX，所以我們已經完成了三分之一！

配置你的環境

在我們開始編程之前，讓我們確保我們已經設置好了所有東西：

安裝 XAMPP（它包括 Apache 網頁伺服器和 PHP）
在你 XAMPP 安裝目錄的 htdocs 文件夾中創建一個新文件夾
打開你喜歡的文本編輯器（我個人喜歡 Visual Studio Code）

現在，我們已經準備好了，讓我們來寫一些代碼！

你的第一個 AJAX 請求

我們來從一個簡單的例子開始。我們將創建一個按鈕，當點擊時，它會在不重新加載頁面的情況下從伺服器獲取問候。

首先，創建一個名為 index.html 的 HTML 文件：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一個 AJAX 請求</title>
</head>
<body>
<h1>歡迎來到 AJAX！</h1>
<button onclick="getGreeting()">獲取問候</button>
<p id="greetingText"></p>

<script>
function getGreeting() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("greetingText").innerHTML = this.responseText;
}
};
xhttp.open("GET", "greeting.php", true);
xhttp.send();
}
</script>
</body>
</html>

現在，讓我們來分解這個代碼：

我們有一個按鈕，當點擊時會調用 getGreeting() 函數。
在 getGreeting() 函數中，我們創建了一個 XMLHttpRequest 對象。
我們設置了一個函數來處理伺服器的回應。
我們打開一個到 greeting.php 的連接並發送請求。

接著，創建一個名為 greeting.php 的 PHP 文件：

<?php
$greetings = array("Hello!", "Bonjour!", "Hola!", "Ciao!", "Konnichiwa!");
echo $greetings[array_rand($greetings)];
?>

這個 PHP 腳本只是從一個數組中隨機返回一個問候。

當你點擊按鈕時，JavaScript 對 greeting.php 發出請求，它會回應一個隨機的問候。然後 JavaScript 更新頁面上的問候，而不需要重新加載整個頁面！

向伺服器發送數據

現在我們已經掌握了獲取數據的方法，讓我們嘗試向伺服器發送數據。我們將創建一個簡單的表單，將名字發送到伺服器並獲得一個個性化的問候。

更新你的 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX 表單範例</title>
</head>
<body>
<h1>個性化問候</h1>
<input type="text" id="nameInput" placeholder="輸入你的名字">
<button onclick="getPersonalizedGreeting()">獲取問候</button>
<p id="greetingText"></p>

<script>
function getPersonalizedGreeting() {
var name = document.getElementById("nameInput").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("greetingText").innerHTML = this.responseText;
}
};
xhttp.open("POST", "personalized_greeting.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name=" + name);
}
</script>
</body>
</html>

然後創建一個新的 personalized_greeting.php：

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$greetings = array("Hello", "Bonjour", "Hola", "Ciao", "Konnichiwa");
$greeting = $greetings[array_rand($greetings)];
echo "$greeting, $name!";
}
?>

在這個例子中，我們使用 POST 請求將名字發送到伺服器。PHP 腳本然後使用這個名字來創建一個個性化的問候。

常見 AJAX 方法

這裡是一個常見 AJAX 方法的表格：

方法	描述
open()	指定請求類型和 URL
send()	將請求發送到伺服器
setRequestHeader()	向發送的頭部添加標籤/值對

結論

恭喜你！你剛剛踏入了 AJAX 與 PHP 的世界。我們已經涵蓋了異步發送和接收數據的基本知識，這是許多現代網頁應用程序的基础。

記住，學習編程就像學習一門新語言。這需要時間和練習，但隨著你寫的每一行代碼，你都在進步。不要害怕嘗試，犯錯誤，並從中學習。

在我多年的教學經驗中，我見過無數學生從完全的初學者變成了熟練的開發者。關鍵在於堅持和好奇心。所以，繼續編程，繼續學習，在你意識到之前，你將會建立起令人驚奇的互動網頁應用程序！

下次，我們將探討更先進的 AJAX 技術以及如何處理不同類型的數據。在那之前，祝你編程愉快！

Credits: Image by storyset