蝙蝠岛资源网

原生node.js案例--前后台交互
网络编程 2025/10/31 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

本案例包含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="/UploadFiles/2021-04-02/ajax.js">


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 += "_=" + 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 "(" + 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 + ' ] 的客户吗"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" 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' "server is success,listening on 80 port!");
});






以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
标签：
node.js,交互
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“原生node.js案例--前后台交互”

暂无原生node.js案例--前后台交互的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 MicroAirGrinder 南强小屋 幽灵资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 HerbalExtract 蝙蝠岛资源网 白云城资源网 天枫庄资源网 无争山庄资源网 HerbalExtracts FoodColouring NaturalHerbal HerbalOnline NaturalColouring 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com