Ajax 和 XML: 用于表格的 Ajax上


Asynchronous JavaScript? + XML (Ajax) 的一个强大功能是以动态方式向用户显示来自服务器的数据。使用表格、选项卡和滑动块等技术,探索将 Ajax 用于动态数据显示的多种技巧。

  访问 Ajax 技术资源中心,developerWorks 上所有有关 Ajax 的问题都可以在这里找到解答。

  当人们想到 Ajax 和 Web 2.0 时,他们通常会想起用户体验中的可视元素。它给人的感觉是工作良好, 无需页面刷新,这使 Ajax 特别引人关注。传统 HTML 应用程序的页面刷新会导致页面的闪烁并且需要重新加载,就是拥有最快的连接速度,也能够发现上下文的变化。

  在本文中,我将介绍多种技巧 — 包括使用 Ajax 和不使用的技巧 — 演示了用户体验设计中自由改变上下文的方法。我将从最简单的 Ajax 用户体验示例(即选项卡式窗口)开始。

  选项卡式窗口

  选项卡是将大量数据放置在相对少量的固定区域中的最简单方法。并且优秀的 Prototype.js JavaScript 库使得在动态 HTML (DHTML) 中构建支持 Ajax 的选项卡式窗口非常容易,如 清单 1 所示。要了解有关 Prototype 库的更多信息并下载它的副本以供使用,请参阅 参考资料。

  清单 1. index.html

 <html>
  <head>
  <script src="prototype.js"></script>
  </head>
  <body>
  <a href="javascript:void loadTab( 'tab1.html' )">Tab 1</a> |
  <a href="javascript:void loadTab( 'tab2.html' )">Tab 2</a> |
  <a href="javascript:void loadTab( 'tab3.html' )">Tab 3</a>
  <div id="content" style="padding:5px;border:2px solid black;">
  </div>
  <script>
  function loadTab( tab ) {
  new Ajax.Updater( 'content', tab, { method: 'get' } );
  }
  loadTab( 'tab1.html' );
  </script>
  </body>
  </html>

在该文件的顶部,我包含了 Prototype.js 库,它处理所有 Ajax 工作。然后,您会看到一个到各个页面的链接列表,每个链接都调用 loadTab 来更新页面的内容区域。内容区域是一个 <div>,其 ID 为 content。loadTab 函数 调用 Ajax.Updater 来用指定的 HTML 文件更新内容 <div>。

  清单 2 显示第一个选项卡 HTML 文件。所有其他文件 都类似于该文件。

  清单 2. tab1.html

  Tab 1

  当我在自己的浏览器中浏览该文件时,我看到类似 图 1 的某些内容。

  图 1. 初始选项卡页

  

  然后,当我单击第二个选项卡时,我会看到如 图 2 所示的内容。

  图 2. 单击第二个选项卡之后

  

  您可以通过对内容使用隐藏的 <div> 标签,然后关闭其可见性来实现此功能。此 Ajax 方法的优势在于仅在必要时创建和加载内容。因此,如果用户选择不查看内容,则构建内容的计算时间将会减少或消除。

  下面的三个示例是使用 Ajax 技巧(或类似于 Ajax 的某种技术)处理表格的所有方法。

  使用 Ajax 的基本表格

  我的第一个使用 Ajax 构建表格的演示是,通过 Ajax 向服务器发送 XML 请求,此技巧的价值是双重的。首先,它根据需要加载数据,并且可以适当地更新,这使得用户体验非常愉快。其次,该技巧需要一个 XML 数据源,该数据源不仅对 Ajax 代码有用,它对于希望通过 XML 使用您的数据的任何客户端都非常有价值

清单 3 显示了 XML 驱动的表格示例代码。

  清单 3. index.html

 <html>
  <head>
  <script src="prototype.js"></script>
  </head>
  <body>
  <table id="books">
  </table>
  <script>
  new Ajax.Request( 'books.xml', {
  method: 'get',
  onSuccess: function( transport ) {
  var bookTags = transport.responseXML.getElementsByTagName( 'book' );
  for( var b = 0; b < bookTags.length; b++ ) {
  var author = bookTags[b].getElementsByTagName('author')[0].firstChild.nodeValue;
  var title = bookTags[b].getElementsByTagName('title')[0].firstChild.nodeValue;
  var publisher =
  bookTags[b].getElementsByTagName('publisher')[0].firstChild.nodeValue;
  var elTR = $('books').insertRow( -1 );
  var elTD1 = elTR.insertCell( -1 );
  elTD1.innerHTML = author;
  var elTD2 = elTR.insertCell( -1 );
  elTD2.innerHTML = title;
  var elTD3 = elTR.insertCell( -1 );
  elTD3.innerHTML = publisher;
  }
  }
  } );
  </script>
  </body>
  </html>

  Ajax.Request 调用的 onSuccess 处理程序首先获取每个 book 元素,分解 XML 数据。然后,它从嵌入的标签中获取 author、 title 和 publisher 值。最后,它对每个 book 使用 insertRow 和 insertCell 将数据添加到表格中
清单 4 显示了本示例的 XML 代码。

  清单 4. books.xml

 <books>
  <book>
  <author>Jack Herrington</author>
  <title>Code Generation In Action</title>
  <publisher>O'Reilly</publisher>
  </book>
  <book>
  <author>Jack Herrington</author>
  <title>Podcasting Hacks</title>
  <publisher>O'Reilly</publisher>
  </book>
  <book>
  <author>Jack Herrington</author>
  <title>PHP Hacks</title>
  <publisher>O'Reilly</publisher>
  </book>
  </books>

  图 3 显示了生成的 DHTML 文件。

  图 3. XML 驱动的表格页

  

  本示例非常适合于小型结果集,但对于较大的结果集会怎样呢?

  使用 Ajax 的分页表格

  为了使用 Ajax 创建分页表格,我介绍一种稍有不同的技巧。这并不是因为 我必须使用这种技术 — 我可以轻松扩展上述 XML 技巧 — 但我希望本文中的这些示例可以向您展示各种技巧,您可以从中选择适合您的应用程序需求的技巧。

  在本例中,我使用一个 PHP 数据源,该数据源提供了分页表格的各个页面的 HTML 代码块。此 HTML 代码以 清单 5 开始

本文作者:



相关阅读:
Ubuntu应用程序菜单无法打开的解决办法
Windows Server 2008服务器系统数据安全
截获网站title标签之家内容的例子
JavaScript入门之事件、cookie、定时等
asp.net实现文件下载的代码
Phpcms2008网站内容管理系统免费开源
jquery控制listbox中项的移动并排序的实现代码
数据库开发总结(ADO.NET小结)
Oracle中七个疑难问题的解决方法
学习如何书写整洁规范的HTML标记
基于JQuery实现CheckBox全选全不选
Ubuntu成功登陆PDA,拓展移动市场
js类后台管理菜单类-MenuSwitch
再次研究下cache_lite
快速导航

Copyright © 2016 phpStudy |