原生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!"); });
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!