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. 日语编程语言"抚子" - 第三版特色初探

    原址: https://zhuanlan.zhihu.com/p/30800689 原文: 日语编程语言"抚子" - 第三版特色初探 它山之石可以攻玉. 学习其他的母语编程语言, ...

  2. MySQL 数据类型和约束(外键是重点🙄)

    数据类型 1. 数字(默认都是由符号,宽度表示的是显示宽度,与存储无关).tinyint 括号里指定宽度 七位2进制数最大数就是2**7 -1=127 最小是-128 验证: create tabel ...

  3. PHP使用ueditor上传配置

    引入 按照ueditor官网demo, 引入好ueditor之后, 默认是不能进行上传操作的 在上传时,在上传时会有如下图提示 配置上传 在editor/php目录下,有一个config.json文件 ...

  4. IOC的总结

    今天趁着空闲总结一下自己IOC的一些理解,希望可以帮助到有需要的人,请大牛们多多指教. (一)IOC IOC就是控制反转,给程序解耦等等,有很多博客都对它做了一些很好的讲解.在这里我也不说太多文字,直 ...

  5. 02-JAVA基础及面向对象（补充）

    引用数据类型 java中的数据类型可以分为 基本数据类型 和 引用数据类型 两大类 int float char boolean等都是基本数据类型 类类型都是引用数据类型 引用数据类型类似C语言中的指 ...

  6. UWP 手绘视频创作工具技术分享系列 - 手绘视频与视频的结合

    本篇作为技术分享系列的第三篇,详细讲一下手绘视频中结合视频的处理方式. 随着近几年短视频和直播行业的兴起,视频成为了人们表达情绪和交流的一种重要方式,人们对于视频的创作.编辑和分享有了更多的需求.而视 ...

  7. Head First设计模式之责任链模式

    一.定义 避免请求发送者与接收者耦合在一起,让多个对象都有可能接收请求,将这些对象连接成一条链,并且沿着这条链传递请求,直到有对象处理它为止. 主要解决:职责链上的处理者负责处理请求,客户只需要将请求 ...

  8. chromedriver与chrome版本映射列表

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

  9. vue2.0 页面A跳转到页面B，B页面停留在A页面的滚动位置的解决方法

    如果页面A沿Y轴滚动一段距离,然后跳转到页面B: 在进入B页面时,B页面已经滚到页面A的距离,返回页面A,发现A还在之前的滚动位置: 这样体验就很不好,所以我们要进行一些处理: 我的方法是:在路由守卫 ...

  10. iconfont-字体图标

    看到支付宝官网,使用很多iconfont-字体图标.素色,纯色,体积小,尝试使用做个demo,以便日后参考使用 ============================ <h1>第一个结构 ...