aja在asp中应用删除无刷新

1、ajax|asp+|刷新|无刷新不知上过ChinaRen校友录的朋友们有没有注意，ChinaRen在改版后很多方面 都进行了较大的改动。例如留言与回复方面已经不再像以前那样，在每次提交后总得重新加 载一下整个页面，碰到网速超慢时，只能干瞪着眼睛等待。那么现在这种炫丽的效果又是如 何做到的呢，如果你觉得有兴趣，那就跟着我一起往下看吧！了解Ajax的朋友也许知道其实这种炫丽效果的实现并不是一件很为难的事，当然 如果你不了解何为Ajax那也没有关系，本节我们就通过打造一个新闻评论系统，来看看到 底什么是Ajax，首先我们还是先了解一些基础东西。什么是Ajax?Ajax提出者Jesse James G

2、arrett在Ajax: 个Web应用的新途径中提到 Ajax 为“Asynchronous JavaScript + XML”的简称，也就是异步的 JavaScript 和 XML 处理。其包含：用XHTML和CSS进行基于标准的表示方式：采用DOM(document object model)动态显示和交互操作；采用XML和XSLT进行数据交换和操作；采用XMLHttpRequest进行异步数据获取；采用JavaScript绑定上述技术应用；Ajax与传统Web应用有什么不同？Ajax与传统Web应用最大的不同就是Ajax可以对页面某一个区域进行局部加 载，而不是像传统Web中每次页面请求

3、后的都必须重新加载整个页面，特别在页面负载比 较大的情况下，页面加载时间就比较长，用户多数时间就处在等待状态，而呈现给用户的仅 仅是一片空白，而在Ajax的应用中就可以很好的避免这类事情的发生。Ajax的工作原理是什么？Ajax主要是通过JavaScript对象中的XmlHttpRequest向服务器提出请求，并 根据处理的结果更新页面。这样的更新不会使整个页面全部更新，而是根据用户的需要对某 个区域进行局部更新，而且在更新的同时不影响其它区域的浏览。例如：搜狐个人博客中每 个栏目后面的刷新按钮。什么是XmlDom?XMLDOM是用来访问和操作XML文档的编程接口规范。XMLDOM被设计为可用

4、于任何语言和任何操作系统。借助DOM，程序员可以创建XML文档、遍历其结构，增、 改、删其元素。DOM将整个XML文档视作一棵树，文档级的元素是树的根。下面我们就来看看几个与本教程相关的功能，值得注意的是以下方法或属性并不是 同一个对象下，具体请看说明：getElementsByTagName 方法说明：传回指定名称的元素集合。语法：objNodeList = xmlDocument.getElementsByTagName(tagname);例: var node=xmlDom.responseXML.getElementsByiagName(pl);getAtt ribute()方法说明：

5、获得某个元素节点的属性值语法：elementNode.getAttribute(name)例:vartot=xmlDom .r espo nseXML.getEleme ntsByTagName(pl)O.getAtt ribute(tot );childNodes 属性说明：传回一个节点列表，包含该节点所有可用的子节点。语法：objNodeList=node.childNodes;例: objNodeList = xmlDoc.childNodes;如需具体的某一个节点，var u= xmlDoc.childNodes(O);Length 属性()说明：返回一个节点列表中的节点数量语法：no

6、delistObject.length例: var len = node.length;至此，基础知识已经讲完了，如果你还是不太了解的话，那建议你去看一些 javasc ript相关的教程。下面我们就看这个新闻评论系统的具体实现原理假设有一个页面index.asp，上半部分为评论列表显示区域，下面为评论提交区域。那么这样一个页面我们如何显示评论内容和提交评论呢？传统：上半部分评论列表直接通过数据库查询语句读取并显示，每当提交新的评论 时，先传递给处理页面，处理页面处理完毕后再返回index.asp这个页面，当然index.asp 是重新加载获得新的评论。Ajax:首先列表页面的内容 是一个单独

7、的 xml文件(pl_list.asp)，然后 index.asp中的上半部分评论通过XmlHttpRequest请求pl_list.asp页面，并通过返回 的结果传递到需要更新区域。提交评论同样如此，每次提交采用XmlHttpRequest请求提 交处理程序，然后重新更新评论列表显示区域。此新闻评论系统共分为五个部分，分别为数据库、前台页面、JS代码、服务器处 理、CSS样式。数据库的设计PL表：字段名类型长度id自动编号use r文本20datea ndtime日期/时间content备注n ewid数字前台页面：(index.htm)如上图所示，前台页面共包括两部分，上半部分为页面评论列

