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

2024-10-12 17:31:00

本案例包含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!");
});

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

实现前后端数据交互方法汇总

此文章适合前后端协同开发经验不足的新手阅读. HTML赋值输出到 Element 的 value 或 data-name <input type="hidden" value="<?php echo $user_avatar;?>" /> <div data-value="<?php echo $user_avatar;?>"></div> 渲染结果 <input type=&q
Spring MVC前端与后端5种ajax交互方法【总结】

前端ajax与后端Spring MVC控制器有以下五种数据交互方式.(前台使用了dhtmlxGrid,后端使用了fastjson) 方式一通过URL传参通过URL挂接参数,如/auth/getUser?userid='6' 服务器端方法可编写为:getUser(String userid),也可新增其他参数如HttpSession, HttpServletRequest,HttpServletResponse,Mode,ModelAndView等. 方式二单值传参前台调用如: ajaxP
前端ajax的各种与后端交互的姿势

前端中常常用的与后端交换数据的话,通常是要用到ajax这种方法的但是交互的方式有很多种,很多取决于你后端的属性,我这儿主要列举我目前项目比较常用的两种方式 --一个是我们通用的web api和控制器, 首先我们来仔细看看ajax来与webapi做的交互数据这里先简单描述一下web api的四种属性--GET,POST,PUT,DELETE 这里面我永昌使用的是GET和POST 如果这时候我们需要用到AJAX与那些数据做后端交互的话 $.ajax({ url: "你的webapi",
SpringMVC前端和后端数据交互总结

本文主要介绍了SpringMVC前端和后端数据交互的资料,特地发出来记录一下.有需要的朋友可以了解一下. 控制器作为控制器,大体的作用是作为V端的数据接收并且交给M层去处理,然后负责管理V的跳转.SpringMVC的作用不外乎就是如此,主要分为:接收表单或者请求的值,定义过滤器,跳转页面:其实就是servlet的替代品. 传值方式 springmvc最方便的一点就是可以通过注释方式来定义它的url. @Controller public class formMVC { @RequestMapp
JavaEE实现前后台交互的文件上传与下载

首先为大家介绍相关的技术: service方法中的两个重要参数. ServletRequest – 用接收用户的请求,它的作用是: 可获取请求头信息. 可设置请请求的字符编码. 可获得用户传递的参数.Post或get. 可获取远程(即访问者)的IP地址. 可获取输入流,如用户上传文件.相片等. 它的一个子接口:javax.servlet.http.HttpServletRequest ServletResponse – 用于向用户返回数据. 设置响应类型- contentType 设置编码-se
jQuery Ajax前后端使用JSON进行交互示例

需求: 前端通过jQuery Ajax传输json到后端,后端接收json,对json进行处理,后端返回一个json给前端这里使用servlet的方式 1.采用$.post方法 index.jsp页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%
利用Node.js+Koa框架实现前后端交互的方法

前言对于一个前端工程师来说不仅仅要会前端的内容,后端的技术也需要熟练掌握.今天我就要通过一个案例来描述一下前端是如何和后端进行数据交互的. koa 是由 Express 原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的 Web 框架.使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的回调函数嵌套,并极大地提升错误处理的效率.koa 不在内核方法中绑定任何中间件,它仅仅提供了一个轻量优雅的函数库,使得编写 Web 应用变得得心应手. 准备工作首先
前后台交互过程中json格式如何解析以及如何生成

前台: 复制代码代码如下: $.ajax({ type: "POST", url: "GetMenuRole.ashx", data: "", dataType: "json", success: function (data) { if (data.Status == false) { alert(data.ErrorReason); } else { //解析这个菜单列表 alert(data.MenuList); }
Silverlight融合ajax实现前后台数据交互

事出偶然,本来公司强调的是用WCF 做项目审批流程,WPF /E 增强用户体验:由于个人的无知与偷懒,我产生了天真的想法:用WPF/E 来做审批流程,这不是一举两得吗. 下面介绍的就是用Silverlight (微软在07 年9 月将WPF/E 更名为Silverlight )融合ajax 做的审批流程.界面上的审批流程从下向上包括3部分,部门审批,科技处审批,厂长审批.实现的功能是可以定制审批流程,比如审批流程是部门审批--> 厂长审批,也可以定制成科技处审批--> 厂长审批.定制的数据存在
SpringMVC实现前端后台交互传递数据

本人对springmvc前端交互不太懂,搜索了很多关于springmvc前端交互介绍,下面我来记录一下,有需要了解的朋友可参考.希望此文章对各位有所帮助. Controller.java代码: @Controller public class DataController { //一.接收和通过ModelMap传出参数,不需要视图解析器,测试时加了解析器,顾返回值不需后缀 //普通参数 @RequestMapping("/data1") public String data1(@Req

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

相关推荐

随机推荐