Ajax（Asynchronous JavaScript and XML）是一种用于在Web浏览器和Web服务器之间进行异步数据传输的技术。Node.js是一个基于Chrome V8引擎的JavaScript运行时，可以在服务器端运行JavaScript代码。本文主要介绍如何在前端使用基本的Ajax来发送/接收数据到Node.js服务器。
前置知识
- HTML、CSS、JavaScript基础知识
- Node.js环境的安装与配置
发送数据到Node.js服务器
创建XMLHttpRequest对象
在JavaScript中，可以使用XMLHttpRequest对象向服务器发送请求并从服务器接收响应。我们首先需要创建一个XMLHttpRequest对象：
var xhr = new XMLHttpRequest();
设置请求参数
在我们发送请求之前，需要设置请求的URL以及请求所使用的HTTP方法（GET或POST）：
var url = "http://localhost:3000/data";
xhr.open("POST", url, true);第三个参数表示该请求是否异步发送。将其设置为true表示异步发送，此时send()方法不会阻塞JavaScript代码的执行。
发送请求
接下来，我们可以通过send()方法将请求发送到服务器：
var data = {name: "张三", age: 20};
xhr.send(JSON.stringify(data));这里我们通过JSON.stringify()方法将一个JavaScript对象转换为JSON字符串，并将其作为请求体发送给Node.js服务器。
处理响应
当服务器响应完成后，我们可以通过onreadystatechange事件来处理响应：
-- -------------------- ---- -------
---------------------- - -------- -- -
-- --------------- --- --------- -
-- ----------- --- ---- -
--- -------- - -----------------------------
----------------------
- ---- -
----------------------
-
-
--这里我们首先判断readyState属性是否为DONE，表示请求已经完成。然后判断status属性是否为200，表示请求成功。如果成功，则将响应的JSON字符串转换为JavaScript对象，并在控制台输出。
接收数据到Node.js服务器
创建HTTP服务器
在Node.js中，我们可以使用http模块创建一个HTTP服务器，并监听指定端口的请求：
-- -------------------- ---- -------
--- ---- - ----------------
--- ------ - -------------------------- --------- --------- -
-- --------------- --- ------ -- ----------- --- -------- -
--- ---- - ---
------------------ -------- ------- -
---- -- ------
---
----------------- -------- -- -
--- ---- - -----------------
------------------
----------------------- ---------------- ---------------------
------------------------------------- -------------
---
- ---- -
------------------------
---------------
-
---
--------------------这里我们首先判断请求方法和URL是否正确，如果是则读取请求体并解析JSON数据。最后，我们以JSON格式回复客户端请求。
发送请求并接收响应
我们可以使用jQuery库中的$.ajax()方法来发送异步请求：
-- -------------------- ---- -------
--------
---- -----------------------------
----- -------
----- --------------------- ----- ---- -----
------------ -------------------
-------- -------- ---------- -
----------------------
--
------ -------- ----- ----------- ------------ -
----------------------
-
---这里我们首先设置请求的URL和HTTP方法，然后将数据转换为JSON格式并设置Content-Type头部。最后，我们可以使用success回调函数来处理服务器响应，并使用error回调函数来处理请求错误。
总结
通过本文，我们了解了如何在前端使用基本的Ajax技术来发送/接收数据到Node.js服务器。我们需要创建XMLHttpRequest对象、设置请求参数、发送请求以及处理响应。同时，在Node.js服务器端，我们需要创建HTTP服务器并监听指定端口的请求，并处理客户端发送的JSON数据。这些基本技
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15586