RSS
热门关键字:  Linux  图形  项目管理  LAMP  java
当前位置 : 主页>开源技术>AJAX技术>列表

Ajax技术原理简介

来源:bea 作者:sherman 时间:2007-10-21 点击:

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

字串8

图3. 可用的服务

字串1

  单击ajaxSampleSvc链接,查看有关如何在HTML页面内直接使用服务的示例实现。其中包含的两个JavaScript文件完成了大部分的功能:
<script type='text/javascript' 
   src='/ajax-demo/dwr/interface/ajaxSampleSvc.js'></script>
<script type='text/javascript' 
   src='/ajax-demo/dwr/engine.js'></script>
 
字串1

ajaxSampleSvc.js是动态生成的: 字串1

function ajaxSampleSvc() { }

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

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

字串8

function castVote(rank) {
  ajaxSampleSvc.castVote(processResponse, rank);
}
function processResponse(data) {
 var voteText = "

Thanks for Voting! 字串3

" + "

Current ranking: " + data.voteAverage + " out of 5

字串2

" + "

Number of votes placed: " + data.numberOfVotes + "

字串1

"; $('votes').innerHTML = voteText; } 字串8

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

下一步工作 字串7

   在后续文章中,我将继续有关Ajax的话题,涉及下面这些方面: 字串4

  • Ajax最佳实践

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

  • 管理跨请求的状态

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

字串4

  • 调试技巧

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

结束语

字串4

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

字串7

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

字串4

下载

字串5

  本文中演示的应用程序源代码可供下载:ajax-demo.war(1.52 MB)。 字串7

参考资料

字串8

原文出处 字串2

An Introduction To Ajax 字串1

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

字串3

最新评论共有 0 位网友发表了评论
发表评论
评论内容:不能超过250字,需审核,请自觉遵守互联网相关政策法规。
用户名: 密码:
匿名?
注册