這個組件可以非同步載入網頁檔案,需要我前面寫的那個AJAX的組件支援!.
其組件代碼AJAXDiv.js的源碼
function $(objid)
...{
return document.getElementById(objid);
}
function $$(tagname)
...{
return document.getElementsByTagName(tagname);
}
function AJAXDiv(objid,autoFix,loadclass)
...{
//alert(objid);
this._id=objid;
this._loadClass=loadclass;
this._autoFix=autoFix;
this.init=function()
...{
var obj=$(this._id);
if((this._loadClass!=null)&&(this._loadClass!=""))
...{
obj.className=this._loadClass;
}
var ajaxLib=new AJAXLib();
ajaxLib.method="get";
ajaxLib.URLString=obj.rl;
ajaxLib.onCompletion=function()
...{
//alert(ajaxLib.response);
obj.innerHTML=ajaxLib.response;
}
ajaxLib.onLoading=function()
...{
obj.innerHTML="<span class="fixie"></span><img src='loading.gif'>正在初始化...";
}
ajaxLib.onLoaded=function()
...{
obj.innerHTML="<span class="fixie"></span><img src='loading.gif'>初始化完畢...";
}
ajaxLib.onInteractive=function()
...{
obj.innerHTML="<span class="fixie"></span><img src='loading.gif'>正在解析響應...";
}
ajaxLib.Send();
if(this._autoFix)
...{
obj.style.overflow="visible";
}
else
...{
obj.style.overflow="scroll";
}
};
this.init();
}
測試檔案test.htm:
<html>
<head>
<link href="main.css" rel="stylesheet" rev="stylesheet">
<script language="javascript" src="AJAXLib.js"></script>
<script language="javascript" src="AJAXDiv.js"></script>
<script language="javascript">...
window.onload=function()
...{
var ad=new AJAXDiv("ajaxdiv1",false);
var ad2=new AJAXDiv("ajaxdiv2",true)
}
</script>
</head>
<body>
<div class="ajaxdiv" id="ajaxdiv1" rl="a1.htm">
</div>
<div class="ajaxdiv" id="ajaxdiv2" rl="a2.htm">
</div>
</body>
</html>
這樣就可以非同步載入網頁檔案了,而且有載入進度提示.
