当用户登录时检查用户名和企业名是否可用，以前的做法是在旁边加一个按钮，点击“检查”，就向服务器发出请求，然后等待……服务器返回信息，继续操作。
如果我们用AJAX技术来实现以上的操作则不必等待服务器返回信息，用户输入用户名或企业名称的时候，当输入文本框失去焦点的时候，则会自动向 服务器发出请求，用户继续做下面的操作，不必点击“检查”，也不必等待服务器返回信息，检查与用户操作是异步的，可同时进行。当服务器信息返回的时候，会 自动在面页相应位置显示返回信息，不必刷新页面，相当于局部刷新的效果。 下面我们来看代码吧。
测试页面:ajaxtest.jsp
<%...@page language="java" contentType="text/html;charset=GBK"%><script language="javascript" type="text/javascript">...
<!-- var http=getHTTPObject(); 
function getHTTPObject()...{ var xmlhttp=false; if(window.XMLHttpRequest)...{ xmlhttp=new XMLHttpRequest(); if(xmlhttp.overrideMimeType)...{ xmlhttp.overrideMimeType("text/xml");
} }else...{ try...{ xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); }catch(e)...{ try...{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch(E)...{ xmlhttp=false; } } } return xmlhttp; } function chkUser()...{ var url="CheckUserAndComNm.jsp"; var name=document.getElementById("username").value; url+="?oprate=chkUser&userName="+name; http.open("GET",url,true); http.onreadystatechange=handleHttpResponse; http.send(null); return; } function handleHttpResponse()...{ if(http.readyState==4)...{ if(http.status==200)...{ var xmlDocument=http.responseXML; if(http.responseText!="")...{ document.getElementById("showStr").style.display=""; document.getElementById("userName").style.background="#FF0000"; document.getElementById("showStr").innerText = http.responseText; }else...{ document.getElementById("userName").style.background="#FFFFFF"; document.getElementById("showStr").style.display = "none"; } }else...{ alert("你所请求的页面发生异常,可能会影响你浏览该页的信息"); alert(http.status); } } } 
//-->
</script><body topmargin="0"> <form name="form1" method="post" action="CheckUserAndComNm.jsp"> <table width="100%"> <tr><td align="center"><H2>Ajax演示程序</H2></td></tr> <tr><td align="center">个人注册</td></tr> </table> <HR> <table width="400" border="0" cellpadding="1" cellspacing="1" align="center"> <tr> <td><font color="red">*</font></td> <td>用户帐号:</td> <td> <input type="text" name="userName" maxlength="20" style="background:#FFFFFF" onBlur="chkUser()" value=""/> </td> </tr> <tr> <td colspan=3> <span id="showStr" style="background-color:#FF9900;display:none" ></span> </td> </tr> </table> <div align="center"> <input type="submit" name="ok" value="确定"> <input type="reset" name="reset" value="取消"> </div> </form></body>
验证页面代码:CheckUserAndComNm.jsp
<%...@ page language="java" contentType="text/html; charset=GB2312" pageEncoding="GB2312"%><%... String msgStr="";String oprate=request.getParameter("oprate");String userName=request.getParameter("userName");//out.println("oprate="+oprate);//out.println("userName="+userName);try{if(oprate.equals("chkUser")){ response.setContentType("text/html;charset=GB2312"); if(userName.length()<5||userName.length()>20) { msgStr="用户名必须为字母,数字或下划县,长度为5-20个字符!"; }else{ if(userName.equals("oscar")) msgStr="对不起,此用户已经存在"; else msgStr=""; }}response.getWriter().write(msgStr);}catch(Exception e){}finally{//request.setAttribute("url", url);}%>
