J2EE下使用AJAX(一) 最原始的AJAX

新一篇:  J2EE下使用AJAX(二) Prototype封裝

本方法不藉助於任何的框架及開源項目，體現AJAX在J2EE中的實現如下功能，由頁面向服務器發出請求，返回一個字符串，客戶端頁面顯示該字符串。

1.1 Servlet

響應客戶端請求的Servlet類爲一普通的Servlet，關鍵在於使用了ServletOutputStream控制輸出流，該輸出即可則客戶端獲取。代碼如下所示：

package lld.test.ajax;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class SimpleAjaxServlet extends HttpServlet
...{
    private static final long serialVersionUID = -668635463669389981L;

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException
    ...{
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException
    ...{
        String uname = req.getParameter("uname");
        ServletOutputStream os = resp.getOutputStream();
        os.print("Hello, " + uname);
        System.out.println("Hello, AJAX!");
    }
}

如果客戶端傳入參數 uname=London，則該Servlet將字符串“Hello, London”輸出至客戶端。
(請點擊左邊廣告)

1.2 JSP

在JSP中使用如下HTML代碼發送請求

<input type="button" value="Simple" onclick="simple_ajax()" />

關鍵在於JavaScript代碼的寫法，如下所示：

var bXmlHttpSupport = (typeof XMLHttpRequest != "undefined" || window.ActiveXObject);

function GetXMLHttpRequest() 
...{
    var oRequest;
    if(window.ActiveXObject)
    ...{
        var arrSignatures = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",
                             "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
                             "Microsoft.XMLHTTP"];
                         
        for (var i=0; i < arrSignatures.length; i++) ...{
            try ...{        
                oRequest = new ActiveXObject(arrSignatures[i]);            
                return oRequest;        
            } catch (oError) ...{ /**//*ignore*/ }
        }          
    }
    else if(window.XMLHttpRequest)
    ...{
        oRequest = new XMLHttpRequest();
        return oRequest;
    }

    throw new Error("MSXML is not installed on your system.");               
}

function simple_ajax()
...{
    if(bXmlHttpSupport)
    ...{
        var frm = document.form1;
        var sUrl = "SimpleAjax.do?uname=London";
        var oRequest = GetXMLHttpRequest();
        oRequest.onreadystatechange = function() 
        ...{
            if(oRequest.readyState == 4) 
            ...{
                alert(oRequest.responseText);
            }
        };
        oRequest.open('POST', sUrl);
        oRequest.send(null);
    }
}

其中的XMLHttpRequest用於獲取發送異步XML請求的ActiveX對象，可作爲一個通用函數在項目中使用。

在simple_ajax函數中，關鍵在於定義XMLHttpRequest.onReadyStateChange事件，指定請求返回後的動作，在此我只是簡單地顯示從服務器返回的結果。