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

网络编程 2024/9/24 佚名

3 1 2

本案例包含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.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

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

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年09月24日

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

jquery Easyui Datagrid实现批量操作（编辑，删除，添加）

jQuery实现单击按钮遮罩弹出对话框效果（1）

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接