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去启动项目,并进行前后端联调,但对于前后端的请求响应的交互原理及过程并不是特别清晰. 为什么在前端发出相应请求,就能跳转到后端通过程序得到结果再响应到前端页面呢? ...
随机推荐
- 3、公司开会的必要性 - CEO之公司管理经验谈
这几天在考虑开公司的问题.以前也有想过开公司创业,但是由于资金和团队问题搁置了.今天在网上看到了一篇文“[转]微软是这么管理员工的!你一定向往!”,想起以前在其它公司时开的一些会议的问题,就写了此文, ...
- thinkphp 3.1.3 redis 只能读取 无法写入的问题
找到thinkphp的目录 thinkphp\Extend\Driver\Cache 下面的Redis 大概在81行足有 // if(is_int($expire)) { // redis ...
- python 多进程开发与多线程开发
转自: http://tchuairen.blog.51cto.com/3848118/1720965 博文作者参考的博文: 博文1 博文2 我们先来了解什么是进程? 程序并不能单独运行,只有将程 ...
- CSS 鼠标样式大全
cursor是CSS中用于定义鼠标在元素标签上的显示样式,如常用的手型鼠标样式 cursor: pointer; 也可以通过url网址指定扩展名一般为.cur的鼠标图片文件. 名称 属性代码 描述 默 ...
- shell中的循环语句while
循环语句的结构: ------------| while 条件 | do | 需要执行的命令 | done | -----------| 例如: 1.while一直循环 2.whi ...
- vs2008中xlslib与libxls库的编译及使用
C++用来操作Excel的方法很多,但是涉及到跨平台,同时又要对Excel的读写操作兼顾,而且免费的库,那应该是要用xlslib和libxls了.由于技术比较菜,折腾这个折腾了一个星期了.最开始是使用 ...
- 错误:'dict' object is not callable
在晚上学习别人的代码,偶然爆出错误:'dict' object is not callable 找了半天没发现错误.后来还想上文已经有变量名为dict. 因此dict在下面程序中被认为是一个变量不是内 ...
- [译]Python面试中8个必考问题
1.下面这段代码的输出结果是什么?请解释. def extendList(val, list=[]): list.append(val) return list list1 = extendList( ...
- cyclictest 简介
1. cyclictest 简介以及安装 1.1 cyclictest 简介 cyclictest 是什么? 看名字应该就能大致猜出来它是一种 test 程序,Cyclictest的维基主页这么介绍它 ...
- Zabbix实战-简易教程--技巧一（操作类技巧）
一.常用操作技巧 1.克隆 监控项.模板.触发器都可以进行克隆.其中,模板克隆又分为克隆和完全克隆.完全克隆会将LLD也一起复制一份,就是和之前的模板一模一样,而模板的克隆只是克隆监控项,不复制低层次 ...