用Glassfish和NetBeans编写第一个AJAX程序
2010-03-02 00:31
507 查看
By Jason.Huang@sun.COM , 8/1/07 |
不需要安装就可以使用我们的应用.
当然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); } |
当客户端接受到来自服务器的请求之后,通过回调方法来解析处理结果,并通过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>"; } } |
在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/
相关文章推荐
- 用Glassfish和NetBeans编写第一个AJAX程序
- 在DSP6000中怎样编写您的第一个程序(转)
- [汇编语言学习笔记][第四章第一个程序的编写]
- 基于UT4418编写自己的第一个Android程序 (五)
- 自己编写的第一个程序
- 编写第一个 4000 Java 程序:
- 【Android开发笔记】3.编写第一个Android程序
- 创建第一个AJAX程序
- Objective-C学习笔记(三)——用Objective-C编写第一个程序:Hello,World!
- 以一个初学者的眼光看自己编写的第一个j2EE程序
- .NET 学习笔记(二)——用vs编写的第一个程序
- 用着色器编写第一个程序
- ExtJS 学习笔记一(安装Eclipse的Spket插件并编写第一个ExtJS程序)
- 编写运行第一个node.js程序
- JavaScript强化教程——编写第一个jQuery程序
- ssh-----编写第一个Struts2程序
- 用Free Pascal IDE编写第一个程序Pascal版的hello world
- 第一个android访问java编写的webservice程序
- AJAX入门教程--第一个Helloword程序
- 004_Eclipse编写第一个Java_Web程序