基于Ajax技术网页更新设计与实现.docVIP

基于Ajax技术网页更新设计与实现 　　摘 要：简要介绍了Ajax技术基本原理与功能,并通过按钮更新实例，探讨了在Java Serverlet技术条件下，利用AJAX模式实现Web页面数据的动态更新的一般方法。? 　　关键词：AJAX；XMLHttpRequest；XML；动态更新? 　　中图分类号：TP393.07文献标识码：A文章编号：1672-3198（2008）01-0272-02?? 　　 　　传统的web页面重载机制已经严重的制约着网络应用软件的开发，因此，关于页面的载入技术的研究也就成为web应用程序设计的关键。然而这种状况一直没能彻底改变，直到Ajax 技术的出现。AJAX 采用独特的远程脚本调用技术，可以异步的实现页面数据的更新，彻底解决了传统页面的重载问题，开启了全新的网页应用程序设计模式。其典型应用有google的GMail、GoogleSuggest等。在国内，Ajax技术已经成功的应用到网易的邮件系统。然而，通过典型的应用我们也不难发现一个问题，ajax成熟的应用主要集中在一些有相当实力的公司。对于大众化的应用来讲，探索一下ajax技术的应用模式特别是页面的更新模式设计，无疑有助于Ajax技术推广和发展。? 　　Ajax技术的基本原理：Ajax是一个结合了Java技术、XML、以及JavaScript的web开发模式，可以让你构建基于Java技术的Web应用。和传统的web更新技术不同，如图所示，相当于在客户端和服务器之间加了一个中间层，即Ajax引擎。这样，并不是所有的用户请求都提交给服务器，一些数据的验证和处理由Ajax自己来做，只有确实需要从服务器读取新数据时，才由客户端通过JavaScript调用Ajax引擎向服务器端发出Http请求，但它并不等待请求的响应，用户可以继续浏览或交互。当服务端的数据以XML形式返回时，Ajax引擎接收数据，并指定JavaScript函数来完成相应的处理或页面的更新，而不是刷新整个页面，从而实现用户操作与服务器响应的异步化。? 　　基于Ajax技术的页面数据更新的实例。? 　　Ajax技术是组合技术，它只是一个工作模式但并未限定具体的方法。下面我们通过设计一个按钮更新页面实例来探讨在Java Servlet技术条件下，利用Ajax实现页面数据动态更新的方法，共需要创建三个文件，代码如下：? 　　Index.Jsp 文件代码：? 　　＜html＞＜head＞＜meta http-equiv=content-type content=text/html; charset=UTF-8＞? 　　＜script src=/adsense/static/en_US/urchin.js type=text/javascript＞＜/script＞? 　　＜script type=text/javascript＞? 　　_uacct=UA-18006-1;? 　　_utcp=/adsense/;? 　　_uanchor=1;? 　　_uccn=sourceid;? 　　_ucmd=medium;? 　　_ucsr=subid;? 　　_uctr=term;? 　　_ucct=content;? 　　_ucid=u_id;? 　　_ucno=nooverride;? 　　urchinTracker();? 　　＜/script＞? 　　＜title＞Google AdSense? 　　推介＜/title＞? 　　＜link rel=stylesheet type=text/css href=/adsense/ui-resources/4281405901-style.css＞? 　　＜link rel=stylesheet type=text/css href=/adsense/ui-resources/596854136-tabnavbar.css＞? 　　＜link rel=stylesheet type=text/css href=/adsense/ui-resources/2269670069-submenu.css＞? 　　＜link rel=stylesheet type=text/css href=/adsense/ui-resources/1064069793-reports.css＞? 　　＜link rel=stylesheet type=text/css href=/adsense/ui-resources/2283875027r.css＞? 　　＜link rel=stylesheet type=text/css href=/adsense/ui-resources/206017466-tax