Node之简单的前后端交互(实例讲解)

node是前端必学的一门技能，我们都知道node是用的js做后端，在学习node之前我们有必要明白node是如何实现前后端交互的。

这里写了一个简单的通过原生ajax与node实现的一个交互，刚刚学node的朋友可以看一看。一方面理解服务端与客户端是如何交互的，一方面更熟悉node开发。

先贴代码：（有兴趣的可以copy到本地自己run一下）

主页面的html

index.html：

接下来是服务器端的代码，运行方式是在node环境下输入命令：node server.js

server.js：

server.listen(3000);

引入的qs模块用于解析JSON

req.on('data',callback); // 监听客户端的数据，一旦有数据发送过来就执行回调函数

req.on('end',callback); // 数据接收完毕

res // 响应

客户端的js（功能就是负责一些DOM操作以及发送ajax请求）

client.js：

btn1.addEventListener('click',function() {
ajax('POST',"http://127.0.0.1:3000/",'name='+this.innerHTML);
});

btn2.addEventListener('click','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,true);
if(val)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(val);
}

这个简单的交互就是这样的，其实我们在第一次学习后端语言的时候第一件事就是写一个前后端交互程序，这样会帮助我们更好的理解前后端的分工。

run方法：

先将server.js运行起来，然后打开html来请求响应。

以上这篇Node之简单的前后端交互(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/nodejs/35227.html