8、表显示，下半部分为 提交评论。由于我们这里只是模拟一个新闻评论系统，并没有真正的新闻页面，那么在传递 新闻ID的时候我们采用了一个默认值 in put name= newsid value=1 type=hidde n/。代码：index.htmLANGUAGE = VBSCRIPT CODEPAGE=936%!DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN HYPERLINK http:/www.w3-o http:/www.w3-o rg/TR/xhtml1/DTD/xhtml1-t ran sitio nal.dtdhtml

9、 xml ns= HYPERLINK http:/www.w3.o http:/www.w3.o rg/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=gb2312 /title评论系统/titlescript src=main.js/scriptli nk hr ef=ma in. css r el = stylesheet type=text/css /headbodydiv id = pllist正在加载评论scriptloadDom();setTimeout(loadDom(),10000);/

10、script/divdiv style=width:240px;fo nt-size:12px;text-alig n:ce nte rfieldsetlegend评论/legend呢称：in put n ame=use r type=text style=width:180px/ input name=newsid value=1 type=hidden/br/内容：texta rea n ame=c onten t style=width:180px;height:80px /textareabr/in put n ame=submit value=我 要评论type=butt on /f

11、ieldset/divdiv style=fo nt-size:12px; id = msg/div/body/htmlJS代码页(核心部分)main.jsJS代码算是本系统的一个核心部分了，Ajax的体现基本全包含在这短短数十行的 代码中，是连结前台与后台处理的一个桥梁，可谓是重中之重，为了更好的让大家理解整个 功能，我们将分段介绍。1、获得XmlHttp对象，创建并返回一个XmlHttp对象。var xhr;fun cti on getXHR()try xhr=n ew ActiveXObject(Msxml2.XMLHTTP); catch (e) try xhr=new ActiveX

12、Object(Microsoft.XMLHTTP); catch (e) xhr=false;if(!xh r&typeof XMLHttpRequest! = u ndefi ned)xhr=new XMLHttpRequest();return xhr;fun cti on ope nXHR(method, ur l,callback)getXHR();xhr.ope n( method, ur I);xhr.o nr eadystatecha nge=fun cti on()if(xhr. readyState!= 4)return;callback(xh r);xhr.s end(nu

13、 II);fun cti on loadXML(method, ur l,callback)getXHR();xhr.ope n( method, ur I);xhr.setRequestHeade r(C onten t-Type,text/xml); xhr.setRequestHeade r(Co nte nt-Type,GBK);xhr.o nr eadystatecha nge=fun cti on()if(xhr. readyState!= 4)return;callback(xh r);xhr.s end(nu II);具体的调用方法：IoadXML(method,u rl,ca

14、llback)method: http 方法，例如：POST、GET、PUT及 PROPFINDurI:请求的URL地址，可以为绝对地址也可以为相对地址callback:自定义的返回处理函数2.获得评论列表此段代码的主要功能是根据服务器处理返回的信息更新前台页面的内容，主要包括 显示评论列表、评论列表分页、跳转页数三个功能。显示评论列表：getList函数fun cti on getList(xmlDom)var pllist=document.getElementById(pllist); /获得页面 pllist 对象，此对象用来显示评论内容var node=xmlDom.response

15、XML.getElementsByTagName(pllist);获得 pllist节点集合var tot=xmlDom .r espo nseXML.getEleme ntsByTagName(pl)O.getAtt ribute(tot );获得pl节点tot属性值，这里指评论的总数量var cur page=xmlDom. resp on seXML.getEleme ntsByTagName(pl)O.getAtt ribute (c ur page);/获得pl节点cur page属性，这里指评论列表当前所在的页数，应用于翻页 if (tot!=0) /判断当前评论数是否为空var

16、con t=;var len = node.length;/获得pllist节点集合中节点的总数量for(var i=0;i len;i+)var u = n odei.childNodes(O).text;获得节点第一个子节点的值，这里指呢称 var d = n odei.childNodes(1).text; /获得节点第二个子节点的值，这里指时间 va r co=nodei.childNodes(2).text; /获得节点第三个子节点的值，这里指内容 var idnub=nodei.childNodes(3).text; 获得节点第四个子节点的值，这里指新 闻IDcont+ = div

17、 class=u呢称:+u+/divdiv class=d时间:+d+/div divclass=id nubstyle=c ursor:ha ndonmousemove=this.style.background=#99cc66 删除 /div div class=co内容：+co+/div； 将所获得的评论内容生成一个字符串var con t1 = pageco un t(tot,c ur page);/调用分页函数con t+=c on t1;pllist.i nner HTML=c on t;/将 内容呈现elsepllist.i nner HTML=暂无评论!；评论列表分页：page

