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 相关文章推荐
简单三步,搞掂内存泄漏
Mar 10 Javascript
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
JS中==、===你分清楚了吗
Mar 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
php上传图片存入数据库示例分享
2014/03/11 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
详解js异步文件加载器
2016/01/24 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
Python中类的继承代码实例
2014/10/28 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
Python常用编译器原理及特点解析
2020/03/23 Python
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
工程概预算专业毕业生求职信
2013/10/04 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
德劲DE1102数字调谐收音机机评
2022/04/07 无线电