Node之简单的前后端交互(实例讲解)


Posted in Javascript onNovember 14, 2017

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之简单的前后端交互(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
禁止拷贝网页内容的js代码
Jan 22 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
javascript设计模式之迭代器模式
Jan 30 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 #Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 #Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 #Javascript
js实现数组内数据的上移和下移的实例
Nov 14 #Javascript
vue router使用query和params传参的使用和区别
Nov 13 #Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 #Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 #jQuery
You might like
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
js和as的稳定传值问题解决
2013/07/14 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
JavaScript如何操作css
2020/10/24 Javascript
详解Django中Request对象的相关用法
2015/07/17 Python
Python多层装饰器用法实例分析
2018/02/09 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
2014年党员自我评议(5篇)
2014/09/12 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
事业单位个人总结
2015/02/12 职场文书
八年级历史教学反思
2016/02/19 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
mysql脏页是什么
2021/07/26 MySQL
vue elementUI批量上传文件
2022/04/26 Vue.js