您的位置：首页 > 其它

Ajax应用简单实例

2007-08-16 09:11 627 查看

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

测试页面:ajaxtest.jsp

<%...@page language="java" contentType="text/html;charset=GBK"%>

<!--

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>

<tr><td align="center"><H2>Ajax演示程序</H2></td></tr>

</table>

<HR>

<tr>

<td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</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);

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航