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. 关于HTTP协议头域详解

    HTTP1.1 请求头:消息头  Accept:text/html,image/*  告诉服务器,客户机支持的数据类型 Accept-Charset:ISO-8859-1  告诉服务器,客户机采用的编 ...

  2. 快速恢复开发环境（系统还原后的思考，附上eclipse注释的xml配置文件）

    1.Eclipse/Myeclipse的工作空间,不能放在系统盘 除非你的项目都有实时的云同步或SVN等,才能放在系统固态盘,不然你享受快速启动项目的同时,也需要承担系统奔溃后找不回项目的风险: 公司 ...

  3. ZJOI 2015 诸神眷顾的幻想乡

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

  4. MacOS 安装 Jenkins

    jenkins 官网安装教程:https://jenkins.io/doc/ 参考博文:http://blog.csdn.net/taishanduba/article/details/5045260 ...

  5. [js高手之路] vue系列教程 - 绑定class与行间样式style(6)

    一.绑定class属性的方式 1.通过数组的方式,为元素绑定多个class <style> .red { color:red; /*color:#ff8800;*/ } .bg { bac ...

  6. canvas 简易的加载进度条

    做一个web app,想在第一次或者更新的时候,有一个更新进度条,我个人比较喜欢圆的那种. canvas + svg高低配,应该还不错的.顺便一提,canvas用来压缩图片也是么么哒的. 先看下效果图 ...

  7. 常用base.css

    ul { list-style: none;}a { text-decoration: none;} body,h1,h2,h3,h4,h5,h6,p,ul,ol,form { margin: 0; ...

  8. Python import其他层级的模块

    [前言] Python的文件目录结构虽然层次清晰,结构清楚,但是在调用的时候可能还是出现各式各样的找不到路径的错误. [模块导入] 1.导入上一级目录的模块 python中导入上一级目录的模块有两种方 ...

  9. 使用腾讯云无服务器云函数（SCF）分析天气数据

    欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者:李想 无服务器云函数(SCF)是腾讯云提供的Serverless执行环境,也是国内首款FaaS(Function as a Service ...

  10. KandQ：那年，那树，那些知识点

    写在前面:  对于数据结构的学习,注定绕不开"树"这一起着重要作用的数据结构."树"在整个数据结构的学习过程中具有举足轻重的地位,而与"树" ...