首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生node.js案例--前后台交互

Posted in Javascript onFebruary 20, 2017

本案例包含4部分：（1）HTML部分；（2）ajax部分；（3）JavaScript部分；（4）node服务器部分。另外，因为牵涉到服务器，所以这里没法“效果预览”。

执行过程为：

（1）在浏览器地址栏输入网址，向node服务器发送HTML请求；服务器接到请求后，返回一个HTML文件给客户端；

（2）客户端浏览器对HTML进行渲染，遇到<script>标签后，再次向服务器请求，服务器响应一个JavaScript文件给客户端，

（3）客户端浏览器对JavaScript文件进行渲染，渲染过程中，如果遇到ajax请求，客户端还会向服务器进行请求，服务器仍然会响应浏览器。

（4）最后，浏览器把渲染好的网页呈现在浏览者面前。

1、HTML部分：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>客户管理系统</title>
</head>
<body>
<div class="box">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="link">NEW CUSTOMER</a>
 <h2>
  <span class="fir">ID</span>
  <span>NAME</span>
  <span class="fir">AGE</span>
  <span>PHONE</span>
  <span>ADDRESS</span>
  <span>CONTROL</span>
 </h2>
 <ul id="conList">
  <li>
   <span class="fir">1</span>
   <span>钱成</span>
   <span class="fir">25</span>
   <span>13044086186</span>
   <span>Bei Jing</span>
   <span class="control">
    <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>
    <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a>
   </span>
  </li>
 </ul>
</div>
<script charset="utf-8" type="text/javascript" src="js/ajax.js"></script>
<script charset="utf-8" type="text/javascript" src="js/index.js"></script>
</body>
</html>

2、ajax部分：

~function () {
 //->createXHR:创建AJAX对象,兼容所有的浏览器
 function createXHR() {
  var xhr = null,
   flag = false,
   ary = [
    function () {
     return new XMLHttpRequest;
    },
    function () {
     return new ActiveXObject("Microsoft.XMLHTTP");
    },
    function () {
     return new ActiveXObject("Msxml2.XMLHTTP");
    },
    function () {
     return new ActiveXObject("Msxml3.XMLHTTP");
    }
   ];
  for (var i = 0, len = ary.length; i < len; i++) {
   var curFn = ary[i];
   try {
    xhr = curFn();
    createXHR = curFn;
    flag = true;
    break;
   } catch (e) {
   }
  }
  if (!flag) {
   throw new Error("your browser is not support ajax,please change your browser,try again!");
  }
  return xhr;
 }
 //->ajax:实现AJAX请求的公共方法;
 function ajax(options) {
  var _default = {
   url: "",
   type: "get",
   dataType: "json",
   async: true,
   data: null,
   getHead: null,
   success: null
  };
  for (var key in options) {
   if (options.hasOwnProperty(key)) {
    _default[key] = options[key];
   }
  }
  if (_default.type === "get") {
   _default.url.indexOf("?") >= 0 ? _default.url += "&" : _default.url += "?";
   _default.url += "_=" + Math.random();
  }
  //->SEND AJAX
  var xhr = createXHR();
  xhr.open(_default.type, _default.url, _default.async);
  xhr.onreadystatechange = function () {
   if (/^2\d{2}$/.test(xhr.status)) {
    if (xhr.readyState === 2) {
     if (typeof _default.getHead === "function") {
      _default.getHead.call(xhr);
     }
    }
    if (xhr.readyState === 4) {
     var val = xhr.responseText;
     if (_default.dataType === "json") {
      val = "JSON" in window ? JSON.parse(val) : eval("(" + val + ")");
     }
     _default.success && _default.success.call(xhr, val);
    }
   }
  };
  xhr.send(_default.data);
 }
 window.ajax = ajax;
}();

3、JavaScript部分：

