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

程序员文章站 2023-11-05 21:17:34

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

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

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

上一篇：如何保护眼睛,要多吃有色彩的食物

下一篇：代码实例ajax实现点击加载更多数据图片