Ajax应用简单实例

当用户登录时检查用户名和企业名是否可用，以前的做法是在旁边加一个按钮，点击“检查”，就向服务器发出请求，然后等待……服务器返回信息，继续操作。

　　如果我们用AJAX技术来实现以上的操作则不必等待服务器返回信息，用户输入用户名或企业名称的时候，当输入文本框失去焦点的时候，则会自动向 服务器发出请求，用户继续做下面的操作，不必点击“检查”，也不必等待服务器返回信息，检查与用户操作是异步的，可同时进行。当服务器信息返回的时候，会 自动在面页相应位置显示返回信息，不必刷新页面，相当于局部刷新的效果。 下面我们来看代码吧。

测试页面:ajaxtest.jsp

<%...@pagelanguage="java"contentType="text/html;charset=GBK"%>
<scriptlanguage="javascript"type="text/javascript">...
<!--
varhttp=getHTTPObject();

functiongetHTTPObject()...{
varxmlhttp=false;
if(window.XMLHttpRequest)...{
xmlhttp=newXMLHttpRequest();
if(xmlhttp.overrideMimeType)...{
xmlhttp.overrideMimeType("text/xml");
}
}else...{
try...{
xmlhttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(e)...{
try...{
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}catch(E)...{
xmlhttp=false;
}
}
}
returnxmlhttp;
}

functionchkUser()...{
varurl="CheckUserAndComNm.jsp";
varname=document.getElementById("username").value;
url+="?oprate=chkUser&userName="+name;

http.open("GET",url,true);
http.onreadystatechange=handleHttpResponse;
http.send(null);
return;
}

functionhandleHttpResponse()...{
if(http.readyState==4)...{
if(http.status==200)...{
varxmlDocument=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>
<bodytopmargin="0">
<formname="form1"method="post"action="CheckUserAndComNm.jsp">
<tablewidth="100%">
<tr><tdalign="center"><H2>Ajax演示程序</H2></td></tr>
<tr><tdalign="center">个人注册</td></tr>
</table>

<HR>

<tablewidth="400"border="0"cellpadding="1"cellspacing="1"align="center">
<tr>
<td><fontcolor="red">*</font></td>
<td>用户帐号:</td>
<td>
<inputtype="text"name="userName"maxlength="20"style="background:#FFFFFF"onBlur="chkUser()"value=""/>

</td>
</tr>

<tr>
<tdcolspan=3>
<spanid="showStr"style="background-color:#FF9900;display:none"></span>
</td>
</tr>

</table>

<divalign="center">
<inputtype="submit"name="ok"value="确定">
<inputtype="reset"name="reset"value="取消">
</div>
</form>
</body>

验证页面代码:CheckUserAndComNm.jsp

<%...@pagelanguage="java"contentType="text/html;charset=GB2312"
pageEncoding="GB2312"%>

<%...
StringmsgStr="";
Stringoprate=request.getParameter("oprate");
StringuserName=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(Exceptione){

}finally{
//request.setAttribute("url",url);
}


%>