Node之简单的前后端交互(实例讲解)
更新时间：2017年11月14日 08:53:34 作者：_wind
下面小编就为大家带来一篇Node之简单的前后端交互(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
node是前端必学的一门技能，我们都知道node是用的js做后端，在学习node之前我们有必要明白node是如何实现前后端交互的。
这里写了一个简单的通过原生ajax与node实现的一个交互，刚刚学node的朋友可以看一看。一方面理解服务端与客户端是如何交互的，一方面更熟悉node开发。
先贴代码：（有兴趣的可以copy到本地自己run一下）
主页面的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环境下输入命令：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 // 响应
客户端的js（功能就是负责一些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);
}
这个简单的交互就是这样的，其实我们在第一次学习后端语言的时候第一件事就是写一个前后端交互程序，这样会帮助我们更好的理解前后端的分工。
run方法：
先将server.js运行起来，然后打开html来请求响应。
以上这篇Node之简单的前后端交互(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
最近在用Node写一个实时聊天小应用,其中就用到了单元测试，所以死下面这篇文章主要给大家介绍了关于Node.js利用断言模块assert进行单元测试的方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-09-09
当我们使用脚手架去创建一个项目的时候，通常会通过命令行交互来获取一些信息，比如填项目名称，选择项目模板，选择版本，我们虽然经常用到，但是想必对于其中的原理还是不太了解，本文将待大家详细介绍一下node命令行的交互原理,需要的朋友可以参考下2023-05-05
Node.js中的process模块用来与当前进程互动，可以通过全局变量process访问，不必使用require命令加载。它是一个EventEmitter对象的实例。下面这篇文章给大家介绍了Node.js中process模块常用的属性和方法，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-12-12
这篇文章主要介绍了Nodejs极简入门教程（三）：进程,本文讲解了Node 进程间通信、cluster 模块等内容,需要的朋友可以参考下2014-10-10
nodejs16.15.0版本如何解决node-sass和sass-loader版本冲突问题
这篇文章主要介绍了nodejs16.15.0版本如何解决node-sass和sass-loader版本冲突问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
Node.js项目中调用JavaScript的EJS模板库的方法
这篇文章主要介绍了Node.js项目中调用JavaScript的EJS模板库的方法,通过EJS模板引擎可以制作出维护性良好的HTML代码结构,需要的朋友可以参考下2016-03-03
关于Node.js的events.EventEmitter用法介绍
本篇文章主要介绍了关于Node.js的events.EventEmitter用法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-04-04
Node.js是一个可以快速构建网络服务及应用的平台。该平台的构建是基于Chrome's JavaScript runtime，也就是说，实际上它是对Google V8引擎（应用于Google Chrome浏览器)进行了封装。 今天介绍Node.js调式目前有几种技术，需要的朋友可以参考下。2017-03-03
这篇文章主要介绍了使用NodeJs 开发微信公众号（三)微信事件交互实例的相关资料,需要的朋友可以参考下2016-03-03
本篇文章主要介绍了详解如何在NodeJS项目中优雅的使用ES6，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-04-04
最新评论