var customer = (function () {
 var conList = document.getElementById('conList');
 function bindEvent() {
  conList.onclick = function (ev) {
   ev = ev || window.event;
   var tar = ev.target || ev.srcElement,
    tarTag = tar.tagName.toUpperCase(),
    tarInn = tar.innerHTML;
   if (tarTag === 'A' && tarInn === '删除') {
    //->ALERT、CONFIRM、PROMPT
    var cusId = tar.getAttribute('data-id'),
     flag = window.confirm('确定要删除编号为 [ ' + cusId + ' ] 的客户吗?');
    if (flag) {//->点击的是确定按钮:调取对应的API接口实现删除即可
     ajax({
      url: '/removeInfo?id=' + cusId,
      cache: false,
      success: function (result) {
       if (result && result.code == 0) {
        //->删除成功后在HTML结构中移除对应的LI标签
        conList.removeChild(tar.parentNode.parentNode);
       }
      }
     });
    }
   }
  }
 }
 function bindHTML(data) {
  var str = '';
  for (var i = 0; i < data.length; i++) {
   var cur = data[i];
   str += '<li>';
   str += '<span class="fir">' + cur.id + '</span>';
   str += '<span>' + cur.name + '</span>';
   str += '<span class="fir">' + cur.age + '</span>';
   str += '<span>' + cur.phone + '</span>';
   str += '<span>' + cur.address + '</span>';
   str += '<span class="control">';
   str += '<a href="add.html?id=' + cur.id + '" rel="external nofollow" >修改</a>';
   str += '<a href="javascript:;" rel="external nofollow" data-id="' + cur.id + '">删除</a>';
   str += '</span>';
   str += '</li>';
  }
  conList.innerHTML = str;
 }
 return {
  init: function () {
   ajax({
    url: '/getAllList',
    type: 'GET',
    dataType: 'JSON',
    cache: false,
    success: function (result) {
     if (result && result.code == 0) {
      bindHTML(result.data);
      bindEvent();
     }
    }
   });
  }
 }
})();
customer.init();

4、node服务器部分：

var http = require("http");
var url = require("url");
var fs = require("fs");
var server1 = http.createServer(function (request, response) {
 var urlObj = url.parse(request.url, true);
 var pathname = urlObj.pathname;
 var query = urlObj.query;
 var reg = /\.(HTML|CSS|JS|ICO)/i;
 if (reg.test(pathname)) {
  var suffix = reg.exec(pathname)[1].toUpperCase();
  var suffixMIME = suffix === 'HTML' ? 'text/html' : (suffix === 'CSS' ? 'text/css' : 'text/javascript');
  try {
   var conFile = fs.readFileSync('.' + pathname, 'utf-8');
   response.writeHead(200, {'content-type': suffixMIME + ';charset=utf-8;'});
   response.end(conFile);
   //以conFile结束向客户端的响应，即给客户端返回./index.html的全部代码，供客户端渲染成页面。
  } catch (e) {
   response.writeHead(404, {'content-type': 'text/plain;charset=utf-8;'});
   response.end('request file is not found!');
  }
  return;
 }
 //->数据API请求处理:客户端的JS代码中我们通过AJAX向服务器发送的请求,服务器接收到请求并且
 // 获取客户端传递的数据,把需要的数据内容准备好,然后在返回给客户端,客户端在AJAX的READY
 // STATE等于4的时候获取返回的内容(都是按照API的规范文档来处理)
 var customData = fs.readFileSync('./json/custom.json', 'utf-8');
 customData.length === 0 ? customData = '[]' : null;
 customData = JSON.parse(customData);
 var result = {
  code: 1,
  msg: '失败',
  data: null
 };
 var customId = null;
 //1)获取所有的客户信息
 if (pathname === '/getAllList') {
  if (customData.length > 0) {
   result = {
    code: 0,
    msg: '成功',
    data: customData
   };
  }
  response.writeHead(200, {'content-type': 'application/json;charset=utf-8;'});
  response.end(JSON.stringify(result));
  return;
 }
 //2)获取指定的客户信息
 if (pathname === '/getInfo') {
  customId = query['id'];
  customData.forEach(function (item, index) {
   if (item['id'] == customId) {
    result = {
     code: 0,
     msg: '成功',
     data: item
    };
   }
  });
  response.writeHead(200, {'content-type': 'application/json;charset=utf-8;'});
  response.end(JSON.stringify(result));
  return;
 }
 //3)增加客户信息
 if (pathname === '/addInfo') {
  var str = '';
  request.on('data', function (chunk) {
   str += chunk;
  });
  request.on('end', function () {
   var data = JSON.parse(str);
   data['id'] = customData.length === 0 ? 1 : parseFloat(customData[customData.length - 1]['id']) + 1;
   customData.push(data);
   fs.writeFileSync('./json/custom.json', JSON.stringify(customData), 'utf-8');
   result = {
    code: 0,
    msg: '成功'
   };
   response.writeHead(200, {'content-type': 'application/json;charset=utf-8;'});
   response.end(JSON.stringify(result));
  });
  return;
 }
 //4)修改客户信息
 if (pathname === '/updateInfo') {
  str = '';
  request.on('data', function (chunk) {
   str += chunk;
  });
  request.on('end', function () {
   var data = JSON.parse(str),
    flag = false;
   for (var i = 0; i < customData.length; i++) {
    if (data['id'] == customData[i]['id']) {
     customData[i] = data;
     flag = true;
     break;
    }
   }
   if (flag) {
    fs.writeFileSync('./json/custom.json', JSON.stringify(customData), 'utf-8');
    result = {
     code: 0,
     msg: '成功'
    };
   }
   response.writeHead(200, {'content-type': 'application/json;charset=utf-8;'});
   response.end(JSON.stringify(result));
  });
  return;
 }
 //5)删除客户信息
 if (pathname === '/removeInfo') {
  customId = query['id'];
  var flag = false;
  customData.forEach(function (item, index) {
   if (item['id'] == customId) {
    customData.splice(index, 1);
    flag = true;
   }
  });
  if (flag) {
   fs.writeFileSync('./json/custom.json', JSON.stringify(customData), 'utf-8');
   result = {
    code: 0,
    msg: '成功'
   };
  }
  response.writeHead(200, {'content-type': 'application/json;charset=utf-8;'});
  response.end(JSON.stringify(result));
  return;
 }
 response.writeHead(404, {'content-type': 'text/plain;charset=utf-8;'});
 response.end('request url is not found!');
});
server1.listen(80, function () {
 console.log("server is success,listening on 80 port!");
});

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

原生node.js案例--前后台交互

- Author -

前端工程师_钱成

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
仿jQuery的siblings效果的js代码
Aug 09 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
浅谈angular.copy() 深拷贝
Sep 14 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 Javascript
jQuery实现单击按钮遮罩弹出对话框效果（1）
Feb 20 #Javascript
jQuery实现链接的title快速出现的方法
Feb 20 #Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 #Javascript
原生JS实现《别踩白块》游戏（兼容IE）
Feb 20 #Javascript
javascript基础练习之翻转字符串与回文
Feb 20 #Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 #Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 #Javascript
铁拳(1) 东方异文石(1) 模拟人生(1) 遗弃(1) 吸血鬼(1) 战锤40K(1) 绿林侠盗(1) LOL(1) 小缇娜的奇幻之地(1) 大话西游(1)
You might like
hadoop常见错误以及处理方法详解
2013/06/19 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
常用PHP封装分页工具类
2017/01/14 PHP
Javascript this指针
2009/07/30 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
Python的time模块中的常用方法整理
2015/06/18 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
Python找出最小的K个数实例代码
2018/01/04 Python
python将图片转base64,实现前端显示
2020/01/09 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
jupyter notebook 多行输出实例
2020/04/09 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
大学生求职推荐信
2013/11/27 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
开展警示教育活动总结
2015/05/09 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
公司备用金管理制度
2015/08/04 职场文书
2019最新版火锅店的创业计划书 ！
2019/07/12 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python