|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
楼上说交互性不好,太牵强了吧。在微软提供的一套框架中,利用asp做网站,开发效率高,使用人数少,减少不必要的开销。交互性是互动方式,是有开发人员决定的。剧本|异步3、客户端代码
上面是程序的启动页面Tree.htm:
<HTML>
<SCRIPTSRC="Renderer.js"LANGUAGE="JavaScript"></SCRIPT>
<HEAD></HEAD>
<BODYID=bodyTreeNAME="bodyTree"OnLoad="GetTree();">
<IFRAMEID=GetDataSTYLE="display:none"></IFRAME>
</BODY>
</HTML>
该页面装载时将实行Renderer.js中的GetTree函数。HTML代码中的IFRAME部分完成了客户端和服务器真个通信机制。JavaScript函数GetTree的代码以下:
functionGetTree(){
if(event.type=='load'){
if(typeof(divTree0)!='object')
GetData.window.location.href='GetTreeData.asp?Level=0';
}else{
try{
objManip=eval('divTree'+event.srcElement.getAttribute('ElementId'));
if(objManip.style.display=='none'){
objManip.style.display='';
}else{
objManip.style.display='none';
}
}catch(e){
GetData.window.location.href='GetTreeData.asp?Level='+event.srcElement.getAttribute('ElementId');
}
event.cancelBubble=true;
}
}
当文档装载时,onload事务被触发,GetTree函数得以实行。函数反省容器divTree0是不是存在,并为IFRAME(ID为GetData)读取第一层节点(这些节点的父节点ID为0)。如前所述,一切的节点都必需处置鼠标单击事务,并且事务句柄都是GetTree函数。当某个节点(如div1)吸收到一个鼠标事务时,程序将实行GetTree函数中的else部分。假如发送该事务的节点已读取了子节点,则程序反省这些子节点是不是已显现,然后切换子节点的显现形态,从而完成了该层节点的扩大或折叠效果。反省子节点是不是显现的if语句封装在一个try块内,因而当子节点不存在时,程序将实行catch部分,挪用服务器剧本GetTreeData.asp读取子节点内容。最初,程序设置event.cancelBubble=true,目标是克制上一层容器处置该事务。
服务器剧本GetTreeData.asp前往的HTML代码类如:
<HTML>
<BODYOnLoad="parent.PopulateTree('1|0|节点1|2|0|节点2|3|0|节点3|4|0|节点4|');">
</BODY>
</HTML>
能够看到,这里的Onload事务又挪用了别的一个JavaScript函数PopulateTree。PopulateTree函数代码以下:
functionPopulateTree(strData){
vararrSplitData;
variCnt;
varobjTempDiv;
varobjMainDiv;
if(strData=='')return;
arrSplitData=strData.split("|");
objMainDiv=document.createElement('DIV');
objMainDiv.id='divTree'+arrSplitData[1];
objMainDiv.style.CSSText='position:relative;left:10px;cursor:hand;';
for(iCnt=0;iCnt<arrSplitData.length-1;iCnt+=3){
objTempDiv=document.createElement('<DIVOnClick='GetTree()'OnSelectStart='returnfalse;'>');
objTempDiv.id='div'+arrSplitData[iCnt];
objTempDiv.innerHTML=arrSplitData[iCnt+2];
objTempDiv.setAttribute('ElementId',arrSplitData[iCnt]);
objTempDiv.setAttribute('ParentElementId',arrSplitData[iCnt+1]);
objTempDiv.style.cssText='position:relative;cursor:hand;color:red;width:100px;font-size:x-small;';
objMainDiv.appendChild(objTempDiv);
}
if(arrSplitData[1]=='0')
document.body.appendChild(objMainDiv);
else
eval('div'+arrSplitData[1]).appendChild(objMainDiv);
}
我们已晓得,PopulateTree函数由onLoad事务挪用,它的参数是一个字符串,好比上例中的“1|0|节点1|2|0|节点2|3|0|节点3|4|0|节点4|”,它是一个“节点标识|父节点标识|节点文本|……”的列表。
假如某个节点不含子节点,则该参数是一个空字符串,此时PopulateTree间接前往。假如子节点存在,则能够使用split函数将子节点列表以数组情势保留。再接上去,就能够创立该层节点的容器,好比divTree0,然后遍历数组创立各个节点,如div1,div2……。假如某个节点的父节点ID为0,申明该节点没有父节点,程序将把容器divTree0到场文档的BODY;不然当该节点的父节点ID不为0,则创立与其父节点对应的容器“divTree<<父节点ID>>”。在创立节点的同时指定了鼠标单击事务的句柄GetTree函数。
注:能够修正GetTreeData.asp,使其前往的子节点列表(即PopulateTree的参数)情势为“节点ID|节点文本|……”,也就是省略父节点ID,由于任何一组子节点列表其父节点老是不异的。同</p>ASP一般认为只能运行在IIS上,正如前面所提到的,这并不是十分正确,事实上,ASP也能运行在Apache上。ApacheASP可在任意Apache服务器上运行有限的ASP功能,所需做的,只需打开mod_perl。 |
|