PHP - AJAX 简介

你好，有抱负的网页开发者们！今天，我们将进入AJAX与PHP的精彩世界。作为你友好邻里的计算机老师，我将会引导你进行这次旅程，即使你之前从未编写过一行代码。那么，拿一杯咖啡（或者茶，如果你喜欢的话），让我们开始吧！

PHP - AJAX Introduction

什么是AJAX？

AJAX代表异步JavaScript和XML。现在，不要被这个术语吓到！这实际上是一个非常酷的技术，可以使网页更加交互和用户友好。

想象你在一个餐厅里。没有AJAX，每次你想看菜单，你都得离开你的桌子，走到柜台，询问菜单，然后再回来。有了AJAX，就像有一个服务员可以不用打扰你的用餐体验就能给你带来你需要的信息。

在网页术语中，AJAX允许你的网页在不重新加载整个页面的情况下请求并接收服务器上的数据。这就像魔法一样，但更好，因为我们可以理解它是如何工作的！

AJAX是如何工作的

网页中发生一个事件（比如点击一个按钮）
JavaScript创建一个XMLHttpRequest对象
XMLHttpRequest对象向一个web服务器发送请求
服务器处理请求
服务器将响应发送回网页
JavaScript读取响应
JavaScript根据响应执行适当的操作

运行AJAX需要什么？

要运行AJAX，你需要三个主要组件：

支持JavaScript和XMLHttpRequest对象的web浏览器
能够处理AJAX请求的web服务器（如Apache）
服务器端编程语言（在我们的例子中，是PHP）

好消息！大多数现代web浏览器都支持AJAX，所以我们已经完成了三分之一！

设置你的环境

在我们开始编码之前，让我们确保我们设置好了所有东西：

安装XAMPP（它包含Apache web服务器和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>

现在，让我们分解一下：

我们有一个按钮，它的onclick事件调用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()	向要发送的头部添加一个标签/值对

结论

恭喜你！你已经迈出了使用PHP进行AJAX世界的第一步。我们已经涵盖了发送和接收数据异步的基本知识，这是许多现代web应用的基础。

记住，学习编码就像学习一门新语言。它需要时间和练习，但随着你编写的每一行代码，你都在变得更好。不要害怕实验，犯错误，并从中学习。

在我多年的教学过程中，我见证了无数学生从完全的初学者成长为熟练的开发者。关键在于坚持和好奇心。所以继续编码，继续学习，在你意识到之前，你将会构建出令人惊叹的交互式web应用！

下次，我们将探索更高级的AJAX技术以及如何处理不同类型的数据。在此之前，祝你编码愉快！

Credits: Image by storyset