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. windows 运行banana

    1 git clone 工程 2 安装 npm 3 执行 npm install -g bower

  2. （转）top关键字与top表达式（SQLServer）

    SQLServer 中,top也很有用,例如查询部分数据,还可以用表达式.其语法如下: SELECT TOP number|percent column_name(s) FROM table_name ...

  3. python的defaultdict

    defaultdict是dict的一个子类,接受一个工厂函数作为参数,当访问defaultdict中不存在的key时,会将工厂函数的返回值作为默认的value. class defaultdict(d ...

  4. [Spark内核] 第33课：Spark Executor内幕彻底解密：Executor工作原理图、ExecutorBackend注册源码解密、Executor实例化内幕、Executor具体工作内幕

    本課主題 Spark Executor 工作原理图 ExecutorBackend 注册源码鉴赏和 Executor 实例化内幕 Executor 具体是如何工作的 [引言部份:你希望读者看完这篇博客 ...

  5. Jquery ajax异步传值的两个实用的方法，你看后肯定会用第二个

    故名思议,你是个asp.net  或者是搞PHP的或者 是javaweb的 ,但是为了提高界面的效率,你必须会实用jquery的ajax,当然,在ajax异步传值的时候很头疼的一件事情就是,拼接字符串 ...

  6. RESTful 的总结

    1.什么是RESTful? REST,即Representational State Transfer的缩写."(资源的)表现层状态转化". 2.什么是表现层? "资源& ...

  7. 【数论·欧拉函数】SDOI2008仪仗队

    题目描述 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是否整齐(如右图 ...

  8. python py2与py3的编码问题

    一:什么是编码 将明文转换为计算机可以识别的编码文本称为"编码".反之从计算机可识别的编码文本转回为明文为"解码". 那么什么是明文呢,首先我们从一段信息说起, ...

  9. 【转载】MySQL5.6.27 Release Note解读（innodb及复制模块）

    新功能   问题描述(Bug #18871046, Bug #72811): 主要为了解决一个比较“古老”的MySQL在NUMA架构下的“swap insanity”问题,其表现为尽管为InnoDB ...

  10. iOS学习——Xcode9上传项目到GitHub

    最近通过视频在学习一个完整项目的开发流程和思路,为了更真实地模拟在实际开发中的流程,我们需要将项目的代码以及一些资料进行版本控制和管理,一般比较常用的SVN或者Github进行代码版本控制和项目管理. ...