javascript高手请进，用ajax调用页面输出为层的问题．

Question

这个是js
//more javascript from http://www.smallrain.net
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadstatustext="<img src='ajaxtabs/loading.gif' /> Requesting content..."////NO NEED TO EDIT BELOW////////////////////////
var loadedobjects=""
var defaultcontentarray=new Object()
var bustcacheparameter=""function ajaxpage(url, containerid, targetobj){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
var ullist=targetobj.parentNode.parentNode.getElementsByTagName("li")
for (var i=0; i<ullist.length; i++)
ullist[i].className=""  //deselect all tabs
targetobj.parentNode.className="selected"  //highlight currently clicked on tab
if (url.indexOf("#default")!=-1){ //if simply show default content within container (verus fetch it via ajax)
document.getElementById(containerid).innerHTML=defaultcontentarray[containerid]
return
}
document.getElementById(containerid).innerHTML=loadstatustext
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}function loadobjs(revattribute){
if (revattribute!=null && revattribute!=""){ //if "rev" attribute is defined (load external .js or .css files)
var objectlist=revattribute.split(/\s*,\s*/) //split the files and store as array
for (var i=0; i<objectlist.length; i++){
var file=objectlist[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
}function savedefaultcontent(contentid){// save default ajax tab content
if (typeof defaultcontentarray[contentid]=="undefined") //if default content hasn't already been saved
defaultcontentarray[contentid]=document.getElementById(contentid).innerHTML
}function startajaxtabs(){
for (var i=0; i<arguments.length; i++){ //loop through passed UL ids
var ulobj=document.getElementById(arguments[i])
var ulist=ulobj.getElementsByTagName("li") //array containing the LI elements within UL
for (var x=0; x<ulist.length; x++){ //loop through each LI element
var ulistlink=ulist[x].getElementsByTagName("a")[0]
if (ulistlink.getAttribute("rel")){
var modifiedurl=ulistlink.getAttribute("href").replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")
ulistlink.setAttribute("href", modifiedurl) //replace URL's root domain with dynamic root domain, for ajax security sake
savedefaultcontent(ulistlink.getAttribute("rel")) //save default ajax tab contentcanchange = false; document.getElementById(ulistlink.getAttribute("rel")).onmouseover=function(){canchange=false;} 
document.getElementById(ulistlink.getAttribute("rel")).onmouseout=function(){canchange=true} 
ulistlink.onclick=function(){return false}
ulistlink.onmouseover=function(){
ajaxpage(this.getAttribute("href"), this.getAttribute("rel"), this) 
loadobjs(this.getAttribute("rev")) 
show(document.getElementById(ulistlink.getAttribute("rel")),'block')
canchange=false; 
return false 
} 
ulistlink.onmouseout=function(){ 
var obj = document.getElementById(ulistlink.getAttribute("rel"))
canchange=true 
t=setTimeout(function(){show(obj,'none')},200); 
}  
if (ulist[x].className=="selected"){ 
ajaxpage(ulistlink.getAttribute("href"), ulistlink.getAttribute("rel"), ulistlink) //auto load currenly selected tab content 
loadobjs(ulistlink.getAttribute("rev")) //auto load any accompanying .js and .css files 
} 
} 
} 
} 
} 
t=null
function show(obj,v){ 
if(!canchange){ 
//alert(obj); 
if(t)clearTimeout(t);
status = obj.id+":"+v
t = setTimeout(function(){show(obj,v)},100) 
return 
} 
obj.style.display=v
}
代码没优化

Answer 1

这个是demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Dynamic Drive DHTML Scripts- Ajax Tabs Content script</title>
<script type="text/javascript" src="ajaxtabs/ajaxtabs.js">
//more javascript from http://www.smallrain.net
</script>
</head><body>
<ul id="maintab">
<li><a href="#default" rel="ajaxcontentarea">Home</a></li>
<li><a href="external1.htm" rel="ajaxcontentarea">Bird</a></li>
</ul>
<div id="ajaxcontentarea" style="position:absolute;z-index:1px;background:#FFF;border:1px solid #EEE"></div>
<script type="text/javascript">
//Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.
startajaxtabs("maintab")
</script>
这里是一位高手给我的源码，是用ajax来调用其它页面并变成层输出，但现在有三个问题：<br/>
一、现在只要点击这上面的"Bird"这个链接，同时就会打开external1.htm这个页面，
我是想改成鼠标响应时是用ajax调用external1.htm页面的内容变成层输出，而鼠标点击时却是打开bird.htm这个页面。<br/>
二、只要一响应上面的"Bird"链接，现在这里的文字就会被新层挤到下面去，而且只要鼠标响应后一移走，就会留个空隙。(刷新一下就看得很明显了，跟原先的位置不一样的)
在这里，我是想上面新响应打开的层永远是覆盖在这文字上面的，这里的文字的位置是固定不变的<br/>
三、用firefox浏览器时，鼠标触动时会响应，但鼠标移走进却没响应，希望可以改成兼容的。
</body>
</html>

Answer 2

我的天啊，好烂的代码。这两个文件需要替换下就可以了,我有改好的demo给我个email发给你demo.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Dynamic Drive DHTML Scripts- Ajax Tabs Content script</title>
<script type="text/javascript" src="ajaxtabs/ajaxtabs.js">
//more javascript from http://www.smallrain.net
</script>
</head><body>
<ul id="maintab">
<li><a href="bird.htm" rel="ajaxcontentarea">Home</a></li>
<li><a href="external1.htm" rel="ajaxcontentarea">Bird</a></li>
</ul>
<div id="ajaxcontentarea" style="position:absolute;left:60px;
     top:50px;z-index:2;background-color:#FFFFFF;
     width:400px;"></div>
<script type="text/javascript">
//Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.
var myobj=startajaxtabs("maintab")</script>
这里是一位高手给我的源码，是用ajax来调用其它页面并变成层输出，但现在有三个问题：<br/>
一、现在只要点击这上面的"Bird"这个链接，同时就会打开external1.htm这个页面，
我是想改成鼠标响应时是用ajax调用external1.htm页面的内容变成层输出，而鼠标点击时却是打开bird.htm这个页面。<br/>
二、只要一响应上面的"Bird"链接，现在这里的文字就会被新层挤到下面去，而且只要鼠标响应后一移走，就会留个空隙。(刷新一下就看得很明显了，跟原先的位置不一样的)
在这里，我是想上面新响应打开的层永远是覆盖在这文字上面的，这里的文字的位置是固定不变的<br/>
三、用firefox浏览器时，鼠标触动时会响应，但鼠标移走进却没响应，希望可以改成兼容的。
</body>
</html>2.ajaxtabs.js//more javascript from http://www.smallrain.net
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadstatustext="<img src='ajaxtabs/loading.gif' /> Requesting content..."////NO NEED TO EDIT BELOW////////////////////////
var loadedobjects=""
var defaultcontentarray=new Object()
var bustcacheparameter=""function ajaxpage(url, containerid, targetobj){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
var ullist=targetobj.parentNode.parentNode.getElementsByTagName("li")
for (var i=0; i<ullist.length; i++)
ullist[i].className=""  //deselect all tabs
targetobj.parentNode.className="selected"  //highlight currently clicked on tab
if (url.indexOf("#default")!=-1){ //if simply show default content within container (verus fetch it via ajax)
document.getElementById(containerid).innerHTML=defaultcontentarray[containerid]
return
}
document.getElementById(containerid).innerHTML=loadstatustext
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}function loadobjs(revattribute){
if (revattribute!=null && revattribute!=""){ //if "rev" attribute is defined (load external .js or .css files)
var objectlist=revattribute.split(/\s*,\s*/) //split the files and store as array
for (var i=0; i<objectlist.length; i++){
var file=objectlist[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
}function savedefaultcontent(contentid){// save default ajax tab content
if (typeof defaultcontentarray[contentid]=="undefined") //if default content hasn't already been saved
defaultcontentarray[contentid]=document.getElementById(contentid).innerHTML
}function startajaxtabs(){
for (var i=0; i<arguments.length; i++){ //loop through passed UL ids
var ulobj=document.getElementById(arguments[i])
var ulist=ulobj.getElementsByTagName("li") //array containing the LI elements within UL
for (var x=0; x<ulist.length; x++){ //loop through each LI element
var ulistlink=ulist[x].getElementsByTagName("a")[0]
if (ulistlink.getAttribute("rel")){
var modifiedurl=ulistlink.getAttribute("href").replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")
ulistlink.setAttribute("href", modifiedurl) //replace URL's root domain with dynamic root domain, for ajax security sake
savedefaultcontent(ulistlink.getAttribute("rel")) //save default ajax tab content
canchange = false; var oDivContent=document.getElementById(ulistlink.getAttribute("rel"));
oDivContent.onmouseover=function(){canchange=false;} 
oDivContent.onmouseout=function(){canchange=true} 
ulistlink.onmouseover=function(){ 
canchange=false; 
ajaxpage(this.getAttribute("href"), this.getAttribute("rel"), this) 
loadobjs(this.getAttribute("rev")) 
return false 
} 
ulistlink.onmouseout=function(){ 
var obj = this.parentNode.parentNode.firstChild.firstChild 
canchange=true 
t=setTimeout(function(){
oDivContent.innerHTML="";
},400); 
}  
if (ulist[x].className=="selected"){ 
ajaxpage(ulistlink.getAttribute("href"), ulistlink.getAttribute("rel"), ulistlink) //auto load currenly selected tab content 
loadobjs(ulistlink.getAttribute("rev")) //auto load any accompanying .js and .css files 
} 
} 
} 
} 
} 
function show(obj){ 
if(!canchange){ 
//alert(obj); 
t = setTimeout(function(){show(obj)},1000) 
return 
} 
ajaxpage(obj.getAttribute("href"), obj.getAttribute("rel"), obj)  
loadobjs(obj.getAttribute("rev")) 
}

Answer 3

谢谢,myvicy.谢谢各位.
执行结果基本上和我构思的差不多,不过仍有一个问题:<li><a href="#default" rel="ajaxcontentarea">Home</a></li>
<li><a href="external1.htm" rel="ajaxcontentarea">Bird</a></li>
在这里,假如现在要加多一个链接就是
<li><a href="external3.htm">3</a></li>
这里加上的链接,是不用到ajax调出层的,但是现在一加上就出错.
有没办法调整的?

Answer 4

谢谢,如果加了不就又要触动ajax调出层了,这个链接是不想用ajax来调用的.

Answer 5

谢谢,如果加了不就又要触动ajax调出层了,这个链接是不想用ajax来调用的.