18、count函数fun cti on pageco un t(tot,c ur)var con t1 = ;if (tot%5 =0) /默认每页五条，这个要求与服务器端保持一致pages=pa rseln t(tot/5);elsepages=pa rse In t(tot/5)+1;for(var j = 1;j = pages;j+)if (j =c ur) cont1 + = span+j+/spanelsecon t1 + = spa nstyle=c ursor:ha nd;co lor:#OOOOffon mouseout=this.style.backg roun d=on mo

19、usemove=this.style.backg roun d=#99cc66onclick=gotopage(+j+)+j+/spanretu rn con t1;跳转页数：gotopage函数fun cti on gotopage(page)loadXML(get,pl_list.asp?page=+page,getList);fun ctio n loadDom() 定时更新评论列表，初始化10秒钟loadXML(get,pl_list.asp,getList); setTimeout(loadDom(),10000)删除评论fun cti on del(id nub)var msg=d

20、ocum en t.getElem en tById(msg);msg.innerText=正在删除;loadXML(get,pl_del.asp?id = +id nub,getdel);fun ctio n getdel(xmlDom) /删除后所触发的事件，更新页面 var msg=docum en t.getElem en tById(msg);msg.i nnerText=|0除成功!；loadXML(get,pl_list.asp,getList);提交评论fun ctio n fb() 处理提交var msg=docum en t.getElem en tById(msg);va

21、r use r=docume nt.getEleme ntById(use r);var conten t=docume nt.getEleme ntById(c onten t)var n ewsid=docume nt.getEleme ntById( newsid) if (user.value= = )ale rt(呢称不可为空!)；return false;if (conten t.value= = )ale rt(内容不可为空!)；return false;msg.i nnerText=正在发表评论；loadXML(get,pl_fb.asp?use r=+user.value+&

22、co nte nt=+co nte nt.value+& n ewsid =+newsid.value,getfb);fun ctio n getfb(xmlDom) /评论提交后所触发的事件，更新评论列表var msg=docum en t.getElem en tById(msg);msg.i nnerText=xmlDom.r esp on seText;loadXML(get,pl_list.asp,getList);服务器处理程序根据JS代码页的分段介绍，我们了解此系统的功能大致包括评论的显示处理、评 论的删除处理、评论的提交处理三个功能，那么我们就根据这三个功能分别介绍。评论的显示

23、处理页面：pl_list.asp此程序为asp生成xml文件，通过分页的方式将评论的内容以XML的形式呈现 出来，我们可以单独运行。代码：!-#i nclude file=c onn .asp-Respo nse.C on te ntType = text/XMLResp on se.expi res = 0Resp on se.expi resabsolute = Now() - 1Resp on se.addHeade r pr agma, no-cacheResp on se.addHeade r cache-c ontrol, p rivateResp on se.CacheC ont

24、rol = no-cacheResponse.write( ?xml version = 1.0 encoding = gb2312?)curren tpage=r equest(page)if curren tpage= or in t(c urren tpage)=0 the n curren tpage=1set r s=se rver.c reateobject(adodb. reco rdset)sql = select * from pl order by id descrs.cu rso rl ocati on = 3r s.ope n sql,c onn ,1,1if not

25、r s.bof or not r s.eof the nr s.pagesize=5r s.absolutepage=c urren tpager owco unt=r s.pagesizeResponse.write(pl tot=&rs.recordcount& curpage=otpage&)do while not rs.eof and rowcount0Response.write(pllist)Response.write(user&rs(user)&/user)Response.write(dateandtime&rs(dateandtime)&/dateandtime)Resp

26、onse.write(content&rs(content)&/content)Response.write(id&rs(id)&/id)Response.write(/pllist)r owco unt=r owco un t-1r s.move nextloopelseResponse.write(pl tot=&rs.recordcount& curpage=otpage&)end ifrs.closeset rs=nothingresponse.write(/pl)%Conn.asp数据库连结文件，在删除与提交处理中同样使用dim conndim connstrdim dbSour c

27、e= &db=mai n.mdbSour ce= &conn st r=P rovide r=Mic rosoft.Jet.OLEDB.4.0;DataSer ver.MapPath(&db&)set conn=ser ver.c reateobject(ADODB.CONNECTION) conn, ope n connstr%评论的删除处理页面：pl_list.asp Resp on se.Cha rset=gb2312 % Sessi on. CodePage=936 %!-#i nclude file=c onn .asp-id = r equest(id)if id = the nrespo nse.w rite( 渗数错误!)r esp on se.E nd()end ifset r s=se rver.C reateObject(adodb. reco rdset)sql = select * from pl where id = &idr s.ope n sql,c onn ,1,3r s.deleter s.updater s.closeset rs=nothingr espo nse.w rite( 删除成功!)%评论的提交处理页面：pl_fbasp Resp on se.Cha rset=