论文部分内容阅读
摘 要：简要介绍了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" "http://java.sun.com/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应为：http://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）可直接访问http://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格式阅读原文。
关键词：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" "http://java.sun.com/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应为：http://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）可直接访问http://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格式阅读原文。