相思资源网 Design By www.200059.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.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无原生node.js案例--前后台交互的评论...