AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计（下）

AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计（上）

AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计（中）

        在前面两篇文章中，我们实现了静态表格分页模板，下面让我们继续讨论，如何实现另外两种数据获取方式的模板。要缓解服务器的压力，我们可以这样做：

        1、显示初始页面也就是第一页的时候，我们构造好表头、标题和第一页的数据，并按照服务器返回的总页数生成导航链接，之后将不再更新这部分重复的内容；
        2、对于每一页新内容，我们在点击页码链接的时候再动态向服务器获取数据，服务器根据所请求的页码返回特定页的内容，替换掉当前显示的页面数据，这样可以减少网络带宽的使用，毕竟每次只返回一页的内容；
        3、对于数据更新频繁的分页系统，就按照上面的办法每次获取新数据；而对于不是很频繁的数据，我们提供一种客户端缓存机制来加快响应速度和减轻服务器压 力：通过一个全局的cache数组来存放服务器端之前返回的数据，在切换页面的时候，先查询缓存，如果没有命中，再向服务器发起异步请求，当响应到达的时 候，也会将此次数据存入缓存以供使用。

        按照上面的分析，可以发现这两种数据获取方式的模板有很多相似的地方，不同的只是缓存与否，我们可以将他们抽象成同一个类来实现，下面是javascript代码，我将在后面就一些需要注意的地方做详细讲解：

js 代码

/*
 * 异步模板，每次请求一个页面，并缓存浏览过的页面(可选)
 */
var mixin = new Tbi.StaticTemplate();   //用于mixin（混入）对象方法addNavigation
Tbi.AsyncTemplate = Class.create();
Tbi.AsyncTemplate.prototype = Object.extend(new Tbi.Template(),
    {
        initialize: function(wrap,items,catchUrl,option){
            this._init(wrap,items,catchUrl);
            this.mode = "async";
            //option为可选参数，设置初始显示页面以及是否缓存页面
            this.option = Object.extend({isCache:true},option);
            if(this.option.isCache){
                this.cache = new Array();   //缓存数组;
            }
        },

        // 实现父类抽象方法，向页面添加默认分页
        addPage: function(xmlhttp){
            var original = xmlhttp.responseText;
            var html = original.stripScripts();
            this.wrap.innerHTML = html;
            original.evalScripts();
        },

        // mixin(混入)StaticTemplate类的同名方法，向页面添加分页导航
        addNavigation: mixin.addNavigation, // 方法劫持，重用addNavigation添加分页导航

        // 导航链接点击事件处理函数，切换页面内容，同时改变导航链接样式（突出显示当前页）
        _changePage: function(event,link){
            var activeLink = $$('#TMPwrap div a[class="active"]')[0];
            if(activeLink != link){
                link.className = "active";
                activeLink.className = "";
                this._displayPage(link);
            }
            Event.stop(event);
        },

        // 根据缓存标志切换页面内容
        _displayPage: function(link){
            var page = link.firstChild.nodeValue;
            // 如果是第一页，且进行缓存的话，直接切换页面元素的可见性
            if(page==1 && this.cache){
                $("default").className = "";
                $("swap").className = "hidden";
            }
            // 否则，根据缓存标志，切换显示其他页（包括非缓存的默认页）
            else{
                $("default").className = "hidden";
                var oldPage = $("swap");
                swapPage = this._prompt("正在获取数据……");
                $("pages").replaceChild(swapPage,oldPage);
                this._showPage(page);
            }
        },

        // 显示提示信息
        _prompt: function(text){
            var swapPage = document.createElement("tbody");
            swapPage.id = "swap";
            var messageTr = document.createElement("tr");
            var messageTd = document.createElement("td");
            messageTd.colSpan = 100;
            messageTd.appendChild(document.createTextNode(text));
            messageTr.appendChild(messageTd);
            swapPage.appendChild(messageTr);
            return  swapPage;
        },

        // 根据缓存标志显示页面
        _showPage: function(page){
            if(this.cache&&this.cache["page"+page]){
                this._addPageContent(page);     //巧妙重用此方法达到添加页面的效果
            }
            else{
                this._catchPage(page);
            }
        },

        // 异步获取页面内容
        _catchPage: function(page){
            if(this.ajax){
                this.ajax.transport.abort();
            }
            this.ajax = new Ajax.Request(
                this.catchUrl,
                {
                    method: "get",
                    parameters: {"mode":"page","items":this.items,"page":page},
                    onComplete: this._addPageContent.bind(this,page)
                }
            );
        },

        // 添加各分页，并根据缓存标志进行页面缓存
        _addPageContent: function(page,xmlhttp){
            var xml = xmlhttp?xmlhttp.responseXML:this.cache["page"+page];
            if(this.cache&&!this.cache["page"+page]){
                this.cache["page"+page] = xml;
            }
            var oldPage = $("swap");
            var newPage = this._createPage(xml);
            $("pages").replaceChild(newPage,oldPage);
        },

        // 由异步返回的xml，或者缓存数组中的xml信息生成页面内容
        _createPage: function(xml){
            var newPage = document.createElement("tbody");
            newPage.id = "swap";
            var trs = $A(xml.getElementsByTagName("tr"));
            var context = this;
            trs.each(
                function(item,index){
                    var tr = document.createElement("tr");
                    var tds = $A(item.getElementsByTagName("td"));
                    tds.each(
                        function(item){
                            var value = item.firstChild?item.firstChild.nodeValue:"";
                            var td = document.createElement("td");
                            td.appendChild(document.createTextNode(value));
                            tr.appendChild(td);
                        }
                    );
                newPage.appendChild(tr);
                }
            );
            return newPage;
        }
    }
);

