在本章节中，我们将通过一个实际的例子来演示如何使用 AJAX 技术来实现网页与服务器之间的数据交互。我们将创建一个简单的网页，用户在网页上输入数据后，点击按钮将数据发送给服务器，服务器返回处理后的结果并在网页上显示。
步骤一：创建 HTML 结构
首先，我们需要创建一个 HTML 文件来构建我们的网页。在 HTML 文件中，我们需要一个输入框用来输入数据，一个按钮用来触发 AJAX 请求，并一个用来显示返回结果的区域。
-- -------------------- ---- -------
--------- -----
------
------
----------- ---------------
-------
------
------ ----------- ---------------
------- ------------------------- -------------
---- ------------------
------- -------------------------
-------
-------步骤二：编写 JavaScript 代码
接下来，我们需要编写 JavaScript 代码来处理用户输入数据，并发送 AJAX 请求到服务器。在这个例子中，我们将使用原生 JavaScript 来实现 AJAX。
-- -------------------- ---- -------
-------- ---------- -
--- ---- - -------------------------------------------
--- --- - --- -----------------
---------------- ------------------------- ------
------------------------------------ --------------------
---------------------- - ---------- -
-- --------------- --- -------------------- -
-- ----------- --- ---- -
------------------------------------------- - -----------------
- ---- -
------------------------------------------- - ------ ----------
-
-
--
------------------------- ----- ---- ----
-在这段代码中，我们首先获取用户输入的数据，然后创建一个 XMLHttpRequest 对象并设置请求的方法、URL 和请求头。接着我们监听 XMLHttpRequest 对象的状态变化事件，当请求完成时，根据返回的状态码来更新网页上的结果区域。
步骤三：设置服务器端
最后，我们需要在服务器端创建一个接口来处理 AJAX 请求，并返回处理后的结果。在这个例子中，我们假设服务器端接口为 http://example.com/api，接收 POST 请求，并返回处理后的数据。
app.post('/api', (req, res) => {
const data = req.body.data;
// 进行一些处理
res.send(`Processed: ${data}`);
});现在，当用户在输入框中输入数据后，点击按钮发送数据，服务器将返回处理后的结果并显示在网页上。
这就是一个简单的 AJAX 实例，通过这个例子，我们可以更好地理解 AJAX 技术的应用。