使用<div id="DIV的标识" type="数字" ajaxurl="地址"></div>
XML格式大体如下:
<?
xml version="1.0" encoding="utf-8"
?>
< root >
< styletype id ="0" imgsrc ="images/loading/loading.gif" > 读取中....... </ styletype >
< styletype id ="1" > <![CDATA[ 读取中....<br><img src='images/loading/loadingbar2.gif' /> ]]> </ styletype >
</ root >
< root >
< styletype id ="0" imgsrc ="images/loading/loading.gif" > 读取中....... </ styletype >
< styletype id ="1" > <![CDATA[ 读取中....<br><img src='images/loading/loadingbar2.gif' /> ]]> </ styletype >
</ root >
即使用XML定义的id=对应数字的样式来嵌套读取AJAX。
比如a.htm :
<div id="da" type="0" ajaxurl="b.htm"></div>
b.htm :
<div id="db" type="1" ajaxurl="c.htm"></div>
<div id="dc" type="1" ajaxurl="d.htm"></div>
c.htm :
rtrtrtrtrtrtrt
d.htm:
aaaaaaaaaaaa
打开a.htm在DIV da中读取b.htm,然后da中即拥有db,dc两层,然后程序在db,dc中分别读取c.htm和d.htm
直到嵌套结束
代码如下:
var
ajax
=
...
{
// 是不是第一次
firstTime : true,
//同步检测队列数组
arr: new $A(),
that: false,
init : function() ...{
// 首先, 查看浏览器是否能执行此脚本(有些浏览器不能用getElementsByTagName)
if (!document.getElementsByTagName) ...{
return;
}
this.that = this;
this.run();
},
/**//**
* 遍历document中的所有div,如果有属性ajaxurl,则应用此脚本
*
**/
run : function() ...{
// 获取所有DIV层
var divs = document.getElementsByTagName("div");
// 获取所有SPAN层
var spans = document.getElementsByTagName("span");
// divs转化成数组并加入所有DIV层
divs = new $A(divs);
// divs加入所有SPAN层
for(var u=0;u < spans.length; u++) ...{
divs.push(spans[u]);
}
// 首次装载: 把所有层加入队列arr
if(this.arr.length == 0 && this.firstTime) ...{
this.firstTime = false;
for (var i=0; i < divs.length; i++) ...{
this.arr = this.arr.concat(divs[i].id);
}
}
// 非首次: 现有层与执行完的队列做差集,得出未处理的新层
else ...{
for(var j=0;j < divs.length; j++) ...{
for (var i=0; i < this.arr.length; i++) ...{
if(divs[j].id == this.arr[i]) ...{
divs.splice(j,1);
}
}
}
}
// 对未处理层进行循环,然后执行AJAX操作
for (var i=0; i < divs.length; i++) ...{
var thisDiv = divs[i];
if (thisDiv.getAttribute('ajaxurl')!=null) ...{
this.makeAjax(thisDiv);
// 处理完成后加入队列
this.arr = this.arr.concat(thisDiv.id);
}
}
},
// 执行AJAX前先应用样式
makeAjax : function(theDiv) ...{
var url = theDiv.getAttribute('ajaxurl');
var typeval = theDiv.getAttribute('type');
if(json.result.length == null)
theDiv.innerHTML = "<div align=center style='position:relative;'><img src='" + json.result.styletype.imgsrc + "'/> " + json.result.styletype.content + "</div>";
else
theDiv.innerHTML = "<div align=center style='position:relative;'>" + json.result[parseInt(typeval)].styletype.content + "</div>";
// 执行AJAX
setTimeout("doAjax('" + theDiv.id + "','" + url +"')",1000);
},
// 将"读取中"的过场效果提供给其他程序引用
runAjax : function(theDiv) ...{
// var url = theDiv.getAttribute('ajaxurl');
var typeval = theDiv.getAttribute('type');
if(typeval==null)
typeval="0";
if(json.result.length == null)
theDiv.innerHTML = "<div align=center style='position:relative;top:50%;height:100%'><img src='" + json.result.styletype.imgsrc + "'/> " + json.result.styletype.content + "</div>";
else
theDiv.innerHTML = "<div align=center style='position:relative;top:50%;height:100%'>" + json.result[parseInt(typeval)].styletype.content + "</div>";
}
}
// 初始化
function ajaxInit() ... {
// 通过URL读取JSON来获得样式
new Ajax.Request('Controller/GetJSon.ashx?name=ajaxdiv',...{onComplete: continuerun});
}
// 应用JSON样式,然后继续级联处理
function continuerun(e) ... {
eval(e.responseText);
ajax.init();
}
// 处理完AJAX后的回调
function doAfter(e) ... {
ajax.run();
}
// 具体的AJAX操作
function doAjax (id,url,pars) ... {
new Ajax.Updater(id,'Controller/GetHtmlPage.ashx?page='+url,...{parameters: pars,evalScripts: true,onComplete: doAfter});
}
// observe模式在window onload时加入ajax级联功能
Event.observe(window, ' load '
// 是不是第一次
firstTime : true,
//同步检测队列数组
arr: new $A(),
that: false,
init : function() ...{
// 首先, 查看浏览器是否能执行此脚本(有些浏览器不能用getElementsByTagName)
if (!document.getElementsByTagName) ...{
return;
}
this.that = this;
this.run();
},
/**//**
* 遍历document中的所有div,如果有属性ajaxurl,则应用此脚本
*
**/
run : function() ...{
// 获取所有DIV层
var divs = document.getElementsByTagName("div");
// 获取所有SPAN层
var spans = document.getElementsByTagName("span");
// divs转化成数组并加入所有DIV层
divs = new $A(divs);
// divs加入所有SPAN层
for(var u=0;u < spans.length; u++) ...{
divs.push(spans[u]);
}
// 首次装载: 把所有层加入队列arr
if(this.arr.length == 0 && this.firstTime) ...{
this.firstTime = false;
for (var i=0; i < divs.length; i++) ...{
this.arr = this.arr.concat(divs[i].id);
}
}
// 非首次: 现有层与执行完的队列做差集,得出未处理的新层
else ...{
for(var j=0;j < divs.length; j++) ...{
for (var i=0; i < this.arr.length; i++) ...{
if(divs[j].id == this.arr[i]) ...{
divs.splice(j,1);
}
}
}
}
// 对未处理层进行循环,然后执行AJAX操作
for (var i=0; i < divs.length; i++) ...{
var thisDiv = divs[i];
if (thisDiv.getAttribute('ajaxurl')!=null) ...{
this.makeAjax(thisDiv);
// 处理完成后加入队列
this.arr = this.arr.concat(thisDiv.id);
}
}
},
// 执行AJAX前先应用样式
makeAjax : function(theDiv) ...{
var url = theDiv.getAttribute('ajaxurl');
var typeval = theDiv.getAttribute('type');
if(json.result.length == null)
theDiv.innerHTML = "<div align=center style='position:relative;'><img src='" + json.result.styletype.imgsrc + "'/> " + json.result.styletype.content + "</div>";
else
theDiv.innerHTML = "<div align=center style='position:relative;'>" + json.result[parseInt(typeval)].styletype.content + "</div>";
// 执行AJAX
setTimeout("doAjax('" + theDiv.id + "','" + url +"')",1000);
},
// 将"读取中"的过场效果提供给其他程序引用
runAjax : function(theDiv) ...{
// var url = theDiv.getAttribute('ajaxurl');
var typeval = theDiv.getAttribute('type');
if(typeval==null)
typeval="0";
if(json.result.length == null)
theDiv.innerHTML = "<div align=center style='position:relative;top:50%;height:100%'><img src='" + json.result.styletype.imgsrc + "'/> " + json.result.styletype.content + "</div>";
else
theDiv.innerHTML = "<div align=center style='position:relative;top:50%;height:100%'>" + json.result[parseInt(typeval)].styletype.content + "</div>";
}
}
// 初始化
function ajaxInit() ... {
// 通过URL读取JSON来获得样式
new Ajax.Request('Controller/GetJSon.ashx?name=ajaxdiv',...{onComplete: continuerun});
}
// 应用JSON样式,然后继续级联处理
function continuerun(e) ... {
eval(e.responseText);
ajax.init();
}
// 处理完AJAX后的回调
function doAfter(e) ... {
ajax.run();
}
// 具体的AJAX操作
function doAjax (id,url,pars) ... {
new Ajax.Updater(id,'Controller/GetHtmlPage.ashx?page='+url,...{parameters: pars,evalScripts: true,onComplete: doAfter});
}
// observe模式在window onload时加入ajax级联功能
Event.observe(window, ' load '