探讨Ajax获取表单值向Servlet传递的设计方案精品资料.doc

《探讨Ajax获取表单值向Servlet传递的设计方案精品资料.doc》由会员分享，可在线阅读，更多相关《探讨Ajax获取表单值向Servlet传递的设计方案精品资料.doc（21页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、探讨Ajax获取表单值向Servlet传递的设计方案 现在JavaWeb领域，MVC框架越来越多，比较出名的有Struts、Struts2、SpringMVC、WebWork等。而Ajax，作为一种与特定的动态Web编程语言（如Java、C#、PHP）无关的技术，也已经被引入到了Java MVC框架的各家各户。而这些MVC框架，归根到底，都是对Servlet技术的封装。同时，支持Ajax的JavaScript框架（or类库）也越来越多，出名的如Jquery、Ext、Prototype、DWR等，而它们实现异步传输功能还是离不开JavaScript中的XMLHttpRequest这个对象。好，转

2、入正题吧。Ajax通过XMLHttpRequest对象实现异步传输，那我们首先要获取这个对象。由于浏览器的差异，为了兼容各种常用的浏览器，先写一个初始化XMLHttpRequest对象的方法，代码如下： Js代码 1 /* 2 * Get方式向服务器端异步发送数据 3 * param url 服务器端的路径,数据发送的目的地 4 * param data 发送的数据,格式如: key1=value1&key2=value2 5 * param callback 回调函数， 6 */ 7 function doGet(url, data, callback) 8 var url = url; 9

3、 if(url.indexOf(?) = -1) 10 url = url + ? + data; 11 else 12 url = url + & + data; 13 14 initXmlHttp(); 15 xmlHttp.onreadystatechange = callback; /注册回调函数 16 xmlHttp.open(GET, url, true); /设置连接信息 17 xmlHttp.send(null); 18 19 20 /* 21 * Post方式向服务器端异步发送数据 22 * param url 服务器端的路径,数据发送的目的地 23 * param data

4、 发送的数据,格式如: key1=value1&key2=value2 24 * param callback 回调函数 25 * return 26 */ 27 function doPost(url, data, callback) 28 initXmlHttp(); /初始化 29 xmlHttp.onreadystatechange = callback; /注册回调函数 30 xmlHttp.open(POST, url, true); 31 xmlHttp.setRequestHeader(Content-Type, application/x-www-form-urlencode

5、d); 32 xmlHttp.send(data); 33 34 35 /* 36 * 默认回调函数 37 * 只在测试时使用，在doGet和doPost函数中的第三个参数callback，可由用户自定义回调函数， 38 * 若不设定，则调用默认的回调函数 39 */ 40 function callback() 41 /判断对象的状态是否交互完成 42 if(xmlHttp.readyState = 4) 43 /判断http的交互是否成功 44 if(xmlHttp.status = 200) 45 /获取服务器返回的纯文本数据 46 var responseText = xmlHttp.

6、responseText; 47 /获取服务器返回的XML格式数据 48 /var responseXml = xmlHttp.responseXML; 49 /Alert从服务器端返回的信息 50 window.alert(responseText); 51 52 53 对上面的代码，在这里解析一下：XMLHttpRequest对象的请求状态（readyState）有0、1、2、3、4，其中，0表示未初始化，1表示open方法成功调用，2表示服务器应答客户端请求，3表示交互中，HTTP头信息已经收到，但响应数据还没有接收，4表示数据接收完成。我们通过“xmlHttp.onreadystate

7、change = callback;”来设置如果XMLHttpRequest对象的请求状态发生改变了，则会执行回调函数callback。我们可以看到，在callback方法体中，我们只关心readyState=4（交互完成）的情况，再获取从服务器端返回的状态码status，常见的状态码有：200表示交互成功，404表示页面没找到，500表示服务器处理错误等。接着，通过XMLHttpRequest的responseText属性得到从服务器端返回的文本数据，或者通过responseXML属性获得XML格式的数据。在上面的代码中，doGet方法和doPost方法都有参数”data”，它由XMLHtt

8、pRequest负责从客户端传送到服务器端，对于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后面的，也就是我们只要点表单的提

9、交按钮，就可以看到地址栏后面会多了一串key-value，代表表单里各输入框的名和值。然后，我们要做异步发送数据，就不能用表单的自动提交了，也就是说，得自己一个一个获取到各输入框的数据，然后再一个一个拼成上面的key-value串再发送。有没有一种简单的办法来组织这些数据呢？大家看到key-value是否会想到Java中的什么类？请看下面代码，我用JavaScript写了一个Map类（JavaScript中的“function”可以看作是方法，也可以看作是面向对象的“类”），就是类似于Java中我们常用的Map接口。 Java代码 54 /* 55 * Map类 56 * 实现了类似于Java

10、语言中的Map接口的常用方法 57 */ 58 function Map() 59 /key集 60 this.keys = new Array(); 61 /value集 62 this.values = new Array(); 63 /添加key-value进Map 64 this.put = function(key, value) 65 if(key = null | key = undefined) 66 return; 67 var length = this.size(); 68 for(var i = 0 ; i length ; i + ) 69 /如果keys数组中有相同

