在JQuery框架的基础上实现AJAX还是比较方便的,下面是一些简单介绍:
下面通过Ajax实现注册信息的验证,先来看一下以"POST"的请求方式:
JQuery代码:
<script type="text/javascript" src="<%=path%>/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function validateUsername() {
var username = $("#username").val();
var methodName = "queryUserByUsername";
if(username == null || username == ""){
$("#unameDiv").html("用户名不能为空");
$("#username")[0].focus();
}else{
$.ajax({
url:"http://localhost:8080/MessageProject/servlet/UserServlet",
type:"post",/*与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。然而,在以下情况中,请使用 POST 请求:
①无法使用缓存文件(更新服务器上的文件或数据库)②向服务器发送大量数据(POST 没有数据量限制)
③发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠*/
dataType: "text",
data: {username:username,method:methodName },/* 传递多个值时,可以用JSON来包装,例如{username:username,age:age}*/
success:function(result){
if($.trim(result) == "true"){
$("#unameDiv").html("<span style='color:red'>用户名已被注册</span>");
$("#username")[0].focus();
}else{
$("#unameDiv").html("<span style='color:green'>用户名可以使用</span>");
}
},
error:function(){
alert("AJAX执行失败");
}
});
}
}
第1行代码是加载一个jQuery库,这里随意加载一个现有的jQuery库即可。
第11行代码,url传递数据, 这里的参数为发送请求的地址,可以能添加参数(post、get类型)。
第13行代码是指定预期服务端返回的数据类型,这里我们将其指定为“text”文本形式(也可指定为xml、json等格式)。
第16行代码是请求成功后回调的函数,“function(result)”这里的result是一个变量,是服务端返回的数据,相当于var result= xmlHttp.responseText();
Servlet 代码:
这里需要注意的是第1行代码,response.setContentType("application/text; charset=utf-8"); 这里声明response返回一个text文件。response.setContentType("application/text; charset=utf-8"); PrintWriter out = response.getWriter(); String username = request.getParameter("username"); System.out.println(username); UserDao userDao = new UserDao(); User user = new User(); user = userDao.queryUserByUsername(username); if(user.getPassword() != null){ out.write("true"); } else{ out.write("false"); }
调用response.getWriter().write()方法返回数据。