用Glassfish和NetBeans编写第一个AJAX程序

本文主要是介绍用Glassfish和NetBeans编写第一个AJAX程序，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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");来实现的。主要代码如下表所示，请结合代码中的注释阅读。

客户端处理响应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();
    }

...

}

程序运行后的画面:

app

相关资源：