本文将介绍一种只通过jsp和servlet进行ajax操作的实现,而不借助于jQuery和struts2等框架.
ajax的核心思想在于不用刷新页面,而普通js表单并没有ajax的原生支持,所以这里使用了隐藏iframe作为一个媒介.
具体实现思想为:让表单提交到servlet,将target设置为本页的一个隐藏frame,这样servlet返回的数据就还是在本页中,而没有进行任何的跳转; 并且如果servlet返回的数据是一个可执行的js代码段,则其会自动执行,所有我们可以用这个原理执行提前准备好的js函数.
1.前端jsp页面代码,就是一个普通的登录表单,只是在form属性中添加了一个target属性指向iframe的name属性
<form action="login.do" method="post" target="frame" >
<table>
<tr>
<td>用户名</td>
<td><input name="name" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<td><button id="login">登录</button></td>
<td id="ajaxInfo" ></td>
</tr>
</table>
</form>
<iframe name="frame" style="display:none"></iframe>
2.准备一个js回调函数,用于在表单提交后处理服务端返回的逻辑
window.onload=function(){
function callBack(data){
if(data=="success"){
alert("success");
}else{
alert("error");
}
}
}
3.服务端servlet的逻辑(servlet的注册已省略)
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name=request.getParameter("name");
String pwd=request.getParameter("pwd");
PrintWriter out= response.getWriter();
String flag="";
//这里作为演示将验证逻辑写死了,完全可以按照业务逻辑更改
if("zhangsan".equals(name) && "123".equals(pwd)){
flag="success";
}else{
flag="error";
}
//最关键的步骤:向前端输出了一段js片段,在其到达页面时会自动调用回调函数
//需要注意的是:调用的函数是写在主页面的,而返回的内容是在iframe子窗体内,所以需要使用parent.函数名 调用
//另外参数需要使用单引号''包围起来
out.write("<script>parent.callBack('"+flag+"')</script>");
}
按以上的逻辑即可完成不使用任何框架的原生ajax操作了,当然ajax还有很多功能这里没有模拟,需要的读者可以参阅其他文章^.^