一些技巧和说明：

       1、AsyncTemplate由前面文章中的Template抽象父类派生而来，因此具有了父类的能力（与静态模板类StaticTemplate共用 _catchContent方法获取初始数据；具有可扩展的显示前、显示后事件入口），达到了代码复用的效果；
        2、initialize构造函数中，参数和父类是一样的，只是多了一个可选参数option，用于设置缓存标志（默认为true，即开启缓存），如果开启缓存，则初始化一个缓存数组cache 。这里注意一下默认参数的设置方式，这在Prototype风格的代码中很常见：

js 代码

this.option = Object.extend({isCache:true},option);

        3、接下来addPage实现父类的抽象方法，作为继承而来的_catchContent方法的回调函数，将处理服务器端返回的数据并显示模板初始页面， 也就是第一页。这里服务器端返回的数据格式如下，注意我们利用了Prototype的扩展evalScripts和stripScripts方法抽取执行 以及删除javascript脚本片段，以达到向客户端返回总页数的效果（后面将利用addNavigation方法和这个总数构建分页导航）：

xml 代码

<table id='pages'>
    <caption>动态分页模板</caption>
    <thead>
        <tr>
            <th>标题一</th>
            <th>标题二</th>
            <th>标题三</th>
            <th>标题四</th>
            <th>标题五</th>
            <th>标题六</th>
        </tr>
    </thead>
    <tbody id='default'>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>4</td>
            <td>4</td>
            <td>4</td>
            <td>4</td>
            <td>4</td>
        </tr>
    </tbody>
    <tbody id="swap" class="hidden">
        <!--新页面交换区-->
    </tbody>
</table>
<script type="text/javascript">
    template.pageTotal = 5;
</script>

这里的tempate是页面上实例化的动态模板对象名称，我们为其添加了一个pageTotal属性，以达到和静态模板类相似的效果，共用

js 代码

// mixin(混入)StaticTemplate类的同名方法，向页面添加分页导航
addNavigation: mixin.addNavigation, // 方法劫持，重用addNavigation添加分页导航

mixin是我们前面实例化的一个addNavigation方法添加导航。（如果觉得耦合太紧，可以修改一下将其赋值给window，两个类都用window对象的同名属性来调用addNavigation生成导航，我觉得没有什么必要）
        4、addNavigation方法，我们演示了如何混入（mixin）三方对象的实例方法来达到多继承的目的（这个方法完全可以抽象到父类Template中），其原理就是javascript的函数上下文是动态切换的：
