使用 XSL 进行客户端数据绑定

• 下载源代码 - 10 Kb

引言

AJAX 是一种新的流行技术，用于开发富客户端和高响应度的 Web 应用程序。数据处理是 UI 中的一个重要参数。排序通常是在所有应用程序中都需要的最常见的操作。用户可以按照他们想要的方式查看数据。

考虑一个需要在 UI 网格中显示的客户数据的例子。用户每次想要时都需要对数据进行排序。排序操作的发生可能很频繁。所有数据都可以通过 Ajax 调用以 XML 格式从 Web 应用程序或 Web 服务获得，每次用户执行排序操作时都访问 Web 应用程序/Web 服务是毫无意义的。这听起来非常昂贵，不是吗？因此，服务器端数据绑定可以被客户端数据绑定取代。

伪代码

1.Load the xml data into client and cache as xml doc.
2.Load the xsl into client and cache the same as xsl doc.
3.Generate the html by tranforming the xsl and xml doc.
  Now user clicks on header to sort on that column...
4.Inject some data into the xsl doc using javascript to make a sort on the user selected column.(client side operation)

客户端 XML

从 Web 服务或 Web 应用程序生成的客户 XML：
<NewDataSet>
<Table>
<CustomerID>ALFKI</CustomerID>
<CompanyName>Alfreds Futterkiste</CompanyName>
<ContactName>Maria Anders</ContactName>
<ContactTitle>Sales Representative</ContactTitle>
<Address>Obere Str. 57</Address>
<City>Berlin</City>
<PostalCode>12209</PostalCode>
<Country>Germany</Country>
<Phone>030-0074321</Phone>
<Fax>030-0076545</Fax>
</Table>
........
</NewDataSet>
服务器返回的 XML 被加载到客户端 XML 文档中。XSL 也遵循相同的过程。

    if (customer_xml == null)
    {
        customer_xml = Loadxmlorxsl('customers.xml');    
    }
    
    if (customer_xsl == null)
    {
        customer_xsl = Loadxmlorxsl('customers.xslt');    
        
    }    

customers.xml 和 customers.xsl 可以被 Web 应用程序或 Web 服务的 URL 替换。现在完成了伪代码的前两个步骤。示例 XML 和 XSL 在 ZIP 文件中可用。加载文档后，可以进行转换以生成 HTML，因为 XSL 具有执行此操作的逻辑。

    document.all["customercontent"].innerHTML = customer_xml.transformNode(customer_xsl);

排序

现在，我们如何在客户端以 XML 文档的形式使用 XML 和 XSL 来执行排序，而不是依赖于远距离的数据呢？在我知道如何完成它之后，我永远不会说这很难。XSL 文件有一个 <xsl:param> 用于接受排序键和排序顺序（升序或降序）。基于排序键和排序顺序对数据进行排序的逻辑都包含在 XSL 中。每次用户单击标题进行排序时，只需调用 JavaScript 函数 Sort() 即可。"customer_xsl.getElementsByTagName("xsl:param")[0].text"。这些行只是使用 JavaScript 将排序键和排序顺序注入到 XSL 文档中，请记住它们永远不会保存在服务器中，我们只使用客户端 XSL 文档。因此，当用户使用不同的参数进行新的数据搜索时，我们只需要获取 XML 数据，避免 XSL。因此，排序顺序和排序列仍然保持用于新的搜索。

function Sort(column)
{    
    
    if (document.getElementById(column).value == 'ASC')
        document.getElementById(column).value = 'DESC'
    else
        document.getElementById(column).value = 'ASC'
                
    customer_xsl.getElementsByTagName("xsl:param")[0].text = column;
    customer_xsl.getElementsByTagName("xsl:param")[1].text = document.getElementById(column).value;
    document.all["customercontent"].innerHTML = customer_xml.transformNode(customer_xsl);
}

可能的扩展

过滤与排序也很常见，仍然需要相同的数据注入到 XSL 中，并且非常欢迎你使用类似 customer_xsl.getElementsByTagName("xsl:apply-templates") 的代码将数据插入到 XSL 中的任何标签中。此外，我们对 XML 执行的所有 XPath 查询都可以对 XSL 执行。

希望这篇文章对那些希望进行客户端数据绑定和排序的人有用。

注意

严格来说，它将与 IE 浏览器一起使用，并且需要 ActiveXObject "Microsoft.XMLDOM"

历史

2006 年 8 月 6 日 - 首次提交。