基于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/2283875027-pager.css"＞

＜link rel="stylesheet" type="text/css" href="/adsense/ui-resources/206017466-tax.css"＞

＜linkrel="stylesheet" type="text/css" href="/adsense/ui-resources/552546691-overviewreport.css"＞

＜link rel="stylesheet" type="text/css" href="/adsense/ui-resources/3864939285-LTR.css"＞

＜link rel="stylesheet" type="text/css" href="/adsense/ui-resources/3322369100-star.css"＞

＜script type="text/javascript"＞

function AS_windowOnLoad(handler) {

var prev = window.onload;

if (prev) {

window.onload = fun

}

web.xml 文件代码

＜?xml version="1.0" encoding="UTF-8"?＞

＜!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "java.省略/dtd/web-app_2_3.dtd"＞

＜web-app＞

＜servlet＞

＜servlet-name＞AjaxUse＜/servlet-name＞

＜servlet-class＞com.servlet.AjaxUse＜/servlet-class＞

＜/servlet＞

＜servlet-mapping＞

＜servlet-name＞AjaxUse＜/servlet-name＞

＜url-pattern＞/servlet/AjaxUse＜/url-pattern＞

＜/servlet-mapping＞

＜/web-app＞

AjaxUser.java 文件代码

package com.servlet;

import javax.servlet.*;

import javax.servlet.http.*;

import java.io.*;

import java.lang.Exception;

public class AjaxUse extends HttpServlet {

private ServletContext context;

public void init(ServletConfig config) throws ServletException {

this.context = config.getServletContext();

}

public void doGet(HttpServletRequest request, HttpServletResponseresponse)

throws IOException, ServletException {

String targetId = request.getParameter("id");

StringBuffer sb=new StringBuffer("＜message＞");

response.setContentType("text/xml");

response.setHeader("Cache-Control", "no-cache");

sb.append("＜data＞Hebei＜/data＞＜data＞Qinhuangdao＜/data＞");

sb.append("＜/message＞");

System.out.println(sb.toString());

PrintWriter out=response.getWriter();

out.write(sb.toString());

out.close();

}}

Ajax技术的组合创新，带给我们的不仅仅是页面的更新方法，更是编程观念和开发模式的创新。相信，Ajax技术必然会带给我们更为广泛的web应用。

注意事项

（1）保障Java 5与Apache Tomcat系统环境的正确配置。

（2）将ajax目录目录部署至webapps目录,如图:

（3）启动Tomcat,在IE地址栏软件的URL应为：127.0.0.1:8080/ajax/，如图：

（4）输入数字0时，服务器返回值为HeBei,输入数字1时，服务器返回QinHuangDao

（5）mdiv.innerHTML = "＜div＞"+str［document.getElementById('userid').value］+"＜/div＞"中红色部分是我新增加的，它的功能是从ID号为userid的文本框中取出值，函数parseMessage()的作用是将服务器返回的数组值进行显示与格式化，文本框中的数值代表着从服务端返回的某个数组元素值。

（6）可直接访问127.0.0.1:8080/ajax/servlet/AjaxUse,效果如图：

参考文献

［1］游丽贞等.Ajax引擎的原理和应用［Ｊ］.微计算机信息，2006,（22）:2-3.

［2］方俊.Ajax引擎设计和应用［Ｊ］.电脑与信息技术，2006,14(3).

［3］杨国瑞，张思博.基于AJAX的Web应用架构设计［Ｊ］.现代电子技术，2006,(15).

注：本文中所涉及到的图表、注解、公式等内容请以PDF格式阅读原文。