|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
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")[0].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")[0].getAttribute("tot");//取得pl节点tot属性值,这里指批评的总数目
varcurpage=xmlDom.responseXML.getElementsByTagName("pl")[0].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则处于劣势.这可能与公司的支持以及技术的培训有关. |
|