AJAX1

关于j2ee中的AJAX技术
关于J2EE中AJAX异步传输技术相比大家一定很熟悉，今天我根据最近自己学习的心得体会详细的介绍一下AJAX技术在Java WEB中的实现。
    首先我先简要的介绍一下AJAX技术。
    AJAX英文名为：Asynchronous JavaScript and XML.（异步JavaScript和XML）
其实它表示的是一种异步通信机制，这种机制的实现主要综合的运用JavaScript和XML技术。下面我们就通过一个简单的实例详细的说明一下。
下面我们看一下它是怎么运用JavaScript和XML技术实现的？
  <script language="javascript">
//定义一个变量用于存放XMLHttpRequest对象
var xmlHttp;

//该函数用于创建一个XMLHttpRequest对象
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}

</script> 
这段代码就是利用JavaScript创建了一个XMLHttpRequest对象，这个对象可以说相当于JavaSocket编程中的Socket对象它可以同对应的服务端进行通信（数据传输）
。
创建完XMLHttpRequest对象后接着就要对其应用。
下面的一段代码就是对其进行的具体应用：
function updateSelect(){
var selected = document.all.slt1.value;//得到省份列表的当前选值
//创建一个XMLHttpRequest对象
createXMLHttpRequest();调用前面的函数创建XMLHttpRequest对象
//将状态触发器绑定到一个函数
xmlHttp.onreadystatechange = processor1;
//通过GET方法向指定的URL建立服务器的调用这个指定的URL可以是很多类型的比如：一个XML文档，一个Action类，一个JavaBean等等
xmlHttp.open("GET", "CreateXML?selected="+selected);
//发送请求
xmlHttp.send(null);
}
这里的CreateXml是一个服务端的Servlet类（自己创建的）相当于JSP文件它附带一个请求参数。我们可以理解为一个附带请求参数的JSP。
我们通过在客户端运用AJAX技术调用它后然后它会返回经过处理后的结果，最后XMLHTTPRequest对象会接受处理后的结果并识别其类型然后用恰当的格式显示在客户端。
下面是CreateXML.java的代码：
import java.io.IOException;
import java.io.PrintWriter;

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

public class CreateXML extends HttpServlet {

public CreateXML() {
super();
}

public void destroy() {
super.destroy();
}

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/xml");
response.setCharacterEncoding("UTF-8");
String selected = request.getParameter("selected");
PrintWriter out = response.getWriter();
out.println("<response>");
//下面分别为两个省份创建地市
if (selected.equals("1")){//如果选择的是“湖南省”
out.println("<city>");
out.println("<cityname>长沙</cityname>");
out.println("<cityvalue>1</cityvalue>");
out.println("</city>");
out.println("<city>");
out.println("<cityname>娄底</cityname>");
out.println("<cityvalue>2</cityvalue>");
out.println("</city>");
out.println("<city>");
out.println("<cityname>常德</cityname>");
out.println("<cityvalue>3</cityvalue>");
out.println("</city>");
}else{//如果选择的是“广东省”
out.println("<city>");
out.println("<cityname>广州</cityname>");
out.println("<cityvalue>1</cityvalue>");
out.println("</city>");
out.println("<city>");
out.println("<cityname>深圳</cityname>");
out.println("<cityvalue>2</cityvalue>");
out.println("</city>");
out.println("<city>");
out.println("<cityname>佛山</cityname>");
out.println("<cityvalue>3</cityvalue>");
out.println("</city>");
}
out.println("</response>");
out.flush();
out.close();
}

public void init() throws ServletException {}

}
大家可以看到这个请求返回的结果是XML格式的。然后我们再看看客户端index.jsp是怎么运用XMLHttpRequest对象对结果进行解析并输出到页面的。
function processor1() {
//定义一个变量用于存放从服务器返回的响应结果
var result;
if(xmlHttp.readyState == 4) { //如果响应完成
if(xmlHttp.status == 200) {//如果返回成功
//取出服务器返回的XML文档的所有city标签的子节点
result = xmlHttp.responseXML.getElementsByTagName("city");
//先清除地市列表的现有内容
while (document.all.slt2.options.length>0){
document.all.slt2.removeChild(document.all.slt2.childNodes[0]);
}
//解析XML中的数据并更新地市列表
for(var i=0;i<result.length;i++){
var option = document.createElement("OPTION");
option.text = result[i].childNodes[0].childNodes[0].nodeValue;//这就是取出<cityname>中的值
option.value = result[i].childNodes[1].childNodes[0].nodeValue;//这就是取出<cityvalue>中的值
document.all.slt2.options.add(option);//为地市列表中添加选项
}
}
}
}
这个函数就是前面我们绑定到XMLHttpRequest对象的状态相应函数
//将状态触发器绑定到一个函数
xmlHttp.onreadystatechange = processor1;
如果返回成功XMIHttpRequest就会调用这个函数对结果进行处理。
这里使用用Document对象对XML文档进行解析并用其对当前HTML文档做动态的修正相关知识请查阅相关图书这里就不多介绍。
    从这个例子中我们可以看出AJAX也不是什么特别神秘的东西，它只是利用JavaScript里的一个对象在客户端操作的背后暗地与服务端进行需要的数据传输，这样的话用户
