使用<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 >即使用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 ' , ajaxInit, false );
使用方法:
代码依赖 prototype.js 使用时须下载 prototype1.4以上版本
其中// 通过URL读取JSON来获得样式 new Ajax.Request('Controller/GetJSon.ashx?name=ajaxdiv',...{onComplete: continuerun});
GetJSon.ashx内容为,读取XML,并把它转换为JSON形式:,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 >该XML为AJAX读取页面前所显示的样式的定义,例如id=0时,则为图片+读取中......;
id=1时为读取中.....+<br>+长条图片
关于XML转化JSON,请参考《.NET中利用Ebay的XSLT模板转换XML到JSON 》
// 具体的AJAX操作
Controller/GetHtmlPage.ashx?page='+url 为简单代理页，它为ajax提供了预处理，包括字符集，缓存等：
public void ProcessRequest(HttpContext context) ... { lock(this) ...{ // 取得系统相对路径 string path = ConfigurationSettings.AppSettings["serverrelpath"]; // 设置头信息 context.Response.ContentEncoding = System.Text.Encoding.GetEncoding("GB2312"); context.Response.CacheControl = "no-cache"; // 获取固定参数 string page = context.Request.Params["page"]; // 获取其他参数 string[] querys = context.Request.QueryString.AllKeys; string querystring = null; // 组装其他参数 if(querys.Length != 1) ...{ foreach(string query in querys) ...{ if(!query.Equals("page")) querystring += "&"+query+"=" + context.Request.Params[query]; } // 有参跳转 context.Response.Redirect(path + page + querystring); } // 无参跳转 context.Response.Redirect(path + page); } } public bool IsReusable ... { get ...{ // TODO: 添加 GetHtmlPage.IsReusable getter 实现 return true; } } #endregion }
