探讨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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 探讨Ajax获取表单值向Servlet传递的设计方案 精品资料 探讨 Ajax 获取 表单 Servlet 传递 设计方案 精品 资料
限制150内