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获取单选按钮的数据
Nov 27 Javascript
js不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
理解jquery事件冒泡
Jan 03 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
vue v-for 使用问题整理小结
Aug 04 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
JavaScript 数据类型详解
2017/03/13 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
Python sqlite3事务处理方法实例分析
2017/06/19 Python
python创造虚拟环境方法总结
2019/03/04 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
新闻专业毕业生英文求职信
2014/03/19 职场文书
学生个人自我鉴定
2014/03/26 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
2014年绿化工作总结
2014/12/09 职场文书
教师节感谢信
2015/01/22 职场文书
同学聚会邀请函
2015/01/30 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
高中开学感言
2015/08/01 职场文书
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL