首页
所有分类
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 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
js实现网页收藏功能
Dec 17 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
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
InputStream(1) persistedstate(1) Set接口(1) axios(1) HashSet集合(1) 高动态范围(1) OutputStream(1) Vue(10) Vue3(1) vuex(1)
You might like
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
Python装饰器知识点补充
2018/05/28 Python
浅析Python3 pip换源问题
2020/01/06 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
Bally美国官网：经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
师生聚会感言
2014/01/26 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
亮化工程实施方案
2014/03/17 职场文书
中秋寄语大全
2014/04/11 职场文书
企业授权委托书范本
2014/09/22 职场文书
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL