扩展DIV实现嵌套读取AJAX页面

使用<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
    }