`
rongxh2010
  • 浏览: 48927 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

探讨Ajax获取表单值向Servlet传递的设计方案

阅读更多

 现在JavaWeb领域,MVC框架越来越多,比较出名的有StrutsStruts2SpringMVCWebWork等。而Ajax,作为一种与特定的动态Web编程语言(如JavaC#PHP)无关的技术,也已经被引入到了Java MVC框架的各家各户。而这些MVC框架,归根到底,都是对Servlet技术的封装。同时,支持Ajax的JavaScript框架(or类库)也越来越多,出名的如JqueryExtPrototypeDWR等,而它们实现异步传输功能还是离不开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)有01234,其中,0表示未初始化,1表示open方法成功调用,2表示服务器应答客户端请求,3表示交互中,HTTP头信息已经收到,但响应数据还没有接收,4表示数据接收完成。我们通过“xmlHttp.onreadystatechange = callback;” 来设置如果XMLHttpRequest对象的请求状态发生改变了,则会执行回调函数callback。我们可以看到,在callback方法体中,我们只关心readyState==4(交互完成)的情况,再获取从服务器端返回的状态码status,常见的状态码有:200表示交互成功,404表示页面没找到,500表示服务器处理错误等。接着,通过XMLHttpRequestresponseText属性得到从服务器端返回的文本数据,或者通过responseXML属性获得XML格式的数据。

在上面的代码中,doGet方法和doPost方法都有参数”data”,它由XMLHttpRequest负责从客户端传送到服务器端,对于Get方法,附在URL尾部,例如:member.jsp?name=xxx&sex=male。对于Post方式,可调用XMLHttpRequestsend方法发送。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方法,在JavaMap接口中,是不允许有重复的key存在的,而在JavaScript中作为传输参数的载体时,很多时候会出现多个同名的key的,例如处理表单的checkbox时,同一个name的有几个checkbox,构成一个复选框组,组织参数时就形如“key=value1&key=value2”,故put方法必须改。也是由于这个原因,get方法和remove方法也要改。二是toString方法,key=value对,不是用“,”号隔开的,而是用“&”号,故toString方法也须改。而有时候想想,如果把Map类改了,如果其他地方要用到的话,是不是还是改回来,与其改来改去的,不如继承它,重写put getremovetoString方法。好主意,代码如下:

/**  
 * 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来获取节点,很多时候十分方便,如获取textpasswordhiddentextarea类型的值,但有时候并不那么方便,如处理checkboxradio(不允许多个同名的id)。况且有许多情况下,开发者是由Ajax”转成Ajax应用的。在还没有引进Ajax的时候,表单传值都是根据输入域的name的值来区分的,不管是Get方式还是Post方式,在服务器端(这里指Java Servlet)获取数据的代码如下:

String  HttpServletRequest.getParameter("keyName");  //用于单值表单域   
String[]  HttpServletRequest.getParameterValues("keyName"); //用于多值表单域   

 

 

所谓的单值表单域就是上面提到过的typetextpasswordhiddeninput或者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>&nbsp;&nbsp;   
<label><input type="radio" name="sex" value="female" />女</label>    
</p>    
  
<!-- 复选框 -->   
<p>你掌握的开源框架 :<br />   
<label><input type="checkbox" name="framework" value="struts" />Struts</label>  &nbsp;&nbsp;   
<label><input type="checkbox" name="framework" value="spring" />Spring</label>  &nbsp;&nbsp;   
<label><input type="checkbox" name="framework" value="hibernate" />Hibernate</label> &nbsp;&nbsp;   
<label><input type="checkbox" name="framework" value="ibatis" />iBatis</label> &nbsp;&nbsp;   
<label><input type="checkbox" name="framework" value="webwork" />WebWork</label> &nbsp;&nbsp;   
</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,本文只是第一篇,欢迎提出宝贵的意见和建议,我将十分感谢!

 

  • 大小: 64.3 KB
  • 大小: 51.9 KB
分享到:
评论
16 楼 rongxh2010 2010-03-07  
谢谢各位对我提出的批评意见,本文已作相应的修改!
15 楼 geweixin 2010-02-08  
beck5859509 写道
kjj 写道
jee与ajax有啥关系嘛,纯属YY贴,ajax是浏览器端,根本与java没关系,jq,ext 是ajax框架??????????,摆脱多学学在发帖吧,别误导了初学者!!

照楼上所说的jq,ext该是什么框架呢

请问JS库只要用到了ajax,哪怕ajax只占一点点,那么都算ajax框架吗????
jq,ext当然不是ajax框架,多学学在回复吧,别误导了初学者!!
14 楼 jacker007 2010-02-08  
beck5859509 写道
kjj 写道
jee与ajax有啥关系嘛,纯属YY贴,ajax是浏览器端,根本与java没关系,jq,ext 是ajax框架??????????,摆脱多学学在发帖吧,别误导了初学者!!

照楼上所说的jq,ext该是什么框架呢


jq ext是JavaScript框架框架,ajax其中一部分而已。不能说是jq ext 就是ajax框架。
13 楼 showr 2010-02-08  
jQuery 就一句话:

$.post(url,params,function(data){
    alert(data);
});
12 楼 jackeysion 2010-02-08  
Rooock 写道
引用

//如果keys数组中有相同的记录,则不保存重复记录  
            if(this.keys[i] == key)  
                return;  

map不是这样的吧....


为什么不是这样?map中是根据key取value的,如果有多个同样的key,就不知道该取哪个value了.
11 楼 wing5jface 2010-02-08  
jq怎会只是ajax框架?应该从javascript库的层面来看,jq提供AJAX交互只是其中一个方面的功能,
它简化写法,方便处理跨浏览器的HTML documents、events、实现动画效果等功能.
10 楼 hyj1254 2010-02-08  
引用
jq,ext 是ajax框架...

确实有这种说法,它们也确实都封装了ajax的操作。知道它们能用来干吗就行了。
9 楼 wing5jface 2010-02-08  
源码测试提示error,activeXName少了s
for(var i = 0 ; i < activeXName.length ; i ++ ) {

测试Ajax与Servlet之间的数据传递(rongxh2010)在线效果可看
http://www.sh2999.com/sh/ajax/testAjaxSubmit.jsp
8 楼 風一樣的男子 2010-02-08  
不错,对初学的还是挺有帮助的

beck5859509 写道
kjj 写道
jee与ajax有啥关系嘛,纯属YY贴,ajax是浏览器端,根本与java没关系,jq,ext 是ajax框架??????????,摆脱多学学在发帖吧,别误导了初学者!!

照楼上所说的jq,ext该是什么框架呢


准确点说:jQuery、Mootools、ext等是 JS 框架
7 楼 Rooock 2010-02-07  
引用

//如果keys数组中有相同的记录,则不保存重复记录  
            if(this.keys[i] == key)  
                return;  

map不是这样的吧....
6 楼 kiddzhang 2010-02-07  
kjj 写道
jee与ajax有啥关系嘛,纯属YY贴,ajax是浏览器端,根本与java没关系,jq,ext 是ajax框架??????????,摆脱多学学在发帖吧,别误导了初学者!!



jq,ext 是ajax框架??????????,摆脱多学学在发帖吧,别误导了初学者!!
5 楼 beck5859509 2010-02-07  
kjj 写道
jee与ajax有啥关系嘛,纯属YY贴,ajax是浏览器端,根本与java没关系,jq,ext 是ajax框架??????????,摆脱多学学在发帖吧,别误导了初学者!!

照楼上所说的jq,ext该是什么框架呢
4 楼 kjj 2010-02-07  
jee与ajax有啥关系嘛,纯属YY贴,ajax是浏览器端,根本与java没关系,jq,ext 是ajax框架??????????,摆脱多学学在发帖吧,别误导了初学者!!
3 楼 dieslrae 2010-02-07  
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); 


直接用json不是更好?
2 楼 lucky16 2010-02-07  
对于学习Ajax很有帮助阿!
1 楼 dlgstar 2010-02-05  
正在学ajax,很有帮助

相关推荐

    _探讨Ajax获取表单值向Servlet传递的设计方案.doc

    探讨Ajax获取表单值向Servlet传递的设计方案 在 JavaWeb 领域,MVC 框架越来越多,比较出名的有 Struts、Struts2、SpringMVC、WebWork 等,而 Ajax 作为一种与特定的动态 Web 编程语言(如 Java、C#、PHP)无关的...

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

    总结,Ajax获取表单值并向Servlet传递的设计方案涉及以下几个关键步骤: 1. 初始化XMLHttpRequest对象。 2. 遍历表单获取数据。 3. 使用GET或POST方法发送Ajax请求。 4. 在Servlet端处理请求并返回响应。 5. 注册回...

    ajax异步文件上传,servlet处理

    本篇文章将深入探讨AJAX异步文件上传以及如何使用Servlet进行处理。 ### 1. AJAX异步文件上传原理 在HTML5之前,由于浏览器安全限制,AJAX无法直接处理文件,但HTML5引入了`FormData`对象,使得AJAX能够处理文件...

    javaIDEA新手研究的ajax访问servlet,html获取后台数据

    本项目是针对初学者设计的,主要涉及的知识点是利用Ajax技术与Servlet进行交互,从而实现HTML页面动态获取后台数据。我们将详细探讨这些关键概念和技术。 首先,Ajax(Asynchronous JavaScript and XML)是一种在不...

    探讨Ajax与Java Servlet之间的数据传输(一)

    在本文中,我们将深入探讨Ajax(异步JavaScript和XML)与Java Servlet之间的数据传输机制,这是Web开发中的重要组成部分。Ajax技术允许Web应用程序在不刷新整个页面的情况下与服务器进行交互,提高了用户体验。而...

    AJAX 实时获得数据(来自某一个Servlet)示例

    在本文中,我们将深入探讨如何使用AJAX技术实时获取Servlet中的数据,并将其显示在Web页面上。这个示例展示了AJAX(异步JavaScript和XML)的强大功能,它允许我们在不刷新整个网页的情况下与服务器进行通信,提升...

    ajax提交表单到后台

    // 获取表单数据 $.ajax({ url: 'submitForm', // 后端接口URL type: 'POST', data: formData, dataType: 'json', success: function(response) { console.log('提交成功:', response); // 处理成功后的...

    Ajax+Servlet 实例

    在这个实例中,我们将深入探讨如何使用Ajax与Servlet结合,以实现更高效、更流畅的用户界面。 ### 1. 创建Ajax请求 在Ajax中,我们通常使用JavaScript的XMLHttpRequest对象或其现代版本——fetch API来发送请求。...

    简单的AJAX示例(JSP+servlet)

    总结来说,"简单的AJAX示例(JSP+servlet)"是一个演示了如何利用AJAX、JSP和Servlet来实现异步用户名验证的应用。它涉及到前端的交互设计、后端的数据处理以及web服务器的配置,是一个典型的前后端分离的开发模式实例...

    ajax传值到servlet

    本话题主要关注如何使用Ajax将前端的数据传递给后台的Servlet进行处理,并在处理完成后将结果返回到前端进行显示。 ### 1. Ajax基本原理 Ajax的核心是JavaScript对象XMLHttpRequest,它允许JavaScript在后台与...

    ajax+servlet

    ajax+servletajax+servletajax+servletajax+servletajax+servletajax+servletajax+servletajax+servletajax+servletajax+servlet

    JSP+Servlet+AJAX的dao设计模式

    本篇我们将深入探讨如何在JSP、Servlet和AJAX的环境中应用DAO设计模式。 **1. JSP (JavaServer Pages)** JSP是Java的一种视图技术,用于生成动态网页。在JSP中,我们可以直接编写HTML,同时插入Java代码来处理业务...

    ajax例子servlet传值

    ### AJAX与Servlet交互详解 #### 一、引言 在Web开发中,AJAX(Asynchronous JavaScript and XML)技术被广泛应用于实现网页的部分更新而无需重新加载整个页面,从而提升了用户体验。本文将通过一个具体的例子来...

    Ajax JSON处理Servlet传回的值

    本篇文章将深入探讨如何使用Ajax来处理Servlet返回的JSON值。 首先,理解Ajax的工作原理至关重要。Ajax的核心是XMLHttpRequest对象,它允许JavaScript在后台与服务器进行异步通信。当用户触发一个Ajax请求时,...

    ajax 动态加载 jsp 和servlet

    本文将深入探讨Ajax如何与JSP(JavaServer Pages)和Servlet结合,实现动态加载数据。 首先,我们需要了解JSP和Servlet的基础概念。JSP是一种服务器端的技术,用于生成动态网页。开发者可以在JSP文件中混合HTML、...

    Ajax+servlet实现搜索框智能提示

    在这个"Ajax+servlet实现搜索框智能提示"的主题中,我们将探讨如何利用Ajax技术和Servlet来创建一个实时、动态的搜索框,提供智能的用户输入建议。 首先,让我们了解Ajax的基本原理。Ajax的核心是XMLHttpRequest...

    Servlet 解析AJAX 传递的JSONArray

    Servlet 处理 AJAX中传递的JSON格式参数,JSON中含有JSONArray!在网上搜索资源时发现没有相关内容,所以自己写了一下跟大家一起分享!如有雷同,纯属巧合!第一次传资源,有不好的地方希望大家提出建议!

    Servlet及Ajax数据交互

    在本示例中,我们将探讨Servlet如何与Ajax进行数据交互,从而实现无刷新页面更新。 首先,让我们了解一下Servlet的工作原理。当用户通过浏览器发送一个HTTP请求到服务器时,Servlet容器(如Tomcat)会捕获这个请求...

Global site tag (gtag.js) - Google Analytics