当用户登录时检查用户名和企业名是否可用,以前的做法是在旁边加一个按钮,点击“检查”,就向服务器发出请求,然后等待……服务器返回信息,继续操作。
如果我们用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>
<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);
}
%>
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);
}
%>