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. ZJOI 2015 诸神眷顾的幻想乡

    题目描述 幽香是全幻想乡里最受人欢迎的萌妹子,这天,是幽香的2600岁生日,无数幽香的粉丝到了幽香家门前的太阳花田上来为幽香庆祝生日. 粉丝们非常热情,自发组织表演了一系列节目给幽香看.幽香当然也非常 ...

  2. 前端之 HTML🎃

    HTML这知识点很多很杂,所以整理很乱.所以将就看.

  3. 前端学习_04_font-awesome字体图标

    使用font-awesome字体图标库 font-awesome是一个比较大的矢量图标库,包含大部分IT类公司logo和常用的一些小图标,通过使用font-awesome提供的css样式集,可以在网页 ...

  4. Ruby学习之对象模型

    这两周工作内容较多,平时自己也有点不在状态,学的东西有点少了,趁着现在还有点状态,赶紧复习一下之前学习的Ruby吧. Ruby是我真正开始接触动态语言魅力的第一个语言,之前虽然也用过且一直用perl. ...

  5. ABP架构学习系列三：手工搭建ABP框架

    由于公司的项目才接触到ABP这个框架,当时就觉得高大上,什么IOC.AOP.ddd各种专业词汇让人激情 澎湃,但在使用过程中碰到了许多坑,可能也许是没有去看源码导致的,但工作确实没有那么多时间让人去慢 ...

  6. 使用nginx 的反向代理 给 kibana加上basic的身份认证

    第一步准备工作 准备用户名密码: 更改host文件 第二步,安装nginx ubuntu安装Nginx之后的文件结构大致为:所有的配置文件都在/etc/nginx下,并且每个虚拟主机已经安排在了/et ...

  7. chromedriver与chrome版本映射列表

    chromedriver与chrome版本映射列表: chromedriver版本 支持的Chrome版本 v2.30 v58-60 v2.29 v56-58 v2.28 v55-57 v2.27 v ...

  8. python词云的制作方法

    第一次接触到词云主要是觉得很好看,就研究了一下,官方给出了代码的,但是新手看的话还是有点不容易,我们来尝试下吧. 环境:python2.7 python库:PIL(pillow),numpy,matp ...

  9. [js高手之路]html5 canvas动画教程 - 边界判断与反弹

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹: 当小球碰到canvas的四个方向的 ...

  10. gitlab markdown支持页面内跳转

    markdown语法: [to_be_link](#id_name) 标题: ## 2.aaa <a name="id_name"></a> 参考: htt ...