11、的记录，则不覆盖原记录的值 70 if(this.keysi = key) 71 this.valuesi = value; 72 73 this.keys.push(key); 74 this.values.push(value); 75 ; 76 /获取指定key的value 77 this.get = function(key) 78 var length = this.size(); 79 for(var i = 0 ; i length ; i + ) 80 if(this.keysi = key) 81 return this.valuesi; 82 else 83 continu

12、e; 84 85 return null; 86 87 ; 88 89 /移除指定key所对应的map 90 this.remove = function(key) 91 var length = this.size(); 92 for(var i = 0 ; i length ; i + ) 93 if(this.keysi = key) 94 while(i length - 1) 95 this.keysi = this.keysi+1; 96 this.valuesi = this.valuesi+1; 97 i + ; 98 99 /处理最后一个元素 100 this.keys.po

13、p(); 101 this.values.pop(); 102 break; 103 104 105 ; 106 /是否包含指定的key 107 this.containsKey = function(key) 108 var length = this.size(); 109 for(var i = 0 ; i length ; i + ) 110 if(this.keysi = key) 111 return true; 112 113 114 return false; 115 ; 116 /是否包含指定的value 117 this.containsValue = function(v

14、alue) 118 var length = this.size(); 119 for(var i = 0 ; i length ; i + ) 120 if(this.valuesi = value) 121 return true; 122 123 124 return false; 125 ; 126 /包含记录总数 127 this.size = function() 128 return this.keys.length; 129 ; 130 /是否为空 131 this.isEmpty = function() 132 return this.size() = 0 ? true :

15、 false; 133 ; 134 /清空Map 135 this.clear = function() 136 this.keys = new Array(); 137 this.values = new Array(); 138 ; 139 /将map转成字符串，格式：key1=value1,key2=value2 140 this.toString = function() 141 var length = this.size(); 142 var str = ; 143 for(var i = 0 ; i length ; i + ) 144 str = str + this.keys

16、i + = + this.valuesi; 145 if(i != length-1) 146 str += ,; 147 148 return str; 149 ; 150 代码比较长，有些方法在本例中可能用不到，但也写出来了，或者在其他地方可能有用吧。当我们使用这个Map类来存储HTTP的参数时，发觉有几个不妥的地方：一是put方法，在Java的Map接口中，是不允许有重复的key存在的，而在JavaScript中作为传输参数的载体时，很多时候会出现多个同名的key的，例如处理表单的checkbox时，同一个name的有几个checkbox，构成一个复选框组，组织参数时就形如“key=va

17、lue1&key=value2”，故put方法必须改。也是由于这个原因，get方法和remove方法也要改。二是toString方法，key=value对，不是用“,”号隔开的，而是用“&”号，故toString方法也须改。而有时候想想，如果把Map类改了，如果其他地方要用到的话，是不是还是改回来，与其改来改去的，不如继承它，重写put、get、remove和toString方法。好主意，代码如下：Js代码 151 /* 152 * ParamMap类，用于存储HTTP请求中的Get方法或者Post方法所传递的参数 153 * 继承于Map类，但改写一些方法，以适合HTTP请求中的参数格式 1

18、54 * 与Map不同之处有：ParamMap允许多个同名的key存在， 155 * toString方法返回的key=value对以&号连接，而不是,号，等等。 156 */ 157 function ParamMap() 158 /继承Map类 159 Map.call(this); 160 /重写put方法，允许多个同名key存在 161 this.put = function(key, value) 162 if(key = null | key = undefined) 163 return; 164 this.keys.push(key); 165 this.values.push

19、(value); 166 ; 167 /重写get方法，返回values数组 168 this.get = function(key) 169 var results = new Array(); 170 var length = this.size(); 171 for(var i = 0 ; i length ; i + ) 172 if(this.keysi = key) 173 results.push(this.valuesi); 174 175 return results; 176 ; 177 /重写remove方法 178 this.remove = function(key)

20、 179 var length = this.size(); 180 for(var i = 0 ; i length ; i + ) 181 if(this.keysi = key) 182 while(i length - 1) 183 this.keysi = this.keysi+1; 184 this.valuesi = this.valuesi+1; 185 i + ; 186 187 /处理最后一个元素 188 this.keys.pop(); 189 this.values.pop(); 190 191 192 ; 193 /重写toString方法, 转成XMLHttpReq

21、uest.send(ajaxString)方法的参数格式的字符串， 194 /形如：key1=value1&key2=value2 195 this.toString = function() 196 var length = this.size(); 197 var str = ; 198 for(var i = 0 ; i length ; i + ) 199 str = str + this.keysi + = + this.valuesi; 200 if(i != length-1) 201 str += &; 202 203 return str; 204 ; 205 怎么使用这个P

22、aramMap类呢，且看下面的示例代码：Js代码 206 var username = document.getElementById(username).value; 207 var password = document.getElementById(password).value; 208 var sex = document.getElementById(sex).value; 209 210 var map = new ParamMap(); 211 map.put(username, username); 212 map.put(password, password); 213 m

