AJAX 是一种用于在不重新加载整个页面的情况下更新页面的技术，它使用 JavaScript，XML 和 HTTP 请求来实现局部更新。Express.js 是一种流行的 Node.js 框架，提供了一种简单的方式来处理 AJAX 请求。在本文中，我们将介绍 Express.js 中的 AJAX 请求处理方法，并提供详细的示例代码。
AJAX 请求的基本原理
在 AJAX 中，客户端和服务器之间通过异步 HTTP 请求进行通信。在客户端，JavaScript 代码执行一个 HTTP 请求，并且当响应返回时更新页面的局部内容。以下是实现 AJAX 请求的步骤：
- 创建 XMLHttpRequest 对象
- 使用 open() 方法设置 HTTP 方法，请求的 URL 以及是否异步
- 使用 send() 方法将请求发送到服务器
- 当响应返回时，使用 responseText 或 responseXML 属性来获取响应的内容
Express.js 提供了一种简单方便的方式来处理 AJAX 请求。在 Express.js 中，通过使用 res 对象发送 JSON 数据来响应 AJAX 请求。下面是一个 Express.js 应用程序中的 AJAX 请求处理方法：
app.get('/api/data', (req, res) => {
const data = {
name: '张三',
age: 24,
gender: '男'
}
res.send(data)
})该方法接受一个 GET 请求并返回一个包含 JSON 数据的对象。JSON 数据包含三个属性：name，age 和 gender。当客户端发送 AJAX 请求时，它将在服务器上调用该方法，并返回 JSON 数据。
Express.js 中的 AJAX 请求处理示例
以下是一个完整的 Express.js 应用程序，它演示了如何处理 AJAX 请求：
-- -------------------- ---- -------
-- ------
----- ------- - ------------------
----- --- - ---------
----- ---- - ----
-- ----
---------------------------------
-- -- ---- --
-------------------- ----- ---- -- -
----- ---- - -
----- -----
---- ---
------- ---
-
--------------
--
-- -----
---------------- -- -- -
-----------------------------------------------------
--该应用程序创建一个静态资源目录，并在 /api/data 路由中处理 AJAX 请求。当一个 GET 请求发送到 /api/data 时，它将返回一个包含 JSON 数据的对象。
现在，我们可以在客户端使用以下代码来处理 AJAX 请求：
-- -------------------- ---- -------
-- ------------------
----- --- - --- ----------------
-- ----------------
--------------- ------------ -----
-- ----
----------
-- ----
---------------------- - -------- -- -
-- --------------- --- ------------------- -- ---------- --- ---- -
----- ---- - ----------------------------
---------------------------------------------------------------
-
-该代码使用 XMLHttpRequest 对象发送 AJAX 请求，并通过在回调函数中处理响应来更新页面。
结论
利用 Express.js 和 AJAX，我们可以轻松地实现一个动态响应的 Web 应用程序。Express.js 提供了一个简单而灵活的方法来处理 AJAX 请求。本文中的示例代码演示了在 Express.js 中如何处理 AJAX 请求。我们希望这篇文章对你有所帮助，能够让你更好地理解 AJAX 技术和 Express.js 框架。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fd10104471362601773e2e