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之简单的前后端交互的更多相关文章

  1. 微信小程序 + thinkjs + mongoDB 实现简单的前后端交互

    说明:这段时间跟老师学习了一下mongodb数据库,这次也是第一次搭建后台服务,出了不少差错,特此来复盘一下,非常感谢对我提供帮助的同学~ 一.使用 thinkjs + mongodb 创建后台服务 ...

  2. 基于node.js的websocket 前后端交互小功能

    一.node var ws = require("nodejs-websocket"); console.log("开始建立连接...") var server ...

  3. Node.js实现前后端交互——用户注册

    我之前写过一篇关于使用Node.js作为后端实现用户登陆的功能,现在再写一下node.js做后端实现简单的用户注册实例吧.另外需要说的是,上次有大佬提醒需要加密数据传输,不应该使用明文传输用户信息.在 ...

  4. nodejs实现前后端交互

    本人nodejs入门级选手,站在巨人(文殊)的肩膀上学习了一些相关知识,有幸在项目中使用nodejs实现了前后端交互,因此,将整个交互过程记录下来,方便以后学习. 本文从宏观讲述nodejs实现前后端 ...

  5. web前后端交互，nodejs

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 web前后端交互 前后端交互可以采用混合 ...

  6. 三、vue前后端交互（轻松入门vue）

    轻松入门vue系列 Vue前后端交互 六.Vue前后端交互 1. 前后端交互模式 2. Promise的相关概念和用法 Promise基本用法 then参数中的函数返回值 基于Promise处理多个A ...

  7. 百度ueditor的图片上传，前后端交互使用

    百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor. ...

  8. 【开源.NET】 轻量级内容管理框架Grissom.CMS（第二篇前后端交互数据结构分析）

    这是 CMS 框架系列文章的第二篇,第一篇开源了该框架的代码和简要介绍了框架的目的.作用和思想,这篇主要解析如何把sql 转成标准 xml 配置文件和把前端post的增删改数据规范成方便后台解析的结构 ...

  9. Servlet实现前后端交互的原理及过程解析

    在日常调试项目时,总是利用tomcat去启动项目,并进行前后端联调,但对于前后端的请求响应的交互原理及过程并不是特别清晰. 为什么在前端发出相应请求,就能跳转到后端通过程序得到结果再响应到前端页面呢? ...

随机推荐

  1. IE8下实现兼容rgba

    昨天遇到一个问题,要实现一个背景透明的效果,用CSS3用rgba()就能实现,即 background: rgba(0,0,0,.5); 但是要兼容到IE8,就发现没有透明效果,因为IE8不支持rgb ...

  2. CSS图片翻转动画技术详解

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...

  3. jquery学习总结（超级详细）

    本文仅针对jquery的部分知识点做总结,更为全面的可以去官网看中文文档.可以更为详细的了解jquery及其特性.       window.onload $(document).ready() 执行 ...

  4. Xamarin.android Activity动画切换效果实现

    http://blog.csdn.net/esunshine1985/article/details/44302903 1.在Resources--values下新建styles.xml,添加内容如下 ...

  5. MySQL一对一:一对多:多对多: 实例!!!!

    学生表和课程表可以多对多 一个学生可以学多门课程 一门课程可以有多个学生: 多对多 *** 一个学生对应一个班级 一个班级对应多个学生: 一对多 *** 一个老师对应多个学生 多个学生对应一个老师:一 ...

  6. Django学习日记04_模板_overview

    通过Django中的模板,使得设计人员和网站管理有一个对接的接口,实现网页设计和逻辑的分离,因此,模板会处理大量的文本解析内容,django中内部使用了高效的引擎来完成模板解析. 模板设置 在使用模板 ...

  7. linux上查找文件存放地点和文件中查找字符串方法

    一.查找文件存放地点 1.locate 语法:locate <filename> locate命令实际是"find -name"的另一种写法,但是查找方式跟find不同 ...

  8. 阿里mysql同步工具otter的docker镜像

    https://github.com/dearplain/otter_manager https://github.com/dearplain/otter_node 本人开发的小巧docker镜像,根 ...

  9. AI时代：推荐引擎正在塑造人类

    We shape our tools and afterwards our tools shape us. ------Marshall McLuhan 麦克卢汉说:"我们塑造了工具,反过来 ...

  10. centos perl: symbol lookup error: /usr/local/lib64/perl5/auto/DBD/mysql/mysql.so: undefined symbol: mysql_init

    之前在安装天兔数据库监控工具lepus的时候,运行时一直报perl: symbol lookup error: /usr/local/lib64/perl5/auto/DBD/mysql/mysql. ...