23、ap.put(sex, sex); 214 215 doGet(test/register, map.toString(), callback); 216 doPost(test/register, map.toString(), callback); Js代码 217 在JavaScript中，用来获取HTML结点的方法，常用的有如下方法：Js代码 218 Node document.getElementById(username) /根据标签的id 219 NodeList document.getElementsByName(“username”) /根据标签的name 220 Node

24、List document.getElementsByTagName(input) /根据标签的标签名 我们注意到在除了getElementById是返回Node对象外，其他两个方法都是返回NodeList对象，相当于Node数组。在Ajax应用中，根据ID来获取节点，很多时候十分方便，如获取text、password、hidden、textarea类型的值，但有时候并不那么方便，如处理checkbox、radio（不允许多个同名的id）。况且有许多情况下，开发者是由“非Ajax”转成Ajax应用的。在还没有引进Ajax的时候，表单传值都是根据输入域的name的值来区分的，不管是Get方式还是

25、Post方式，在服务器端（这里指Java Servlet）获取数据的代码如下：Java代码 221 String HttpServletRequest.getParameter(keyName); /用于单值表单域 222 String HttpServletRequest.getParameterValues(keyName); /用于多值表单域 所谓的“单值表单域”就是上面提到过的type为text、password、hidden的input或者textarea等，而“多值表单域”是指checkbox。其实，也不尽然，如单值表单域有时候也可以是多值表单域，如我们注册时有时会要求填多个邮箱，

26、这个就可以重复多行用同一个name，它在Servlet端获取值方式跟checkbox一样处理。鉴于各种原因，我们在JavaScript获取HTML Form表单域方法，决定采用getElementsByName方法，这样，我们是不是每取一个表单元素，就得将NodeList类型的返回结果遍历一遍，获取Node，再从Node获取值呢？既然选择了这样做，当然少不了这样的工作，不过，我们可以写一个可重用的方法，让它处理一下NodeList对象。且看代码： Js代码 223 /* 224 * 获取nodeList的值集 225 * param nodeList Node数组，可通过getElements

27、ByName或者getElementsByTagName等方法获得 226 * return 值数组 227 */ 228 function nodeList2ValuesArray(nodeList) 229 /结果值数组，形如：aaa,bbb,ccc 230 var values = new Array(); 231 var length = nodeList.length; 232 var nodeName = nodeList.item(0).nodeName; 233 /对的处理 234 if(nodeName = INPUT) 235 var type = nodeList.ite

28、m(0).getAttribute(type); 236 if(type = text | type = password | type = hidden) 237 for(var i = 0 ; i length ; i + ) 238 values.push(nodeList.item(i).value); 239 240 241 else if(type = checkbox | type = radio) 242 for(var i = 0 ; i length ; i + ) 243 var node = nodeList.item(i); 244 if(node.checked)

29、245 values.push(node.value); 246 247 248 249 250 /对xxx的处理 251 else if(nodeName = TEXTAREA) 252 for(var i = 0 ; i length ; i + ) 253 values.push(nodeList.item(i).value); 254 255 256 /对的处理 257 else if (nodeName = SELECT) 258 var subNodeList = nodeList.item(0).getElementsByTagName(option); 259 return n

30、odeList2ValuesArray(subNodeList); 260 261 /对的子元素xxx的处理 262 else if (nodeName = OPTION) 263 for(var i = 0 ; i length ; i + ) 264 var node = nodeList.item(i); 265 if(node.selected) 266 values.push(node.value); 267 268 269 270 return values; 271 上面代码将NodeList转成了值数组，而且让使用者忽略表单域类型的差异，专心于值的获取和使用。美中不足的是，上面

31、的方法返回的是数组，我们还是一个一个遍历再拼成key=value字符串。接下来的方法不但解决了这一点，而且还大大简化我们的表单取值，且看： Js代码 272 /* 273 * 解析表单的数据,转成ParamMap的形式 274 * param 任意个参数,代表表单子元素的name值 275 * return ParamMap结果集 276 */ 277 function parseForm2ParamMap() 278 var map = new ParamMap(); 279 280 /参数的长度，注意：方法定义的括号中虽然没有定义参数，但却可以设任意多个参数 281 var length

32、= arguments.length; 282 for(var i = 0 ; i length ; i + ) 283 var nodeList = document.getElementsByName(argumentsi); 284 var values = nodeList2ValuesArray(nodeList); 285 for(var j = 0 ; j values.length ; j + ) 286 map.put(argumentsi, valuesj); 287 288 289 return map; 290 这个方法返回值的类型是ParamMap，也就是我们刚才定义

33、的用来传递参数的类，这个类中有一个toString的方法，不就是返回“key1=value1&key2=value2”形式的字符串吗？OK，下面的测试例子，将涉及到表单的各种元素域，其中引进了ajax.js文件，其内容即是我们上面所写的JS函数和类，在附件中可下载到，在此就不重复贴出来了。且看HTML代码： Html代码 291 292 294 295 296 297 298 299 测试Ajax与Servlet之间的数据传递 300 301 302 window.onload = function() 303 304 var submit = document.getElementById(submit); 305 submit.onclick