现在JavaWeb领域,MVC框架越来越多,比较出名的有Struts、Struts2、SpringMVC、WebWork等。而Ajax,作为一种与特定的动态Web编程语言(如Java、C#、PHP)无关的技术,也已经被引入到了Java MVC框架的各家各户。而这些MVC框架,归根到底,都是对Servlet技术的封装。同时,支持Ajax的JavaScript框架(or类库)也越来越多,出名的如Jquery、Ext、Prototype、DWR等,而它们实现异步传输功能还是离不开JavaScript中的XMLHttpRequest这个对象。好,转入正题吧。
Ajax通过XMLHttpRequest对象实现异步传输,那我们首先要获取这个对象。由于浏览器的差异,为了兼容各种常用的浏览器,先写一个初始化XMLHttpRequest对象的方法,代码如下:
/** * Get方式向服务器端异步发送数据 * @param url 服务器端的路径,数据发送的目的地 * @param data 发送的数据,格式如: "key1=value1&key2=value2" * @param callback 回调函数, */ function doGet(url, data, callback) { var url = url; if(url.indexOf("?") == -1) { url = url + "?" + data; } else { url = url + "&" + data; } initXmlHttp(); xmlHttp.onreadystatechange = callback; //注册回调函数 xmlHttp.open("GET", url, true); //设置连接信息 xmlHttp.send(null); } /** * Post方式向服务器端异步发送数据 * @param url 服务器端的路径,数据发送的目的地 * @param data 发送的数据,格式如: "key1=value1&key2=value2" * @param callback 回调函数 * @return */ function doPost(url, data, callback) { initXmlHttp(); //初始化 xmlHttp.onreadystatechange = callback; //注册回调函数 xmlHttp.open("POST", url, true); xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.send(data); } /** * 默认回调函数 * 只在测试时使用,在doGet和doPost函数中的第三个参数callback,可由用户自定义回调函数, * 若不设定,则调用默认的回调函数 */ function callback() { //判断对象的状态是否交互完成 if(xmlHttp.readyState == 4) { //判断http的交互是否成功 if(xmlHttp.status == 200) { //获取服务器返回的纯文本数据 var responseText = xmlHttp.responseText; //获取服务器返回的XML格式数据 //var responseXml = xmlHttp.responseXML; //Alert从服务器端返回的信息 window.alert(responseText); } } }
对上面的代码,在这里解析一下:XMLHttpRequest对象的请求状态(readyState)有0、1、2、3、4,其中,0表示未初始化,1表示open方法成功调用,2表示服务器应答客户端请求,3表示交互中,HTTP头信息已经收到,但响应数据还没有接收,4表示数据接收完成。我们通过“xmlHttp.onreadystatechange = callback;” 来设置如果XMLHttpRequest对象的请求状态发生改变了,则会执行回调函数callback。我们可以看到,在callback方法体中,我们只关心readyState==4(交互完成)的情况,再获取从服务器端返回的状态码status,常见的状态码有:200表示交互成功,404表示页面没找到,500表示服务器处理错误等。接着,通过XMLHttpRequest的responseText属性得到从服务器端返回的文本数据,或者通过responseXML属性获得XML格式的数据。
在上面的代码中,doGet方法和doPost方法都有参数”data”,它由XMLHttpRequest负责从客户端传送到服务器端,对于Get方法,附在URL尾部,例如:member.jsp?name=xxx&sex=male。对于Post方式,可调用XMLHttpRequest的send方法发送。data的数据形式比较灵活,可以是普通的参数格式、XML格式,JSON格式或者是其他格式,只要你能发送过去,服务器端就有办法将你解析出来。在这里,我们降低难度,就用最简单的参数格式,即
key1=value1 & key2=value2 & key3=value3 & ……
我们都知道,HTTP协议的Get方式传输数据,是通过把这些key-value串附到URL后面的,也就是我们只要点表单的提交按钮,就可以看到地址栏后面会多了一串key-value,代表表单里各输入框的名和值。然后,我们要做异步发送数据,就不能用表单的自动提交了,也就是说,得自己一个一个获取到各输入框的数据,然后再一个一个拼成上面的key-value串再发送。有没有一种简单的办法来组织这些数据呢?大家看到key-value是否会想到Java中的什么类?请看下面代码,我用JavaScript写了一个Map类(JavaScript中的“function”可以看作是方法,也可以看作是面向对象的“类”),就是类似于Java中我们常用的Map接口。
/**
* Map类
* 实现了类似于Java语言中的Map接口的常用方法
*/
function Map(){
//key集
this.keys = new Array();
//value集
this.values = new Array();
//添加key-value进Map
this.put = function(key, value){
if(key == null || key == undefined)
return;
var length = this.size();
for(var i = 0 ; i < length ; i ++ ) {
//如果keys数组中有相同的记录,则不覆盖原记录的值
if(this.keys[i] == key)
this.values[i] = value;
}
this.keys.push(key);
this.values.push(value);
};
//获取指定key的value
this.get = function(key){
var length = this.size();
for(var i = 0 ; i < length ; i ++ ) {
if(this.keys[i] == key) {
return this.values[i];
} else {
continue;
}
return null;
}
};
//移除指定key所对应的map
this.remove = function(key) {
var length = this.size();
for(var i = 0 ; i < length ; i ++ ) {
if(this.keys[i] == key) {
while(i < length - 1) {
this.keys[i] = this.keys[i+1];
this.values[i] = this.values[i+1];
i ++ ;
}
//处理最后一个元素
this.keys.pop();
this.values.pop();
break;
}
}
};
//是否包含指定的key
this.containsKey = function(key) {
var length = this.size();
for(var i = 0 ; i < length ; i ++ ) {
if(this.keys[i] == key) {
return true;
}
}
return false;
};
//是否包含指定的value
this.containsValue = function(value) {
var length = this.size();
for(var i = 0 ; i < length ; i ++ ) {
if(this.values[i] == value) {
return true;
}
}
return false;
};
//包含记录总数
this.size = function() {
return this.keys.length;
};
//是否为空
this.isEmpty = function() {
return this.size() == 0 ? true : false;
};
//清空Map
this.clear = function() {
this.keys = new Array();
this.values = new Array();
};
//将map转成字符串,格式:key1=value1,key2=value2
this.toString = function() {
var length = this.size();
var str = "";
for(var i = 0 ; i < length ; i ++ ) {
str = str + this.keys[i] + "=" + this.values[i];
if(i != length-1)
str += ",";
}
return str;
};
}
代码比较长,有些方法在本例中可能用不到,但也写出来了,或者在其他地方可能有用吧。当我们使用这个Map类来存储HTTP的参数时,发觉有几个不妥的地方:一是put方法,在Java的Map接口中,是不允许有重复的key存在的,而在JavaScript中作为传输参数的载体时,很多时候会出现多个同名的key的,例如处理表单的checkbox时,同一个name的有几个checkbox,构成一个复选框组,组织参数时就形如“key=value1&key=value2”,故put方法必须改。也是由于这个原因,get方法和remove方法也要改。二是toString方法,key=value对,不是用“,”号隔开的,而是用“&”号,故toString方法也须改。而有时候想想,如果把Map类改了,如果其他地方要用到的话,是不是还是改回来,与其改来改去的,不如继承它,重写put 、get、remove和toString方法。好主意,代码如下:
/** * ParamMap类,用于存储HTTP请求中的Get方法或者Post方法所传递的参数 * 继承于Map类,但改写一些方法,以适合HTTP请求中的参数格式 * 与Map不同之处有:ParamMap允许多个同名的"key"存在, * toString方法返回的"key=value"对以"&"号连接,而不是","号,等等。 */ function ParamMap() { //继承Map类 Map.call(this); //重写put方法,允许多个同名key存在 this.put = function(key, value){ if(key == null || key == undefined) return; this.keys.push(key); this.values.push(value); }; //重写get方法,返回values数组 this.get = function(key) { var results = new Array(); var length = this.size(); for(var i = 0 ; i < length ; i ++ ) { if(this.keys[i] == key) results.push(this.values[i]); } return results; }; //重写remove方法 this.remove = function(key) { var length = this.size(); for(var i = 0 ; i < length ; i ++ ) { if(this.keys[i] == key) { while(i < length - 1) { this.keys[i] = this.keys[i+1]; this.values[i] = this.values[i+1]; i ++ ; } //处理最后一个元素 this.keys.pop(); this.values.pop(); } } }; //重写toString方法, 转成XMLHttpRequest.send(ajaxString)方法的参数格式的字符串, //形如:key1=value1&key2=value2 this.toString = function() { var length = this.size(); var str = ""; for(var i = 0 ; i < length ; i ++ ) { str = str + this.keys[i] + "=" + this.values[i]; if(i != length-1) str += "&"; } return str; }; }
怎么使用这个ParamMap类呢,且看下面的示例代码:
var username = document.getElementById("username").value; var password = document.getElementById("password").value; var sex = document.getElementById("sex").value; var map = new ParamMap(); map.put("username", username); map.put("password", password); map.put("sex", sex); doGet("test/register", map.toString(), callback); doPost("test/register", map.toString(), callback);
在JavaScript中,用来获取HTML结点的方法,常用的有如下方法:
Node document.getElementById("username") //根据标签的id NodeList document.getElementsByName(“username”) //根据标签的name NodeList document.getElementsByTagName("input") //根据标签的标签名
我们注意到在除了getElementById是返回Node对象外,其他两个方法都是返回NodeList对象,相当于Node数组。在Ajax应用中,根据ID来获取节点,很多时候十分方便,如获取text、password、hidden、textarea类型的值,但有时候并不那么方便,如处理checkbox、radio(不允许多个同名的id)。况且有许多情况下,开发者是由“非Ajax”转成Ajax应用的。在还没有引进Ajax的时候,表单传值都是根据输入域的name的值来区分的,不管是Get方式还是Post方式,在服务器端(这里指Java Servlet)获取数据的代码如下:
String HttpServletRequest.getParameter("keyName"); //用于单值表单域
String[] HttpServletRequest.getParameterValues("keyName"); //用于多值表单域
所谓的“单值表单域”就是上面提到过的type为text、password、hidden的input或者textarea等,而“多值表单域”是指checkbox。其实,也不尽然,如单值表单域有时候也可以是多值表单域,如我们注册时有时会要求填多个邮箱,这个<input type=”text” name=”email”>就可以重复多行用同一个name,它在Servlet端获取值方式跟checkbox一样处理。
鉴于各种原因,我们在JavaScript获取HTML Form表单域方法,决定采用getElementsByName方法,这样,我们是不是每取一个表单元素,就得将NodeList类型的返回结果遍历一遍,获取Node,再从Node获取值呢?既然选择了这样做,当然少不了这样的工作,不过,我们可以写一个可重用的方法,让它处理一下NodeList对象。且看代码:
/** * 获取nodeList的值集 * @param nodeList Node数组,可通过getElementsByName或者getElementsByTagName等方法获得 * @return 值数组 */ function nodeList2ValuesArray(nodeList) { //结果值数组,形如:['aaa','bbb','ccc'] var values = new Array(); var length = nodeList.length; var nodeName = nodeList.item(0).nodeName; //对"<input type='xxx'/>"的处理 if(nodeName == "INPUT") { var type = nodeList.item(0).getAttribute("type"); if(type == "text" || type == "password" || type == "hidden") { for(var i = 0 ; i < length ; i ++ ) { values.push(nodeList.item(i).value); } } else if(type == "checkbox" || type == "radio") { for(var i = 0 ; i < length ; i ++ ) { var node = nodeList.item(i); if(node.checked) { values.push(node.value); } } } } //对"<textarea>xxx</textarea>"的处理 else if(nodeName == "TEXTAREA") { for(var i = 0 ; i < length ; i ++ ) { values.push(nodeList.item(i).value); } } //对"<select></select>"的处理 else if (nodeName == "SELECT") { var subNodeList = nodeList.item(0).getElementsByTagName("option"); return nodeList2ValuesArray(subNodeList); } //对<select>的子元素"<option>xxx<option>"的处理 else if (nodeName == "OPTION") { for(var i = 0 ; i < length ; i ++ ) { var node = nodeList.item(i); if(node.selected){ values.push(node.value); } } } return values; }
上面代码将NodeList转成了值数组,而且让使用者忽略表单域类型的差异,专心于值的获取和使用。美中不足的是,上面的方法返回的是数组,我们还是一个一个遍历再拼成key=value字符串。接下来的方法不但解决了这一点,而且还大大简化我们的表单取值,且看:
/** * 解析表单的数据,转成ParamMap的形式 * @param 任意个参数,代表表单子元素的name值 * @return ParamMap结果集 */ function parseForm2ParamMap() { var map = new ParamMap(); //参数的长度,注意:方法定义的括号中虽然没有定义参数,但却可以设任意多个参数 var length = arguments.length; for(var i = 0 ; i < length ; i ++ ) { var nodeList = document.getElementsByName(arguments[i]); var values = nodeList2ValuesArray(nodeList); for(var j = 0 ; j < values.length ; j ++ ) { map.put(arguments[i], values[j]); } } return map; }
这个方法返回值的类型是ParamMap,也就是我们刚才定义的用来传递参数的类,这个类中有一个toString的方法,不就是返回“key1=value1&key2=value2”形式的字符串吗?
OK,下面的测试例子,将涉及到表单的各种元素域,其中引进了ajax.js文件,其内容即是我们上面所写的JS函数和类,在附件中可下载到,在此就不重复贴出来了。且看HTML代码:
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>测试Ajax与Servlet之间的数据传递</title>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
window.onload = function(){
var submit = document.getElementById("submit");
submit.onclick = function(){
var map = parseForm2ParamMap("username", "email", "password", "userid", "sex", "framework", "salary", "dream");
//doPost("input", map.toString(), callback); //默认Alert出信息
doPost("input", map.toString(), function(){
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var returnMsg = document.getElementById("returnMsg");
returnMsg.innerHTML = xmlHttp.responseText;
}
}
});
};
};
</script>
</head>
<body>
<h2>测试Ajax与Servlet之间的数据传递<br />(Step1:从Client->Server)</h2>
<div id="returnMsg" style="color:red;"></div>
<form>
<!-- 文本域 -->
<p>你的姓名:
<input type="text" name="username" /><br />
</p>
<p>你的电子邮件(可填两个):<br />
邮件地址1:<input type="text" name="email" /> <br />
邮件地址2:<input type="text" name="email" />
</p>
<!-- 密码域 -->
<p>你的密码:
<input type="password" name="password" /><br />
</p>
<!-- 隐藏域 -->
<input type="hidden" name="userid" value="108" /><br />
<!-- 单选框 -->
<p>你的性别 :
<label><input type="radio" name="sex" value="male" />男</label>
<label><input type="radio" name="sex" value="female" />女</label>
</p>
<!-- 复选框 -->
<p>你掌握的开源框架 :<br />
<label><input type="checkbox" name="framework" value="struts" />Struts</label>
<label><input type="checkbox" name="framework" value="spring" />Spring</label>
<label><input type="checkbox" name="framework" value="hibernate" />Hibernate</label>
<label><input type="checkbox" name="framework" value="ibatis" />iBatis</label>
<label><input type="checkbox" name="framework" value="webwork" />WebWork</label>
</p>
<!-- 下拉列表 -->
<p>你的薪水范围 :
<select name="salary">
<option value="2000以下">2000以下</option>
<option value="2000——3000">2000——3000</option>
<option value="3000——4000">3000——4000</option>
<option value="4000——5000">4000——5000</option>
<option value="5000以上">5000以上</option>
</select>
</p>
<!-- 文本域 -->
<p>你的职业梦想: <br />
<textarea rows="5" cols="36" name="dream"></textarea><br />
</p>
<input type="button" id="submit" value="submit" />
</form>
</body>
</html>
服务器端的代码如下:
package simple.rongxh.servlet;
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;
/**
* RongXinHua心梦帆影
* site1: http://rongxh2010.iteye.com
* site2: http://www.blogjava.net/rongxh7
* @author rongxinhua
*
*/
public class Input extends HttpServlet {
private static final long serialVersionUID = 1L;
private void process(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取数据
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
String[] emails = request.getParameterValues("email");
String password = request.getParameter("password");
String userid = request.getParameter("userid");
String sex = request.getParameter("sex");
String[] framework = request.getParameterValues("framework");
String salary = request.getParameter("salary");
String dream = request.getParameter("dream");
//响应给客户端
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.append("恭喜你,保存成功,你的基本信息如下:<br/>");
out.append("姓名:" + username + "<br/>");
for(int i = 0 ; i < emails.length ; i ++ ) {
out.append("邮箱" + (i+1) + ":" + emails[i] + "<br/>");
}
out.append("密码:" + password + "<br/>");
out.append("编号:" + userid + "<br/>");
out.append("性别:" + sex + "<br/>");
out.append("框架:");
for(int i = 0 ; framework != null && i < framework.length ; i ++ ){
out.append(framework[i] + " ");
}
out.append("<br/>");
out.append("薪水:" + salary + "<br/>");
out.append("梦想:" + dream + "<br/>");
out.println();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
process(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
process(request, response);
}
}
运行结果截图如下:
本测试例子eclipse项目源码下载(附件中):rongxh2010_ajaxservlet。
当Java遇上Ajax,本文只是第一篇,欢迎提出宝贵的意见和建议,我将十分感谢!