面向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>");
}

%>