原生node.js案例–前后台交互
184 浏览量
2021-01-01
23:57:43
上传
评论
收藏 59KB PDF 举报
原生原生node.js案例案例–前后台交互前后台交互
本案例包含本案例包含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");
}
];
评论0