Ajax应用简单实例

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

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

测试页面:ajaxtest.jsp

<% ... @pagelanguage="java"contentType="text/html;charset=GBK" %>
< script language ="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 >
< 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

<% ... @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);
}


%>