《探讨Ajax获取表单值向Servlet传递及设计方案》由会员分享，可在线阅读，更多相关《探讨Ajax获取表单值向Servlet传递及设计方案（10页珍藏版）》请在金锄头文库上搜索。
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 等，而它们实现异步传输功能还是离不开 JavaScri
2、pt 中的 XMLHttpRequest 这个对象。好，转入正题吧。Ajax 通过 XMLHttpRequest 对象实现异步传输，那我们首先要获取这个对象。由于浏览器的差异，为了兼容各种常用的浏览器，先写一个初始化 XMLHttpRequest 对象的方法，代码如下：Js 代码 /* * Get 方式向服务器端异步发送数据 * param url 服务器端的路径,数据发送的目的地 * param data 发送的数据,格式如: key1=value1&key2=value2 * param callback 回调函数， */ function doGet(url, data, callbac
3、k) 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&
4、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); /* * 默认回调函数 * 只在测试时使用，在
5、doGet 和 doPost 函数中的第三个参数 callback，可由用户自定义回调函数， * 若不设定，则调用默认的回调函数 */ function callback() /判断对象的状态是否交互完成 if(xmlHttp.readyState = 4) /判断 http 的交互是否成功 if(xmlHttp.status = 200) /获取服务器返回的纯文本数据 var responseText = xmlHttp.responseText; /获取服务器返回的 XML 格式数据 /var responseXml = xmlHttp.responseXML; /Alert 从服务器端返
6、回的信息 window.alert(responseText); 对上面的代码，在这里解析一下：XMLHttpRequest 对象的请求状态（readyState ）有0、1 、2、3 、4，其中，0 表示未初始化， 1表示 open 方法成功调用，2表示服务器应答客户端请求，3表示交互中，HTTP 头信息已经收到，但响应数据还没有接收，4 表示数据接收完成。我们通过“xmlHttp.onreadystatechange = callback;”来设置如果XMLHttpRequest 对象的请求状态发生改变了，则会执行回调函数 callback。我们可以看到，在 callback 方法体中，我
7、们只关心 readyState=4（交互完成）的情况，再获取从服务器端返回的状态码 status，常见的状态码有：200表示交互成功，404表示页面没找到，500表示服务器处理错误等。接着，通过 XMLHttpRequest 的 responseText 属性得到从服务器端返回的文本数据，或者通过 responseXML 属性获得 XML 格式的数据。在上面的代码中，doGet 方法和 doPost 方法都有参数”data”，它由 XMLHttpRequest 负责从客户端传送到服务器端，对于 Get 方法，附在 URL 尾部，例如：member.jsp?name=xxx&sex=male。对
8、于 Post 方式，可调用 XMLHttpRequest 的 send 方法发送。data 的数据形式比较灵活，可以是普通的参数格式、XML 格式，JSON 格式或者是其他格式，只要你能发送过去，服务器端就有办法将你解析出来。在这里，我们降低难度，就用最简单的参数格式，即key1=value1 & key2=value2 & key3=value3 & 我们都知道，HTTP 协议的 Get 方式传输数据，是通过把这些 key-value 串附到 URL 后面的，也就是我们只要点表单的提交按钮，就可以看到地址栏后面会多了一串 key-value，代表表单里各输入框的名和值。然后，我们要做异步发送
9、数据，就不能用表单的自动提交了，也就是说，得自己一个一个获取到各输入框的数据，然后再一个一个拼成上面的 key-value 串再发送。有没有一种简单的办法来组织这些数据呢？大家看到 key-value 是否会想到 Java 中的什么类？请看下面代码，我用 JavaScript 写了一个 Map 类（JavaScript 中的“function”可以看作是方法，也可以看作是面向对象的“类”） ，就是类似于 Java 中我们常用的 Map 接口。Java 代码 /* * Map 类 * 实现了类似于 Java 语言中的 Map 接口的常用方法 */ function Map() /key 集 th
10、is.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 就可以重复多行用同一个 name，它在 Servlet 端获取值方式跟 checkbox 一样处理。鉴于各种原因，我们在 JavaScript 获取 HTML Form 表单域方法，决定采用getElemen
11、tsByName 方法，这样，我们是不是每取一个表单元素，就得将 NodeList 类型的返回结果遍历一遍，获取 Node，再从 Node 获取值呢？既然选择了这样做，当然少不了这样的工作，不过，我们可以写一个可重用的方法，让它处理一下 NodeList 对象。且看代码：Js 代码 /* * 获取 nodeList 的值集 * param nodeList Node 数组，可通过 getElementsByName 或者getElementsByTagName 等方法获得 * return 值数组 */ function nodeList2ValuesArray(nodeList) /结果值数
12、组，形如：aaa,bbb,ccc var values = new Array(); var length = nodeList.length; var nodeName = nodeList.item(0).nodeName; /对的处理 if(nodeName = INPUT) var type = nodeList.item(0).getAttribute(type); if(type = text | type = password | type = hidden) for(var i = 0 ; i xxx的处理 else if(nodeName = TEXTAREA) for(var i = 0 ; i 的处理 else if (nodeName = SELECT) var subNodeList = nodeList.item(0).getElementsByTagName(option); return nodeList2ValuesArray(subNodeList); /对的子元素xxx的处理 else if (nodeName = OPTION) for(var i = 0 ; i
