在现代 Web 开发中，前端和后端之间的通信变得越来越重要。AJAX 技术（也称为 XMLHttpRequest 或 XHR）负责处理异步通信，使前端能够在不必重新加载整个页面的情况下向后端发送请求并获取数据。Express.js 是一个 Node.js 后端框架，它提供了方便易用的路由和中间件，使得构建 Web 应用变得更加容易。
本文将介绍如何使用 XHR 和 jQuery 进行简单数据获取，并将这些技术应用到 Express.js 框架中。
XHR 数据获取
首先，我们介绍如何使用 XHR 对数据进行获取。
基本用法
XHR 最初用于 Ajax（Asynchronous JavaScript and XML）应用程序，后来演变为通用的异步 Web 请求工具。XHR 对象的基本用法如下：
-- -------------------- ---- -------
----- --- - --- -----------------
--------------- --------------
---------- - ---------- -
-- ----------- --- ---- -
----- ----- - -----------------------------
-------------------
- ---- -
-------------------- ------- -------- ------- - - ------------
-
--
-----------以上代码将发起一个 GET 请求，获取 /api/users 资源，并在响应成功后将响应的 JSON 数据解析为 JavaScript 对象并打印到控制台中。
使用 Promise
但是，如果我们需要处理多个 XHR 请求时，上面的代码就会变得很混乱：每个 XHR 的成功和失败处理可能都需要一些重复代码。我们可以使用 Promise 对象来更好地处理这些情况：
-- -------------------- ---- -------
-------- --------------- ---- ---- - ----- -
------ --- ------------------------- ------- -
----- --- - --- -----------------
---------------- -----
---------- - ---------- -
-- ----------- --- ---- -
--------------------------------------
- ---- -
------------------------------
-
--
----------- - ---------- -
--------------------- ---------
--
---------------
---
-
-------------- -------------
--------------------- -
-------------------
--
---------------------- -
-------------------
---这个函数 request(method, url, data = null) 可以实现任何 HTTP 方法，而且它返回一个 Promise，基本用法与前面一样。但是，现在我们可以使用 Promise.then 和 Promise.catch 方法来更方便地处理响应成功和失败的情况。
jQuery 数据获取
jQuery 是一个著名的前端类库，其中包含了很多有用的功能，包括可以方便地进行 Ajax 请求。在 jQuery 中，我们可以使用 $.ajax 函数的方式来进行请求。
-- -------------------- ---- -------
--------
---- -------------
------- ------
-------- --------------- -
-------------------
--
------ --------------- ----------- ------------ -
---------------------- - -- - - -------------
-
---这个函数会发起一个 GET 请求到 /api/users 路径。在响应成功时，我们将会得到一个参数 users ，该参数代表着返回的 JSON 数据。在出现任何错误的情况下，该请求将会失败且将会触发错误处理函数。
Express.js
现在我们将介绍如何在 Express.js 框架中使用 XHR 和 jQuery 进行数据获取。
我们假设有一个 GET 路由，该路由将在 /api/users 上返回 JSON 格式的用户数据。我们可以将路由定义为下面这个样子：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
--------------------- ------------- ---- -
----- ----- - -
---- -- ----- ---------
---- -- ----- ---------
---- -- ----- --------
--
----------------
---
---------------- ---------- -
---------------- --------- -- ---- --------
---上述代码会创建一个 Express.js 应用程序，该应用程序会监听 3000 端口。当 GET 请求到达 /api/users 时，我们将返回一个 JSON 数组 users，其中包含了三个用户的信息。
在前面我们已经介绍了如何使用 XHR 和 jQuery 进行 GET 请求，现在我们需要在请求中添加 /api/users 路径。以下是针对 XHR 的代码：
-- -------------------- ---- -------
----- --- - --- -----------------
--------------- --------------
---------- - ---------- -
-- ----------- --- ---- -
----- ----- - -----------------------------
-------------------
- ---- -
-------------------- ------- -------- ------- - - ------------
-
--
-----------以下是针对 jQuery 的代码：
-- -------------------- ---- -------
--------
---- -------------
------- ------
-------- --------------- -
-------------------
--
------ --------------- ----------- ------------ -
---------------------- - -- - - -------------
-
---这两个函数都将请求发送到我们在 Express.js 应用程序中的路由，并在成功时打印出响应数据。
总结：
Express.js 和 AJAX 技术的结合可以非常方便的进行数据的传输，并且也是现代 Web 开发中的重要内容之一。XHR 和 jQuery 都是非常常用的工具。本文详细的介绍了这两个工具如何进行数据获取的使用，还介绍了如何在 Express.js 框架中实现。希望本文能对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64816ea448841e98940e2c9d