原生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部分：
<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>客户管理系统</title> </head> <body> <divclass="box"> <ahref="javascript:void(0);"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"class="link">NEWCUSTOMER</a> <h2> <spanclass="fir">ID</span> <span>NAME</span> <spanclass="fir">AGE</span> <span>PHONE</span> <span>ADDRESS</span> <span>CONTROL</span> </h2> <ulid="conList"> <li> <spanclass="fir">1</span> <span>钱成</span> <spanclass="fir">25</span> <span>13044086186</span> <span>BeiJing</span> <spanclass="control"> <ahref="javascript:void(0);"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">修改</a> <ahref="javascript:void(0);"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">删除</a> </span> </li> </ul> </div> <scriptcharset="utf-8"type="text/javascript"src="js/ajax.js"></script> <scriptcharset="utf-8"type="text/javascript"src="js/index.js"></script> </body> </html>
2、ajax部分：
~function(){
//->createXHR:创建AJAX对象,兼容所有的浏览器
functioncreateXHR(){
varxhr=null,
flag=false,
ary=[
function(){
returnnewXMLHttpRequest;
},
function(){
returnnewActiveXObject("Microsoft.XMLHTTP");
},
function(){
returnnewActiveXObject("Msxml2.XMLHTTP");
},
function(){
returnnewActiveXObject("Msxml3.XMLHTTP");
}
];
for(vari=0,len=ary.length;i<len;i++){
varcurFn=ary[i];
try{
xhr=curFn();
createXHR=curFn;
flag=true;
break;
}catch(e){
}
}
if(!flag){
thrownewError("yourbrowserisnotsupportajax,pleasechangeyourbrowser,tryagain!");
}
returnxhr;
}
//->ajax:实现AJAX请求的公共方法;
functionajax(options){
var_default={
url:"",
type:"get",
dataType:"json",
async:true,
data:null,
getHead:null,
success:null
};
for(varkeyinoptions){
if(options.hasOwnProperty(key)){
_default[key]=options[key];
}
}
if(_default.type==="get"){
_default.url.indexOf("?")>=0?_default.url+="&":_default.url+="?";
_default.url+="_="+Math.random();
}
//->SENDAJAX
varxhr=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){
varval=xhr.responseText;
if(_default.dataType==="json"){
val="JSON"inwindow?JSON.parse(val):eval("("+val+")");
}
_default.success&&_default.success.call(xhr,val);
}
}
};
xhr.send(_default.data);
}
window.ajax=ajax;
}();
3、JavaScript部分：
varcustomer=(function(){
varconList=document.getElementById('conList');
functionbindEvent(){
conList.onclick=function(ev){
ev=ev||window.event;
vartar=ev.target||ev.srcElement,
tarTag=tar.tagName.toUpperCase(),
tarInn=tar.innerHTML;
if(tarTag==='A'&&tarInn==='删除'){
//->ALERT、CONFIRM、PROMPT
varcusId=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);
}
}
});
}
}
}
}
functionbindHTML(data){
varstr='';
for(vari=0;i<data.length;i++){
varcur=data[i];
str+='<li>';
str+='<spanclass="fir">'+cur.id+'</span>';
str+='<span>'+cur.name+'</span>';
str+='<spanclass="fir">'+cur.age+'</span>';
str+='<span>'+cur.phone+'</span>';
str+='<span>'+cur.address+'</span>';
str+='<spanclass="control">';
str+='<ahref="add.html?id='+cur.id+'"rel="externalnofollow">修改</a>';
str+='<ahref="javascript:;"rel="externalnofollow"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服务器部分：
varhttp=require("http");
varurl=require("url");
varfs=require("fs");
varserver1=http.createServer(function(request,response){
varurlObj=url.parse(request.url,true);
varpathname=urlObj.pathname;
varquery=urlObj.query;
varreg=/\.(HTML|CSS|JS|ICO)/i;
if(reg.test(pathname)){
varsuffix=reg.exec(pathname)[1].toUpperCase();
varsuffixMIME=suffix==='HTML'?'text/html':(suffix==='CSS'?'text/css':'text/javascript');
try{
varconFile=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('requestfileisnotfound!');
}
return;
}
//->数据API请求处理:客户端的JS代码中我们通过AJAX向服务器发送的请求,服务器接收到请求并且
//获取客户端传递的数据,把需要的数据内容准备好,然后在返回给客户端,客户端在AJAX的READY
//STATE等于4的时候获取返回的内容(都是按照API的规范文档来处理)
varcustomData=fs.readFileSync('./json/custom.json','utf-8');
customData.length===0?customData='[]':null;
customData=JSON.parse(customData);
varresult={
code:1,
msg:'失败',
data:null
};
varcustomId=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'){
varstr='';
request.on('data',function(chunk){
str+=chunk;
});
request.on('end',function(){
vardata=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(){
vardata=JSON.parse(str),
flag=false;
for(vari=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'];
varflag=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('requesturlisnotfound!');
});
server1.listen(80,function(){
console.log("serverissuccess,listeningon80port!");
});
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！