StaticTemplate对象：

js 代码

var mixin = new Tbi.StaticTemplate();   //用于mixin（混入）对象方法addNavigation

用这种方式，我们可以给当前类混入任何三方对象的方法，javascript的灵活性在这里展现得淋漓尽致：）
          5、其他的代码就不详细介绍了，大家自己看。值得一提的是_catchPage方法中：

js 代码

onComplete: this._addPageContent.bind(this,page)

我们又一次用到了bind方法，这里传入的page参数，在函数调用的时候将放到自动传入的xmlhttp参数之前：

js 代码

_addPageContent: function(page,xmlhttp){
    var xml = xmlhttp?xmlhttp.responseXML:this.cache["page"+page];
    if(this.cache&&!this.cache["page"+page]){
        this.cache["page"+page] = xml;
    }
    var oldPage = $("swap");
    var newPage = this._createPage(xml);
    $("pages").replaceChild(newPage,oldPage);
}

另外我们在_showPage中重用_了addPageContent方法，实现了_addPageContent的双重身份：作为回调函数添加新页面内容，或者读取缓存显示页面内容，javascript的代码重用又得以体现：）

        6、服务器端返回的新页面数据，由于在IE中不能用inner系列属性直接设定（ie中出了td元素，对于其他的元素，inner系列属性都是只读的，汗一个），因此数据传输不能以内容为中心返回html，而只能返回xml格式：

xml 代码

<tbody>
    <tr>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>7</td>
        <td>7</td>
        <td>7</td>
        <td>7</td>
        <td>7</td>
    </tr>
    <tr>
        <td>8</td>
        <td>8</td>
        <td>8</td>
        <td>8</td>
        <td>8</td>
        <td>8</td>
    </tr>
</tbody>

        7、接收到服务器传回的上述xml数据后，不能直接用document.getElementsByTagName("tbody")[0]来获得 tbody后直接append到页面，貌似浏览器并不认为这是一个合法的HTML DOM，即使的确是个tbody，汗！只能迭代读取每一行数据来生成，郁闷。这里又遭遇了一个IE的bug：替换页面上的tbody元素，如果先 remove掉已有的，再append新的，如此重复操作，将导致IE发生非法操作，但firefox却一切正常。解决办法是用dom提供的 replaceChild方法来替换，就没有问题了，奇怪。

        至此，我们的动态模板也实现了，接下来将讲解服务器端的groovy简单实现，以及示例数据库，请参看：

AJAX表格分页模板(续):服务器端实现


最后我要发一发牢骚：javaeye的代码编辑器真的是bug多多，太郁闷了，我只是想编辑这篇文章，添加下一页的导航，居然搞得数据丢失了。另外，在编 辑已有文章的时候，如果有xml代码，则代码格式必定混乱！每个标签都会缺失关闭符号（左尖括号和斜杠）。而且，不认识Groovy代码，我只能选择 xml来显示，唉，又一个让我失望的blog系统……

• 
• 描述: 效果预览
• 大小: 18.9 KB

• 查看图片附件

分享到：

AJAX表格分页模板(续):服务器端实现 | 为aptana增加firefox预览tab

• 2007-05-18 13:10
• 浏览 11531
• 评论(5)
• 论坛回复 / 浏览 (3 / 14412)
• 查看更多

评论

5 楼 笨笨狗 2007-05-29  

zjwlzwq 写道

怎么代码还没有出来了,已经等了很久了,楼主是不是很忙呀,

早就方出来啦：）看这里

http://scriptfans.iteye.com/blog/82250

这是一个很粗略的原型，可以改进的地方很多，有时间再说了，希望多多指教！

4 楼 zjwlzwq 2007-05-29  

怎么代码还没有出来了,已经等了很久了,楼主是不是很忙呀,

3 楼 笨笨狗 2007-05-22  

这几天有点忙,闲下来把服务器端代码讲解一下,然后上传源码实例,请稍等,不好意思啦……

2 楼 gemscorpio 2007-05-22  

没有源码下啊

1 楼 Aryang 2007-05-18  

小狗出品,必属精品