AJAX：Javascript模板处理技术

在 AJAX 应用中，用户界面更多的使用Javascript动态的生成，尤其是根据服务器端返回的数据动态的构造一个用户界面，结合我在上一个Blog中的技术《XML数据处理》，我们已经把服务器端传输的XML数据转换成未了Javascript可以直接访问的对象，那么接下来，如何在这个数据的基础上构造一个动态的用户界面呢？

 

1、   XML + XSLT：标准的技术，采用XML + XSLT，我们可以把XML转换成为另外的一个XML，或者HTML，从而利用element.innerHtml技术构造出动态的用户界面来。

Google提供了基于浏览器的XSLT(http://goog-ajaxslt.sourceforge.net/)，这是一个简化的，完全使用Javascript编写的XSLT转换程序，大小大约为70K左右。应该说，基于goog-ajaxslt技术，可以使用标准的XSLT技术来动态的构造用户界面，是一个很好的候选方案。

缺点：对浏览器的支持，好像IE5.0不支持

2、   采用如下的Javascript的模板技术

function JsTransform(jsObj, template);

 

JsTransform(pollDef, '<div id="poll_$(arg.id)">

    <div name="header">

       $(arg.description)

    </div>

    <div name="body">

       ${ this.foreach(pollDef.options,

           "<div> $(arg.name} ${arg.description}</div>" )

       }$

    </div>

    <div name="action">

   

    </div>

    </div>');

这种模式应用标准的Javascript技术。详细的规范我会进一步的设计。

3、   基于DOM的动态生成。

从某种角度而言，上述的模板完全可以转换成为等效的DOM操作，但代码量较大，而且，维护和可读性相对要困难得多。