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

 ~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 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; }(); 

 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 '; str += '' + cur.name + ''; str += '' + cur.age + ''; str += '' + cur.phone + ''; str += '' + cur.address + ''; str += ''; str += '修改'; str += '删除'; str += ''; str += ''; } 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(); 

 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