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之简单的前后端交互的更多相关文章
- 微信小程序 + thinkjs + mongoDB 实现简单的前后端交互
说明:这段时间跟老师学习了一下mongodb数据库,这次也是第一次搭建后台服务,出了不少差错,特此来复盘一下,非常感谢对我提供帮助的同学~ 一.使用 thinkjs + mongodb 创建后台服务 ...
- 基于node.js的websocket 前后端交互小功能
一.node var ws = require("nodejs-websocket"); console.log("开始建立连接...") var server ...
- Node.js实现前后端交互——用户注册
我之前写过一篇关于使用Node.js作为后端实现用户登陆的功能,现在再写一下node.js做后端实现简单的用户注册实例吧.另外需要说的是,上次有大佬提醒需要加密数据传输,不应该使用明文传输用户信息.在 ...
- nodejs实现前后端交互
本人nodejs入门级选手,站在巨人(文殊)的肩膀上学习了一些相关知识,有幸在项目中使用nodejs实现了前后端交互,因此,将整个交互过程记录下来,方便以后学习. 本文从宏观讲述nodejs实现前后端 ...
- web前后端交互，nodejs
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 web前后端交互 前后端交互可以采用混合 ...
- 三、vue前后端交互（轻松入门vue）
轻松入门vue系列 Vue前后端交互 六.Vue前后端交互 1. 前后端交互模式 2. Promise的相关概念和用法 Promise基本用法 then参数中的函数返回值 基于Promise处理多个A ...
- 百度ueditor的图片上传，前后端交互使用
百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor. ...
- 【开源.NET】 轻量级内容管理框架Grissom.CMS（第二篇前后端交互数据结构分析）
这是 CMS 框架系列文章的第二篇,第一篇开源了该框架的代码和简要介绍了框架的目的.作用和思想,这篇主要解析如何把sql 转成标准 xml 配置文件和把前端post的增删改数据规范成方便后台解析的结构 ...
- Servlet实现前后端交互的原理及过程解析
在日常调试项目时,总是利用tomcat去启动项目,并进行前后端联调,但对于前后端的请求响应的交互原理及过程并不是特别清晰. 为什么在前端发出相应请求,就能跳转到后端通过程序得到结果再响应到前端页面呢? ...
随机推荐
- Django学习日记06_视图_URLconf、View
URLconf Django通过URLconf来响应网页请求,在项目设置settings.py中,设定了ROOT_URLCONF值来指定默认的URLconf(即mysite.urls),当HTTPRe ...
- 【转】完美解读Linux中文件系统的目录结构
一.前 言 接触Linux也有一段时间了,不过这几天在编译开源程序时,才发现自己对linux文件系统的目录结构了解的不够透彻,很多重要目录都说不清楚是用来干嘛的,于是在网上百度了一下这方面的介绍,根据 ...
- ssh的action校验内容输出
当form里为input类型时,如<input type="text" name="manager.name" />,则在对应的jsp中要使用< ...
- rsyslogd以及日志轮替logrotate的梳理
rsyslog 1)日志类型 auth :(authpriv) 主要与认证有关的机制,例如 login, ssh, su 等需要帐号/密码的咚咚: cron: 就是例行性工作排程 cron/at 等产 ...
- swift中的AnyHashable
AnyHashable是调和objc和Swift的产物 典型的场景是,objc下无泛型的NSDictionary到了Swift下,会变成什么?(典型例子是苹果来的推送消息) [Any: Any],这肯 ...
- wifipineapple插件：codeInject的使用
如果在中间人攻击的时候, 能在用户的网页中插入任意代码, 可以说已经完成一半了 wifipineapple有个codeInject插件, 可以让连上这个网络所有设备浏览网页的时候, 在网页中插入任意h ...
- 【读书笔记】【深入理解ES6】#4-扩展对象的功能性
对象类别 ES6规范清晰定义了每一个类别的对象. 普通(Ordinary)对象 具有JS对象所有的默认内部行为 特异(Exotic)对象 具有某些与默认行为不符的内部行为 标准(Standard)对象 ...
- MongoDB批量导入及简单的性能优化
今天简单分享一下MongoDB使用过程中的一些性能优化,其实并不只适用MongoDB,其他数据库多少也可适用. 首先先随机导入一千万条数据.这里我分段导入的,因为mongo的BsonDocument一 ...
- Spring+SpringMVC+MyBatis+easyUI整合基础篇
基础篇 Spring+SpringMVC+MyBatis+easyUI整合基础篇(一)项目简介 Spring+SpringMVC+MyBatis+easyUI整合基础篇(二)牛刀小试 Spring+S ...
- ThreadPoolExecutor的分析(二)
说明:本作者是文章的原创作者,转载请注明出处:本文地址:http://www.cnblogs.com/qm-article/p/7859620.html 内部类Worker的分析 从源码可知.该内部类 ...