| By Jason.Huang@sun.COM , 8/1/07 |
|
 |
B/S结构的应用似乎已经成为了默认的方式,大家每天开启关闭最多的应用我想应该是您的Web浏览器.B/S结构的应用最大的优点就是方便,客户端什么也
不需要安装就可以使用我们的应用.
当然B/S结构的一些特点也对基于这种方式应用的开发和设计产生了影响.
最典型的问题就是每次和服务器的交互都需要发起一次请求,传统的方式下需要把整个表单进行提交,处理完成后需要把表单再次显示.
在实际应用中,我们常常需要对Web页面的局部做动态处理,然后最后在做整个表单的提交处理.
例如,在提交注册信息之前,先检查注册用户名是否可以使用.
不知道你是否参加2006年在北京举行的Sun Techday,在James
Gosling演讲之后来自Sun公司TE部门的技术传道士们做了精彩的技术演示,其中一个演示是关于PetStore.
经典PetStore现在已经变得生动了许多,其中一个主要的技术就是采用了AJAX.
AJAX使得Web应用保持了"瘦"客户端简单的优点,同时也增加了"胖"客户端操作性好的优点.
AJAX已经不是新鲜名词了,这里就不做介绍了,让我们用一个简单的例子来演示如何采用Glassfish和NetBeans编写第一个AJAX程序.
Glassfish安装
为了运行这个例子,您需要下载并启动Glassfish.
下载Galssfish地址：
https://glassfish.dev.java.net/downloads/v1_ur1-p01-b02.html
安装方法：
- java -Xmx256m -jar glassfish-installer-v1_ur1-p01-b02.jar
- cd glassfish
- ant -f setup.xml
说明：为了完成安装，你需要下载JDK和ANT。
启动方法：
- cd glassfish
- ./bin/asadmin start-domain
启动后如下图所示：
NetBeans 安装
同时为了提高开发效率,推荐大家使用开源的IDE工具:
NetBeans,使用NetBeans可以和主流的应用服务器相结合完成JavaEE程序的开发.
NetBeans的下载地址： www.netbeans.org
下面是用NetBeasn开发的一个应用程序的一个界面：
AJAX程序开发
虽然AJAX应用不需要每次提交整个页面（或者某个页面的iframe部分），但是实际上在开发的时候我们还是要进行
客户和服务器端程序的通讯。只不过，和传统的方式不同的是，j
我们不再是通过表单(form)的方式来提交数据给服务器端，而是通过Java Script在画面背后发出请求和处理响应结果并更新浏览器中的画面。
在本文中，通过一个简单常用的Case来说明基于Glassfish和NetBeans的Ajax程序开发过程。在这个Case中，我们实现一个
用户注册时候，ID是否重复的检查功能。传统方式下，我
们会提交用户填写的整个注册表单，这样数据量较大而且需要做一些数据再次显示的处理，比较麻烦。
开发步骤：
我们总共需要开发3个重要的程序。在客户端，发送请求和处理服务器响应的两个Java Script以及一个处理请求的Servlet。
- 客户端发送请求Java Script
根据浏览器的不同，客户端发送请求的主要共呢功能是通过window.XMLHttpRequest或者ActiveXObject
("Microsoft.XMLHTTP");来实现的。主
要代码如下表所示，请结合代码中的注释阅读。
|
function validate() { // 获取用户填写的ID var idField = document.getElementById("userid"); // 构建处理请求的Servlet对应的URL var url = "ValidateServlet?id=" + escape(idField.value); // 根据浏览器不同创建不同的请求对象(req) if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } // 准本通过请求对象发送请求 req.open("GET", url, true); // 为本次请求注册回调方法,该回调方法就是用于处理服务器端响应结果的Java Script方法 req.onreadystatechange = callback; // 发送请求 req.send(null); } |
- 客户端处理响应Java Script
当客户端接受到来自服务器的请求之后,通过回调方法来解析处理结果,并通过DHTML更新画面.其主要代码如下表所示:
|
// 当服务器的响应返回至浏览器时,浏览器会调用本方法 function callback() { // 判断服务器的处理状态是否正常 if (req.readyState == 4) { if (req.status == 200) { // update the HTML DOM based on whether or not message is valid parseMessage(); } } } // 解析来自服务器的数据 function parseMessage() { var message = req.responseXML.getElementsByTagName("message")[0]; setMessage(message.childNodes[0].nodeValue); } // 根据服务器处理结果更新画面 function setMessage(message) { mdiv = document.getElementById("userIdMessage"); if (message == "invalid") { mdiv.innerHTML = "<div style=/"color:red/">Invalid User Id</ div>"; } else { mdiv.innerHTML = "<div style=/"color:green/">Valid User Id</ div>"; } } |
- Server端的Servlet
在Glassfish Server端，我们需要开发一个Servlet来处理来自客户端Java
Script的请求。和传统方式不同的是，在这个Servlet中，我
们既没有直接返回HTML格式的信息，也没有进行页面的跳转控制。
这个Servlet的重点是返回处理信息的片段。Servlet的核心代码如下表所示:
|
public class ValidateServlet extends HttpServlet { private ServletContext context; // 为了简单,我们把已经存在的ID保存在一个HashMap中. private HashMap users = new HashMap(); // Account Info public void init(ServletConfig config) throws ServletException { this.context = config.getServletContext(); users.put("jason","account data for jason"); users.put("duke","account data for duke"); } /** Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods. * @param request servlet request * @param response servlet response */ protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("Request received!"); PrintWriter out = response.getWriter(); // 获取用户输入的ID String targetId = request.getParameter("id"); // 判断用户ID是否存在 if ((targetId != null) && !users.containsKey(targetId.trim())) { //用户ID不存在 response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); out.write("<message>valid</message>"); } else { //用户ID存在 response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); out.write("<message>invalid</message>"); } out.close(); } ... } |
程序运行后的画面:
相关资源：
-
下载程序源
码 - http://developers.sun.com/ajax/
- http://java.sun.com/javascript/