Ajax实现异步验证和访问

我们在做网页的时候，通常会通过用jsp和servlet来实现页面的跳转，但这样一来对于大的项目会显得啰嗦麻烦，还容易出错，所以这时候我们通常会用到Ajax来实现异步请求和刷新。首先我们要知道什么是Ajax，Ajax简单来说就是不用刷新页面就能获取后台数据并实现与前台数据的交互进行验证，这样就不用通过servlet来进行刷新了，下面我们具体用例子来看一下用Ajax实现验证客户用户名是否重复。

<script type="text/javascript">
window.οnlοad=function(){
document.getElementById("cusno").οnblur=function(){
if(this.value==""){
alert("客户编号不能为空！");
return;
}
var xmlHttpRequest=new XMLHttpRequest();
xmlHttpRequest.onreadystatechange=function(){
if(xmlHttpRequest.status==200){
if(xmlHttpRequest.readyState==4){
var v=xmlHttpRequest.responseText;
if(v=='Y'){
alert("客户编号已经存在！");
return;
}else{
alert("编号可以使用！");
}
}
}
}
var url='<%=request.getContextPath()%>/cusregisterservlet?reqCode=checkCusinfo & cusno='+this.value;
xmlHttpRequest.open("post",url,true);
xmlHttpRequest.send(null);
}
}
</script>

这段JS代码主要是当离开客户编号焦点时，触发onclick时间，获取后台数据库的信息，用后台servlet判断是否有这个值，交给前端jsp做处理，弹出消息框。URL的内容是这段代码是处理后台servlet的checkCusinfo的方法并把cusno的值传过去进行判断，这样不杀新页面就可以实现验证功能。

另一种方式就是用JQuery实现异步刷新功能，代码如下：

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
$("#cusno").blur(function(){
var v=$(this).val();
if(v==''){
$("#cusnospan").html("客户编号不能为空！");
return;
}
var url="<%=request.getContextPath()%>/cusregisterservlet";
$.post(
url,
{reqCode:"checkCusinfo",cusno:v},
function(data){
if(data='Y'){
$("#cusnospan").html("客户编号已经存在！");
}else{
$("#cusnospan").html("客户编号可以使用！");
}
}
);
});
});
</script>

基本内容与上面一致，只是里面的代码为JQuery格式的，这个写起来更方便。

还有我们在点击某个更新的按钮时，页面必须通过servlet和jsp才能进行刷新，而现在我们可以通过JSON来进行简化这个过程，直接更新完显示，代码如下：

servlet里的doPost方法：

req.setCharacterEncoding("utf-8");
CusInfoDao dao = new CusInfoDao();
List<Custom> list= dao.findAllCustoms();
JSONArray jsonArray = JSONArray.fromObject(list);
resp.setContentType("text/html;charset=utf-8");
PrintWriter out= resp.getWriter();
out.print(jsonArray.toString());
out.close();

list为在数据库中查找出所有信息的结果集，然后把它赋给JSON，在前台jsp中处理jsonj即可。

前台JS代码为：

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript">
  $(function(){
  var url='<%=request.getContextPath()%>/cusinfo/findallcus.do';
  $.get(url,function(data){
  var rows="";
  $.each(data,function(i,d){
  rows+="<h2>"+d.cusNo+":"+d.cusName+"</h2>";
  });
 
  $("#show").append(rows);
 
  },"json");
 
  });
  </script>

获取了JSON里的值，并把它按一定格式输出来，这比用servlet处理结果集再在jsp中显示简单多了。