Ajax的局部刷新对于提升用户体验性的确挺给力的,这里用一个日常开发中常见的注册场景来说明ajax的使用:当输入用户名之后及时给出用户名是否已存在的提示。
因为原生的ajax需要手动编码进行浏览器兼容性的处理,比较繁琐,所以更好的选择是用jQuery的ajax进行操作,jQuery做了高度封装,作为程序员来讲不用再考虑浏览器差异,可以把主要精力放在业务逻辑处理上。
不多说,在eclipse中新建一个web工程,在webroot下新建一个文件夹,导入jQuery的脚本文件。
<scripttype="text/javascript"src="jquery/jquery-1.8.3.js"></script>
script"text/javascript">
$(function(){
$("#username").blur(function(){
varusername=$("#username").val();
if(username.length<1){
$("#msg").html("用户名不能为空");
return;//不触发ajax
}
$.post("/ajaxWAR/register",{"uname":username},function(data){
$("<fontsize='5'style='color:red'>"+data+"</font>");
});
});
});
</script>
代码解释:用户在表单中输入用户名之后,当用户名失去焦点,则会触发ajax去后台验证该用户名在数据库中是否已经存在,验证的结果会及时通过回调函数响应在页面元素spanid="msg">上,做到数据的局部刷新。
Form表单:
formaction="#none"method="post">
用户名:input"text"name="username""username"/>span>br>
密码:"password""password""submit""log"value="登陆"/>
"reg""注册""reset""重置"form后台servlet:
@WebServlet("/register")
publicclassregisterServletextendsHttpServlet{
@Override
protectedvoidservice(HttpServletRequestrequest,
HttpServletResponseresponse)throwsservletexception,IOException{
response.setContentType("text/html;charset=utf-8");
Stringuname=request.getParameter("uname");
UserDAOuserDAO=newUserDAOImpl();
Useruser=userDAO.findByName(uname);
PrintWriterpw=response.getWriter();
if(user==null){
}else{
pw.print(对不起,该用户名已存在!!!");
}
}
}
可以看到,该servlet的主要工作就是调用dao去进行数据库查询,并把验证结果通过打印流发送回前端页面。
Dao代码:
publicUserfindByName(Stringname){
Connectionconnection=DBUtil.getConnection();
PreparedStatementpstm=null;
ResultSetrs=null;
Useruser=null;
Stringsql="select*fromuserwhereusername=?";
try{
pstm=connection.prepareStatement(sql);//
pstm.setString(1,name);//设置参数
rs=pstm.executeQuery();执行查询
遍历结果集
while(rs.next()){
user=newUser();
Stringusername=rs.getString("name");
intid=rs.getInt("id");
Stringpassword=rs.getString("password");
user.setName(username);
user.setId(id);
user.setPassword(password);
}
}catch(sqlExceptione){
e.printstacktrace();
}finally{
DBUtil.close(rs,pstm,connection);关闭资源
}
returnuser;
}
测试截图:
图1用户表已存在记录
图2输入用户表中不存在的记录
图3输入用户表中已存在记录
至此,一个最简单的ajax局部刷新小实例就完成了。可以看到,从后台返回的用户名验证信息只是刷新到页面中的一个元素中,并没有刷新整个页面,浏览器地址栏的地址一直没变。