社区 › ASP网页编程 › ASP网站制作之ASP+AJAX打造无革新旧事批评体系

变相怪杰 发表于 2015-1-16 22:22:01

ASP网站制作之ASP+AJAX打造无革新旧事批评体系

asp是基于web的一种编程技术，可以说是cgi的一种。它可以完成以往cgi程序的所有功能，如计数器、留言簿、公告板、聊天室等等。ajax|asp+|革新|无革新　　不知上过ChinaRen校友录的伴侣们有无注重，ChinaRen在改版后良多方面都举行了较年夜的修改。比方留言与复兴方面已不再像之前那样，在每次提交后总得从头加载一下全部页面，碰着网速超慢时，只无能瞪着眼睛守候。那末如今这类炫丽的效果又是怎样做到的呢，假如你以为有乐趣，那就随着我一同往下看吧!
　　懂得Ajax的伴侣大概晓得实在这类炫丽效果的完成并非一件很难堪的事，固然假如你不懂得作甚Ajax那也没有干系，本节我们就经由过程打造一个旧事批评体系，来看看究竟甚么是Ajax,起首我们仍是先懂得一些基本器材。
　　甚么是Ajax?
　　Ajax提出者JesseJamesGarrett在《Ajax:一个Web使用的新路子》中提到Ajax为“AsynchronousJavaScript+XML”的简称，也就是异步的JavaScript和XML处置。其包括：
　　用XHTML和CSS举行基于尺度的暗示体例：
　　接纳DOM(documentobjectmodel)静态显现和交互操纵;
　　接纳XML和XSLT举行数据互换和操纵;
　　接纳XMLHttpRequest举行异步数据猎取;
　　接纳JavaScript绑定上述手艺使用;
　　Ajax与传统Web使用有甚么分歧?
　　Ajax与传统Web使用最年夜的分歧就是Ajax能够对页面某一个地区举行部分加载，而不是像传统Web中每次页面哀求后的都必需从头加载全部页面，出格在页面负载对照年夜的情形下，页面加载工夫就对照长，用户多半工夫就处在守候形态，而出现给用户的仅仅是一片空缺，而在Ajax的使用中就能够很好的制止这类事变的产生。
　　Ajax的事情道理是甚么?
　　Ajax次要是经由过程JavaScript工具中的XmlHttpRequest向服务器提出哀求，并依据处置的了局更新页面。如许的更新不会使全部页面全体更新，而是依据用户的必要对某个地区举行部分更新，并且在更新的同时不影响别的地区的扫瞄。比方：搜狐团体博客中每一个栏目前面的革新按钮。
　　甚么是XmlDom?
　　XMLDOM是用来会见和操纵XML文档的编程接口标准。XMLDOM被计划为可用于任何言语和任何操纵体系。借助DOM，程序员能够创立XML文档、遍历其布局，增、改、删其元素。DOM将全部XML文档视作一棵树，文档级的元素是树的根。
　　上面我们就来看看几个与本教程相干的功效，值得注重的是以下办法或属性并非统一个工具下，详细请看申明：
　　getElementsByTagName办法
　　申明：传回指命名称的元素汇合。
　　语法：objNodeList=xmlDocument.getElementsByTagName(tagname);
　　例：varnode=xmlDom.responseXML.getElementsByTagName("pl");
　　getAttribute()办法
　　申明：取得某个元素节点的属性值
　　语法：elementNode.getAttribute(name)
　　例：vartot=xmlDom.responseXML.getElementsByTagName("pl").getAttribute("tot");
　　childNodes属性
　　申明：传回一个节点列表，包括该节点一切可用的子节点。
　　语法：objNodeList=node.childNodes;
　　例：objNodeList=xmlDoc.childNodes;
　　如需详细的某一个节点,varu=xmlDoc.childNodes(0);
　　Length属性()
　　申明：前往一个节点列表中的节点数目
　　语法：nodelistObject.length
　　例：varlen=node.length;
　　至此，基本常识已讲完了，假如你仍是不太懂得的话，那倡议你往看一些javascript相干的教程。上面我们就看这个旧事批评体系的详细完成道理
　　假定有一个页面index.asp，上半部分为批评列表显现地区，上面为批评提交地区。那末如许一个页面我们怎样显现批评内容和提交批评呢?
　　传统：上半部分批评列表间接经由过程数据库查询语句读取并显现，每当提交新的批评时，先传送给处置页面，处置页面处置终了后再前往index.asp这个页面，固然index.asp是从头加载取得新的批评。
　　Ajax:：起首列表页面的内容是一个独自的xml文件(pl_list.asp)，然后index..asp中的上半部分批评经由过程XmlHttpRequest哀求pl_list.asp页面，并经由过程前往的了局传送到必要更新地区。提交批评一样云云，每次提交接纳XmlHttpRequest哀求提交处置程序，然后从头更新批评列表显现地区。
　　此旧事批评体系共分为五个部分，分离为数据库、前台页面、JS代码、服务器处置、CSS款式。
　　数据库的计划
　　PL表：
　　字段名
　　范例
　　长度
　　id
　　主动编号
　　user
　　文本
　　20
　　dateandtime
　　日期/工夫
　　content
　　备注
　　newid
　　数字
　　前台页面：(index.htm)
　　如上图所示，前台页面共包含两部分，上半部分为页面批评列表显现，下半部分为提交批评。因为我们这里只是摹拟一个旧事批评体系，并没有真实的旧事页面，那末在传送旧事ID的时分我们接纳了一个默许值〈inputname="newsid"value="1"type="hidden"/〉。
　　代码：index.htm
　　〈%@LANGUAGE="VBSCRIPT"CODEPAGE="936"%〉
　　〈!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"〉
　　〈htmlxmlns="http://www.w3.org/1999/xhtml"〉
　　〈head〉
　　〈metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/〉
　　〈title〉批评体系〈/title〉
　　〈scriptsrc="main.js"〉〈/script〉
　　〈linkhref="main.css"rel="stylesheet"type="text/css"/〉
　　〈/head〉
　　〈body〉
　　〈divid="pllist"〉正在加载批评……
　　〈script〉loadDom();setTimeout("loadDom()",10000);〈/script〉
　　〈/div〉
　　〈divstyle="width:240px;font-size:12px;text-align:center"〉
　　〈fieldset〉〈legend〉批评〈/legend〉
　　呢称：〈inputname="user"type="text"style="width:180px"/〉〈inputname="newsid"value="1"type="hidden"/〉〈br/〉
　　内容：〈textareaname="content"style="width:180px;height:80px"〉〈/textarea〉〈br/〉
　　〈inputname="submit"value="我要批评"type="button"/〉
　　〈/fieldset〉
　　〈/div〉
　　〈divstyle="font-size:12px;"id="msg"〉
　　〈/div〉
　　〈/body〉
　　〈/html〉
　　JS代码页(中心部分)main.js
　　JS代码算是本体系的一个中心部分了，Ajax的表现基础全包括在这短短数十行的代码中，是保持前台与背景处置的一个桥梁，可谓是重中之重，为了更好的让人人了解全部功效，我们将分段先容。
　　1、取得XmlHttp工具，创立并前往一个XmlHttp工具。
　　varxhr;
　　functiongetXHR()
　　{
　　try{
　　xhr=newActiveXObject("Msxml2.XMLHTTP");
　　}catch(e){
　　try{
　　xhr=newActiveXObject("Microsoft.XMLHTTP");
　　}catch(e){
　　xhr=false;
　　}
　　}
　　if(!xhr&&typeofXMLHttpRequest!=undefined)
　　{
　　xhr=newXMLHttpRequest();
　　}
　　returnxhr;
　　}
　　functionopenXHR(method,url,callback)
　　{
　　getXHR();
　　xhr.open(method,url);
　　xhr.onreadystatechange=function()
　　{
　　if(xhr.readyState!=4)return;
　　callback(xhr);
　　}
　　xhr.send(null);
　　}
　　functionloadXML(method,url,callback)
　　{
　　getXHR();
　　xhr.open(method,url);
　　xhr.setRequestHeader("Content-Type","text/xml");
　　xhr.setRequestHeader("Content-Type","GBK");
　　xhr.onreadystatechange=function()
　　{
　　if(xhr.readyState!=4)return;
　　callback(xhr);
　　}
　　xhr.send(null);
　　}
　　详细的挪用办法：
　　loadXML(method,url,callback)
　　method:http办法，比方：POST、GET、PUT及PROPFIND
　　url:哀求的URL地点，能够为相对地点也能够为绝对地点
　　callback:自界说的前往处置函数
　　2.取得批评列表
　　此段代码的次要功效是依据服务器处置前往的信息更新前台页面的内容，次要包含显现批评列表、批评列表分页、跳转页数三个功效。
　　显现批评列表：getList函数
　　functiongetList(xmlDom)
　　{
　　varpllist=document.getElementById("pllist");//取得页面pllist工具,此工具用来显现批评内容
　　varnode=xmlDom.responseXML.getElementsByTagName("pllist");//取得pllist节点汇合
　　vartot=xmlDom.responseXML.getElementsByTagName("pl").getAttribute("tot");//取得pl节点tot属性值,这里指批评的总数目
　　varcurpage=xmlDom.responseXML.getElementsByTagName("pl").getAttribute("curpage");//取得pl节点curpage属性，这里指批评列表以后地点的页数,使用于翻页
　　if(tot!=0)//判别以后批评数是不是为空
　　{
　　varcont="";
　　varlen=node.length;//取得pllist节点汇合中节点的总数目
　　for(vari=0;i〈len;i++)
　　{
　　varu=node.childNodes(0).text;//取得节点第一个子节点的值,这里指呢称
　　vard=node.childNodes(1).text;//取得节点第二个子节点的值，这里指工夫
　　varco=node.childNodes(2).text;//取得节点第三个子节点的值,这里指内容
　　varidnub=node.childNodes(3).text;//取得节点第四个子节点的值,这里指旧事ID
　　cont+=〈divclass="u"〉呢称：+u+〈/div〉〈divclass="d"〉工夫：+d+〈/div〉〈divclass="idnub"style="cursor:hand"onmousemove="this.style.background=#99cc66"〉删除〈/div〉〈divclass="co"〉内容：+co+〈/div〉;//将所取得的批评内容天生一个字符串
　　}
　　varcont1=pagecount(tot,curpage);//挪用分页函数
　　cont+=cont1;
　　pllist.innerHTML=cont;//将内容出现
　　}
　　else
　　{
　　pllist.innerHTML="暂无批评!";
　　}
　　}
　　批评列表分页：pagecount函数
　　functionpagecount(tot,cur)
　　{
　　varcont1="";
　　if(tot%5==0)//默许每页五条，这个请求与服务器端坚持分歧
　　{
　　pages=parseInt(tot/5);
　　}
　　else
　　{
　　pages=parseInt(tot/5)+1;
　　}
　　for(varj=1;j〈=pages;j++)
　　{
　　if(j==cur)
　　{cont1+="〈span〉"+j+"〈/span〉"}
　　else
　　{cont1+="〈spanstyle=cursor:hand;color:#0000ffonmousemove=this.style.background="#99cc66"〉"+j+"〈/span〉"}
　　}
　　returncont1;
　　}
　　跳转页数：gotopage函数
　　functiongotopage(page)
　　{
　　loadXML("get","pl_list.asp?page="+page,getList);
　　}
　　functionloadDom()//准时更新批评列表,初始化10秒钟
　　{
　　loadXML("get","pl_list.asp",getList);
　　setTimeout("loadDom()",10000)
　　}
　　3.删除批评
　　functiondel(idnub)
　　{
　　varmsg=document.getElementById("msg");
　　msg.innerText="正在删除……";
　　loadXML("get","pl_del.asp?id="+idnub,getdel);
　　}
　　functiongetdel(xmlDom)//删除后所触发的事务,更新页面
　　{
　　varmsg=document.getElementById("msg");
　　msg.innerText="删除乐成!";
　　loadXML("get","pl_list.asp",getList);
　　}
　　4.提交批评
　　functionfb()//处置提交
　　{
　　varmsg=document.getElementById("msg");
　　varuser=document.getElementById("user");
　　varcontent=document.getElementById("content")
　　varnewsid=document.getElementById("newsid")
　　if(user.value=="")
　　{
　　alert("呢称不成为空!");
　　returnfalse;
　　}
　　if(content.value=="")
　　{
　　alert("内容不成为空!");
　　returnfalse;
　　}
　　msg.innerText="正在宣布批评";
　　loadXML("get","pl_fb.asp?user="+user.value+"&content="+content.value+"&newsid="+newsid.value,getfb);
　　}
　　functiongetfb(xmlDom)//批评提交后所触发的事务，更新批评列表
　　{
　　varmsg=document.getElementById("msg");
　　msg.innerText=xmlDom.responseText;
　　loadXML("get","pl_list.asp",getList);
　　}
　　服务器处置程序
　　依据JS代码页的分段先容，我们懂得此体系的功效大抵包含批评的显现处置、批评的删除处置、批评的提交处置三个功效，那末我们就依据这三个功效分离先容。
　　批评的显现处置页面：pl_list.asp
　　此程序为asp天生xml文件，经由过程分页的体例将批评的内容以XML的情势出现出来，我们能够独自运转。
　　代码：
　　〈!--#includefile="conn.asp"--〉
　　〈%
　　Response.ContentType="text/XML"
　　Response.expires=0
　　Response.expiresabsolute=Now()-1
　　Response.addHeader"pragma","no-cache"
　　Response.addHeader"cache-control","private"
　　Response.CacheControl="no-cache"
　　Response.write("〈?xmlversion=""1.0""encoding=""gb2312""?〉")
　　currentpage=request("page")
　　ifcurrentpage=""orint(currentpage)=0thencurrentpage=1
　　setrs=server.createobject("adodb.recordset")
　　sql="select*fromplorderbyiddesc"
　　rs.cursorlocation=3
　　rs.opensql,conn,1,1
　　ifnotrs.bofornotrs.eofthen
　　rs.pagesize=5
　　rs.absolutepage=currentpage
　　rowcount=rs.pagesize
　　Response.write("〈pltot="&rs.recordcount&"curpage="¤tpage&"〉")
　　dowhilenotrs.eofandrowcount〉0
　　Response.write("〈pllist〉")
　　Response.write("〈user〉"&rs("user")&"〈/user〉")
　　Response.write("〈dateandtime〉"&rs("dateandtime")&"〈/dateandtime〉")
　　Response.write("〈content〉"&rs("content")&"〈/content〉")
　　Response.write("〈id〉"&rs("id")&"〈/id〉")
　　Response.write("〈/pllist〉")
　　rowcount=rowcount-1
　　rs.movenext
　　loop
　　else
　　Response.write("〈pltot="&rs.recordcount&"curpage="¤tpage&"〉")
　　endif
　　rs.close
　　setrs=nothing
　　response.write("〈/pl〉")
　　%〉
　　Conn.asp数据库保持文件，在删除与提交处置中一样利用
　　〈%
　　dimconn
　　dimconnstr
　　dimdb
　　db="main.mdb"数据库文件地位
　　connstr="Provider=Microsoft.Jet.OLEDB.4.0;DataSource="&Server.MapPath(""&db&"")
　　setconn=server.createobject("ADODB.CONNECTION")
　　conn.openconnstr
　　%〉
　　批评的删除处置页面：pl_list.asp
　　〈%Response.Charset="gb2312"%〉
　　〈%Session.CodePage=936%〉
　　〈!--#includefile="conn.asp"--〉
　　〈%
　　id=request("id")
　　ifid=""then
　　response.write("参数毛病!")
　　response.End()
　　endif
　　setrs=server.CreateObject("adodb.recordset")
　　sql="select*fromplwhereid="&id
　　rs.opensql,conn,1,3
　　rs.delete
　　rs.update
　　rs.close
　　setrs=nothing
　　response.write("删除乐成!")
　　%〉
　　批评的提交处置页面：pl_fb.asp
　　〈%Response.Charset="gb2312"%〉
　　〈%Session.CodePage=936%〉
　　〈!--#includefile="conn.asp"--〉
　　〈%
　　user=request("user")
　　content=request("content")
　　newsid=request("newsid")
　　setrs=server.CreateObject("adodb.recordset")
　　sql="select*frompl"
　　rs.opensql,conn,1,3
　　rs.addnew
　　rs("user")=user
　　rs("content")=content
　　rs("newsid")=newsid
　　rs("dateandtime")=time()
　　rs.update
　　rs.close
　　setrs=nothing
　　response.write("增加乐成!")
　　%〉
　　CSS款式main.css
　　一个好的页面出现效果离不开一个好的款式，固然我这个属于最基础的，算是看得分明而已，人人假如有乐趣能够对款式文件作修正。
　　.u{/*呢称*/
　　font-size:12px;
　　float:left;
　　height:25px;
　　line-height:20px;
　　width:120px;
　　}
　　.d{/*工夫*/
　　font-size:12px;
　　float:left;
　　height:25px;
　　line-height:20px;
　　width:120px;
　　}
　　.idnub{/*删除*/
　　text-align:center;
　　font-size:12px;
　　height:25px;
　　line-height:25px;
　　width:30px;
　　}
　　.co{/*内容*/
　　font-size:12px;
　　width:280px;
　　}
　　这是我第一次实验在asp中利用ajax,习气于donet中的拖拖沓拉，俄然用最原始的体例写代码还真有点不习气，出格是短少了那种所见即所得的效果，每步的完成都得在不休的调试中完成,切实其实是一件很累的事变。固然跟着Ajax式的程序开辟越来越受接待，如今市情的框架、工具也愈来愈多，信任有那末一天，开辟Ajax使用程序毕竟会酿成一件易常复杂的事。
asp,jsp,php是web开发的三大技术,asp简单易用且有microsoft做靠山,jsp功能强大是因为有java支持,php则开源跨平台.在国内,asp应用范围最广,jsp发展势头最猛,php则处于劣势.这可能与公司的支持以及技术的培训有关.

活着的死人 发表于 2015-1-19 09:31:19

代码逻辑混乱，难于管理：由于ASP是脚本语言混合html编程，所以你很难看清代码的逻辑关系，并且随着程序的复杂性增加，使得代码的管理十分困难，甚至超出一个程序员所能达到的管理能力，从而造成出错或这样那样的问题。

透明 发表于 2015-1-24 21:16:51

还有如何才能在最短的时间内学完?我每天可以有效学习2小时，双休日4小时。

再见西城 发表于 2015-2-2 13:55:48

学习是为了用的，是为了让你的程序产生价值，把握住这个原则会比较轻松点。除此之外，课外时间一定要多参加一些社会实践活动，来锻炼自己的能力。

山那边是海 发表于 2015-2-7 22:14:00

另外因为asp需要使用组件，所以了解一点组件的知识(ADODB也是组件)

冷月葬花魂 发表于 2015-2-23 12:57:43

以上是语言本身的弱点，在功能方面ASP同样存在问题，第一是功能太弱，一些底层操作只能通过组件来完成，在这点上是远远比不上PHP/JSP，其次就是缺乏完善的纠错/调试功能，这点上ASP/PHP/JSP差不多。

柔情似水 发表于 2015-3-7 09:09:10

多看多学多思。多看一些关于ASP的书籍，一方面可以扩展知识面一方面可以鉴借别人是如何掌握、运用ASP的;多学善于关注别人，向同学老师多多学习，不论知识的大小;多思则是要将学到的知识灵活运用。

不帅 发表于 2015-3-14 18:50:59

接下来就不能纸上谈兵了，最好的方法其实是实践。实践，只能算是让你掌握语言特性用的。而提倡做实际的Project也不是太好，因为你还没有熟练的能力去综合各种技术，这样只能使你自己越来越迷糊。

若天明 发表于 2015-3-21 14:03:48

先学习用frontpage熟悉html编辑然后学习asp和vbscript建议买书进行系统学习

查看完整版本: ASP网站制作之ASP+AJAX打造无革新旧事批评体系