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对象与JSON格式数据相互转换
Feb 20 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
在VUE style中使用data中的变量的方法
Jun 19 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 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 读取文件乱码问题
2010/02/20 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
PHP中的use关键字概述
2014/07/23 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
XML的代替者----JSON
2007/07/21 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
微信小程序select下拉框实现效果
2019/05/15 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
Python中断言Assertion的一些改进方案
2016/10/27 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
局域网标准
2016/09/10 面试题
冰淇淋开店创业计划书
2014/02/01 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
学校学期工作总结
2015/08/13 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android