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 相关文章推荐
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
BootStrap的双日历时间控件使用
Jul 25 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
Windows下的PHP5.0详解
2006/11/18 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
vue cli 全面解析
2018/02/28 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
Python读取网页内容的方法
2015/07/30 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
python绘制规则网络图形实例
2019/12/09 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
校班主任推荐信范文
2013/12/03 职场文书
欢迎家长标语
2014/10/08 职场文书
借条如何写
2015/05/26 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers