面向Java开发人员Ajax：构建动态的Java应用程序

  作为J2EE开发人员，我们经常关注“后端机制(backend mechanics)”。我们通常会忘记J2EE成功之处在于WEB应用程序方面。许多原因使得人们喜欢利用WEB开发应用程序，但主要原因还是因为其易于部署的特点，允许站点以尽可能底的成本拥有上百万的用户。我们在后端投入太多的精力，使得我们在WEB用户界面对用户的相应灵敏方面投入不足。

                 本文介绍一种方法，Ajax，使用它可以构建更加更为动态和响应更加灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通讯的组合。Ajax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前，Web站点强制用户进入提交/等待/重新显示范例。用户的动作总是与服务器的“思考时间”同步。Ajax提供了与服务器异步通讯的能力，从而使用户从请求/响应的循环中解脱出来。借助Ajax，用户可以在单击按钮时，使用JavaScript和DHTML立即更新UI，并向服务器发出异步请求，以执行查询或更新数据库。当请求返回时，可以利用JavaScript和CSS来相应的更新UI而不是刷新整个页面。

　　          定义Ajax，Ajax不是一种新技术，而是几种蓬勃发展的几种强大技术以新的方式组合而成，Ajax包括：基于XHTML和CSS标准的表示；使用Document Object Model进行动态的显示和交互；使用XML Request与服务器进行异步通讯；使用JavaScript绑定一切。

                 Ajax的工作原理，Ajax的核心是JavaScript和XMLHttpRequest。该对象在Internet Explorer5中首次引入，它是一种支持异步请求的技术。简单的说：XmlHttpRequest使你可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性能。下面是使用Ajax完成的功能：1、动态更新购物车的物品总数，无需用户单击Update并等待服务器发送整个页面。2、提升站点的性能，这是通过减少从服务器下载的数据量来实现的。例如：当更新购物车一个物品的数量时，会重新载入整个页面，这必须下载32K的数据，而使用Ajax计算新的总量，服务器只需要返回新的总量值，因此所需要的带宽仅仅为原来的百分之一。3、消除了用户每次输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。

                 从Ajax的序列的起点开始，创建和分派来自浏览器的XMLHttpRequest。但不同的浏览器创建XMLHttpRequest的方法各不相同。下列JavaScript的代码，可以检测出浏览器要使用的正确方法，并返回一个可以使用的XMLHttpRequest。

<script language="JavaScript">
<!--
//定义xmlHttp全局对象
var xmlHttp = null;
//根据不同浏览器创建方法的不同进行区分,确定xmlHttp对象的顺利创建
function createXMLHttpRequest(){
    if(window.ActiveXObject){
     xmlHttp = new window.ActiveXObject("Microsoft.XMLHTTP");
    }else if(window.XMLHttpRequest){
     xmlHttp = new window.XMLHttpRequest();
    }
}
//定义一个函数，可以让JS脚本可以去动态的访问后台的代码
function queryMess(){
    //定义一个要查询所需要的参数
    var jrnl_id = document.getElementById("jrnl_id").value;
    if(jrnl_id==""){
     return ;
    }
    //定义JS脚本要访问的地址，从访问的地址获取数据来源
    var url = "../jsp/gywork/getInfo.jsp?user_id="+jrnl_id;
    //调用创建xmlHttp对象的函数，来创建一个对象
    this.createXMLHttpRequest();
    //事先给xmlHttp对象获取数据返回后一个处理数据的函数，即：回调函数

    //xmlHttp.onreadystatechange属性，是xmlHttp对象的状态改变所触发事件的事件处理程序

    xmlHttp.onreadystatechange = dealDate；
    //调用xmlHttp对象去访问地址，或后台内容获取数据
    xmlHttp.open("GET",url,true);
    //xmlHttp.send(null);用来发送信息参数，是对于发送方法为post，若发送请求的方法为get
    //则发送的内容为null，xmlHttp.open("POST"，"login",true);发送请求的地址信息方式为
    //XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlHttp.send(null);
}
//定义一个回调函数，用作xmlHttp对象获取数据后进行处理的操作
function dealDate(){
    /*xmlHttp.readyState属性，是xmlHttp对象的对象状态值，0表示未初始化，1表示正在加载，
     2表示加载完毕，3表示开始进行交互，4表示整个处理完成
    */
    if(xmlHttp.readyState == 4){
     /*xmlHttp.status从服务器返回的数字代码，404表示未找到，200表示就绪，不管是否获取
       到数据，200表示已经顺利完成访问服务器后，顺利返回未发生异常
     */
     if(xmlHttp.status == 200){
      /*数据返回后可以使用xmlHttp.responseText属性获取数据，但是xmlHttp.responseText
      返回的是一个字符串，对于比较复杂的数据结构可以利用xmlHttp.responseXML属性来进行
      处理数据,如果返回值是一条记录，则可以处理数据的XML样式为：
      <?xml version="1.0" encoding="gb2312" ?>
      <result>根节点
       <username>sa</username>子节点
       <userid>23</username>子节点
      </result>
      可以根据节电名称来获取节点值，例如：*/
      var responseXML = xmlHttp.reponseXML;
      var username = responseXML.getElementsByTagName("username")[0].firstChild.nodeValue;
      var userid = responseXML.getElementByTagName("userid")[0].firstChild.nodeValue;
      /*
      若返回值为一组数据，则可以处理数据的XML样式为：
      <? xml version="1.0" encoding="gb2312" ?>
      <result>根节点
       <users>子节点
        <name>sa</name>
        <id>12</id>
       </users>
       <users>
        <name>ss</name>
        <id>22</id>
       </users>
      </result>对XML进行解析来获取数据
      */
      var responseXML = xmlHttp.reponseXML;
      //获取根节点，获取根节点的节点名称：var domName = responseXML.documentElement.tagName;
      var xmldom = responseXML.documentElement;
      var len = xmldom.childNodes.length;
      for(var i=0;i<len;i++){
       var child = xmldom.childNodes.item(i);//根据根节点的长度，遍历创建子节点对象child
       for(var j=0;j<child.childNodes.length;j++){ //相当于users节点
        var node = child.childNodes.item(j);
        document.writeln(node.tagName+"||"+node.text);
       }          
      }
      /*
      打印结果为：
      sa || 12
      ss || 22
      */
     }
    }else{
     alert("获取数据发生错误!");
    }
}
//-->
</script>

页面所请求得Jsp页面源代码如下，其中包括如何处理运算后得到的结果集：

<%@ page contentType="text/html;charset=gb2312" %>

<%@ page import="java.util.List" %>
<%@ page import="java.util.Map" %>
<%@ page import="com.yc.ycportal.blockimp.service.CommonService" %>
<%@ page import="com.yc.ycportal.util.GetRaq"%>

<%

response.setContentType("text/xml");  
         


   String userId = request.getParameter("userId");

   String organ = new GetRaq(session).getParamid();
   //Create the response XML
   if (userId != null && !"".equals(userId.trim())) {
    List gyList = CommonService.getInstance().getDynamicTable("select * from dic_counter where counter_id='" + userId + "' and organ_id='"+organ+"'");
  
    if (gyList != null && gyList.size() == 1) {
     Map gyMap = (Map) gyList.get(0);
     String gyName = (String) gyMap.get("COUNTER_NAME");//柜员姓名
     String organId = (String) gyMap.get("ORGAN_ID");//柜员所属行号

     List organList = CommonService.getInstance().getDynamicTable("select * from dic_organ where organ_id='31" + organId + "'");
       if( organList != null && organList.size() == 1) {
        Map organMap = (Map) organList.get(0);
        String organName = (String) organMap.get("ORGAN_NAME");//获取柜员所属行名

        //组织需要返回的xml

        StringBuffer xml = new StringBuffer("<?xml version=\"1.0\" encoding=\"gb2312\" ?><result><queryResult>success</queryResult><name>").append(gyName).append("</name><bank_id>").append(organId).append("</bank_id><bank_name>").append(organName).append("</bank_name></result>");

        //Send the response back to the browser
        response.getWriter().write(xml.toString());
       }else{
         response.getWriter().write("<result><queryResult>failed</queryResult></result>");
        }
    }else{
      response.getWriter().write("<result><queryResult>failed</queryResult></result>");
     }
   }else{
      response.getWriter().write("<result><queryResult>failed</queryResult></result>");
   }

%>