本文通过Node.js原生HTTP模块与原生Ajax技术，演示了简单的前后端数据交互流程。文章提供了完整的HTML、Node.js服务端代码及客户端JS代码，详细解析了数据接收、JSON解析及响应发送的关键步骤，帮助初学者理解前后端分工与通信机制。
Node.js前后端交互基础
Node.js是前端开发者必须掌握的技术之一。由于Node.js允许使用JavaScript编写后端代码，因此在学习Node.js之前，理解其如何实现前后端数据交互至关重要。
本文展示了一个基于原生Ajax与Node.js实现的简单交互示例，适合刚接触Node.js的开发者参考。通过该示例，读者可以深入理解服务端与客户端的交互逻辑，并熟悉Node.js的开发流程。
以下是相关代码，感兴趣的朋友可以将代码复制到本地环境中运行测试。
前端HTML结构实现
主页面的HTML结构如下：
index.html文件内容：
<!doctype>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn1">food</button>
<button id="btn2">other</button>
<h1 id="content"></h1>
<script type="text/javascript" src="./client.js"></script>
</body>
</html>Node.js服务端代码解析
接下来是服务器端的代码。在Node.js环境下，通过执行命令 node server.js 即可启动服务器。
server.js文件内容：
let http = require('http');
let qs = require('querystring');
let server = http.createServer(function(req, res) {
let body = ''; // 一定要初始化为"" 不然是undefined
req.on('data', function(data) {
body += data; // 所接受的Json数据
});
req.on('end', function() {
res.writeHead(200, { // 响应状态
"Content-Type": "text/plain", // 响应数据类型
'Access-Control-Allow-Origin': '*' // 允许任何一个域名访问
});
if(qs.parse(body).name == 'food') {
res.write('apple');
} else {
res.write('other');
}
res.end();
});
});
server.listen(3000);代码中引入的qs模块主要用于解析JSON格式的数据。
req.on('data', callback); 用于监听客户端发送的数据，一旦接收到数据便执行相应的回调函数。
req.on('end', callback); 表示数据接收过程结束。
res 对象用于处理服务器对客户端的响应。
客户端Ajax请求封装
客户端JavaScript代码主要负责DOM操作以及发送Ajax请求，具体实现如下：
client.js文件内容：
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
let content = document.getElementById('content');
btn1.addEventListener('click', function() {
ajax('POST', "http://127.0.0.1:3000/", 'name='+this.innerHTML);
});
btn2.addEventListener('click', function() {
ajax('POST', "http://127.0.0.1:3000/", 'name='+this.innerHTML);
});
// 封装的ajax方法
function ajax(method, url, val) { // 方法，路径，传送数据
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
content.innerHTML = xhr.responseText;
} else {
alert('Request was unsuccessful: ' + xhr.status);
}
}
};
xhr.open(method, url, true);
if(val)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(val);
}这个简单的交互示例展示了前后端协作的基本模式。对于初次学习后端语言的开发者而言，编写此类前后端交互程序有助于更好地理解前后端的职责划分。
运行与测试指南
运行方法说明：
首先启动server.js服务，随后打开HTML页面即可发起请求并获取响应。
以上关于Node.js简单前后端交互的实例讲解到此结束，希望能为各位读者提供参考，并欢迎大家继续支持本站。