就不会感觉到等待，其实还是需要时间的不过客户感觉不到无形中就增加了客户端用户的使用体验。
    在这个例子中请求处理程序返回的结果类型只是XML格式的当然根据具体需要返回结果可以有很多中其他的类型，所以说ＡＪＡＸ的应用还是很灵活的。
　　　上面我们谈了最原始的AJAX实现技术。其实在Structs框架中应用ＡＪＡＸ技术更加方面因为它为我们提供了一些ＡＪＡＣＸ组件，利用这些组件我们可以在客户端很轻松的
实现ＡＪＡＸ，而且它们封装了以上的一些基础的东西，使用起来更加方面，灵活。
　　下面我们就简单的介绍一下JSON-RPC组件的使用。
　　运用它我们可以在客户端透明的调用服务器的Java代码。
　　在使用之前我们需要将下载的jsonrpc.js导入到WebRoot的某个位置（这个文件其实就是这个组件封装的JavaScript代码）；
    接着将下载的jsonrpc.jar导入到WEB-inf/lib中。
    并在web.xml中加入以下代码：
      <servlet>
    <servlet-name>JSONRPCServlet</servlet-name>
    <servlet-class>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>JSONRPCServlet</servlet-name>
    <url-pattern>/JSON-RPC</url-pattern>
  </servlet-mapping>
现在举出一个具体例子：
其中<jsp:useBean id="hello" class="test.TestBean"></jsp:useBean>声明一个服务端的JavaBean对象负责一部数据的处理
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<jsp:useBean id="JSONRPCBridge" scope="session" class="com.metaparadigm.jsonrpc.JSONRPCBridge"/>
<jsp:useBean id="hello" class="test.TestBean"></jsp:useBean>
<%
//在JSONRPCBridge中注册hello，以便在JSONRpcClient对象中直接访问并操作hello对象。
JSONRPCBridge.registerObject("jsHello", hello);
%>
<html>
  <head>
    <title>JSON-RPC实例</title>
  </head>
  <script type="text/javascript" src="jsonrpc.js"></script>
  <script language="javascript">
  //创建JSONRpcClient对象
  jsonrpc = new JSONRpcClient("JSON-RPC");

  //在javascript中调用服务端TestBean的sayHello方法
  function callServer(){
myName = document.all.userName.value;
if (myName == ""){
alert("对不起，请您输入姓名!");
return;
}
alert(jsonrpc.jsHello.sayHello(myName)); 
  }
 
  //在javascript中调用服务端TestBean的circleArea方法
  function calc(){
arg0 = document.all.r.value;
arg1 = document.all.unit.value;
if (arg0 == ""){
alert("对不起，请您输入圆的半径!");
return;
}
if (arg1 == ""){
alert("对不起，请您输入圆半径的单位!");
return;
}
result = jsonrpc.jsHello.circleArea(arg0*1,arg1);
document.all.area.value = result;
  } 
 
  //在javascript中调用服务端TestBean的serverDate方法
  function getNow(){
result = jsonrpc.jsHello.serverDate();
document.all.now.value = result;
  }

  //在javascript中调用服务端TestBean的strArray方法
  function createTable(){
arg0 = document.all.row.value;
arg1 = document.all.col.value;
if (arg0 == ""){
alert("对不起，请您输入行数!");
return;
}
if (arg1 == ""){
alert("对不起，请您输入列数!");
return;
} 
result = jsonrpc.jsHello.strArray(arg0,arg1);
//将得到的二维数组产生表格
for(var i=0;i<result.length;i++){
tableRow = document.all.table1.insertRow(-1);
for(var j=0;j<result[i].length;j++){
tableCell = tableRow.insertCell(-1);
tableCell.innerHTML = result[i][j];
}
}
  }
     
  </script>
     
  <body>
    <h2>JSON-RPC实例</h2>
    <hr>
   
    请输入姓名：
    <input type="text" id="userName">
    <input type="button" value="问好" onClick="callServer()"><br><br>

    请输入圆的半径：
    <input type="text" id="r" size="6">
    单位：
    <input type="text" id="unit" size="4">
    面积为：
    <input type="text" id="area" readonly="true" size="12">
    <input type="button" value="计算" onClick="calc()"><br><br>

    服务器当前时间：
    <input type="text" id="now" readonly="true" size="30">
    <input type="button" value="取得时间" onClick="getNow()"><br><br>
   
    请输入表格的行列数：
    <input type="text" id="row" size="4">行
    <input type="text" id="col" size="4">列
    <input type="button" value="生成表格" onClick="createTable()"><br>
    <table id="table1" border="1" width="500" bgcolor="#eeeeee"></table><br>
                      
  </body>
</html>

当然还有很多其他的AJAX组件。由于本人能力有限这里不做介绍。
大家如果感兴趣的话可以讨论一下异步数据传输格式以及对不同格式数据的解析的问题，我想这个内容是丰富多彩的。