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 相关文章推荐
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
JS中的const命令你真懂它吗
Mar 08 Javascript
vue实现简单的登录弹出框
Oct 26 Javascript
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
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
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
php学习之function的用法
2012/07/14 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
22点关于jquery性能优化的建议
2014/05/28 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Python字符串三种格式化输出
2020/09/17 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
食品行业求职人的自我评价
2014/01/19 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
学校宣传标语
2014/06/18 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技
Python采集壁纸并实现炫轮播
2022/04/30 Python