Ajax技术简介(5)

作者: David Teare 出处:dev2dev.bea.com.cn　 (  ) 砖  (  ) 好  评论 ( ) 条 　进入论坛

更新时间：2005-11-17 13:49
关 键 词：技术  AJAX
阅读提示：本文介绍一种方法，Ajax，使用它可以构建更为动态和响应更灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。本文也演示了启用这种方法是多么简单。

做完这些之后，可以加载http://localhost:7001/ajax-demo/dwr，看看哪些服务可用。结果如下：

图3. 可用的服务

单击ajaxSampleSvc链接，查看有关如何在HTML页面内直接使用服务的示例实现。其中包含的两个JavaScript文件完成了大部分的功能：

ajaxSampleSvc.js是动态生成的：

function ajaxSampleSvc() { }

ajaxSampleSvc.castVote = function(callback, p0)
{ 
  DWREngine._execute(callback, '/ajax-demo/dwr', 
 'ajaxSampleSvc', 'castVote', p0);
}

现在可以使用JavaScript对象ajaxSampleSvc替换所有的XmlHttpRequest代码，从而重构raw-ajax.html文件。可以在dwr-ajax.html文件中看到改动的结果；下面是新的JavaScript函数：

function castVote(rank) {
  ajaxSampleSvc.castVote(processResponse, rank);
}
function processResponse(data) {
 var voteText = "
Thanks for Voting!
"
    + "
Current ranking: " + data.voteAverage 
    + " out of 5
" 
    + "
Number of votes placed: " 
    + data.numberOfVotes + "
";
 502 502'votes').innerHTML = voteText;       
}

惊人地简单，不是吗？由ajaxSampleSvc对象返回的Article域对象序列化为一个JavaScript对象，允许在它上面调用诸如numberOfVotes()和voteAverage()之类的方法。在动态生成并插入到DIV元素“votes”中的HTML代码内使用这些数据。

下一步工作

在后续文章中，我将继续有关Ajax的话题，涉及下面这些方面：

• Ajax最佳实践

像许多技术一样，Ajax是一把双刃剑。对于一些用例，其应用程序其实没有必要使用Ajax，使用了反而有损可用性。我将介绍一些不适合使用的模式，突出说明Ajax的一些消极方面，并展示一些有助于缓和这些消极方面的机制。例如，对Nerfilix电影浏览器来说，Ajax是合适的解决方案吗？或者，如何提示用户确实出了一些问题，而再次单击按钮也无济于事？

• 管理跨请求的状态

在使用Ajax时，最初的文档DOM会发生一些变化，并且有大量的页面状态信息存储在客户端变量中。当用户跟踪一个链接到应用程序中的另一个页面时，状态就丢失了。当用户按照惯例单击Back按钮时，呈现给他们的是缓存中的初始页面。这会使用户感到非常迷惑！

• 调试技巧

使用JavaScript在客户端执行更多的工作时，如果事情不按预期方式进行，就需要一些调试工具来帮助弄清出现了什么问题。

结束语

本文介绍了Ajax方法，并展示了如何使用它来创建一个动态且响应灵敏的Web应用程序。通过使用DWR框架，可以轻松地把Ajax融合到站点中，而无需担心所有必须执行的实际管道工作。

特别感谢Getahead IT咨询公司的Joe Walker和他的团队开发出DWR这样神奇的工具。感谢你们与世界共享它！

下载

本文中演示的应用程序源代码可供下载：ajax-demo.war（1.52 MB）。

参考资料

• http://www.getahead.ltd.uk/dwr——Getahead IT咨询公司。
• Jesse James Garrett所撰写的“Ajax: A New Approach to Web Applications”（Adaptive Path，2005年二月）。
• “Dynamic HTML and XML: The XMLHttpRequest Object”（Apple Developer Connection）。

原文出处      An Introduction To Ajax

http://dev2dev.bea.com/pub/a/2005/08/ajax_introduction.html

共5页: 上一页 [1] [2] [3] [4] 5

【内容导航】

滚动新闻　术语词典　问题悬赏

我也说两句