本文共 10043 字,大约阅读时间需要 33 分钟。
如果我们用Ajax技术来实现以上的操作则不必等待服务器返回信息,用户输入用户名或企业名称的时候,当输入文本框失去焦点的时候,则会自动向服务器发出请求,用户继续做下面的操作,不必点击“检查”,也不必等待服务器返回信息,检查与用户操作是异步的,可同时进行。当服务器信息返回的时候,会自动在面页相应位置显示返回信息,不必刷新页面,相当于局部刷新的效果。 下面我们来看代码吧。
HTML页面的完整代码如下:1<%@page language="java" contentType="text/html;charset=GBK"%>2<script language="javascript" type="text/javascript">3<!--4/**//**Ajax 开始 by Alpha 2007-7-5*/56 var http = getHTTPObject();78 function handleHttpResponse(){ 9 if(http.readyState == 4){ 10 if(http.status == 200){ 11 var xmlDocument = http.responseXML;12 if(http.responseText!=""){ 13 document.getElementById("showStr").style.display = "";14 document.getElementById("userName").style.background= "#FF0000";15 document.getElementById("showStr").innerText = http.responseText;16 }else{ 17 document.getElementById("userName").style.background= "#FFFFFF";18 document.getElementById("showStr").style.display = "none";19 }20 21 }22 else{ 23 alert("你所请求的页面发生异常,可能会影响你浏览该页的信息!");24 alert(http.status);25 }26 }27 }2829 function handleHttpResponse1(){ 30 if(http.readyState == 4){ 31 if(http.status == 200){ 32 var xmlDocument = http.responseXML;33 if(http.responseText!=""){ 34 document.getElementById("comNmStr").style.display = "";35 document.getElementById("comNm").style.background= "#FF0000";36 document.getElementById("comNmStr").innerText = http.responseText;37 }else{ 38 document.getElementById("comNm").style.background= "#FFFFFF";39 document.getElementById("comNmStr").style.display = "none";40 }41 42 }43 else{ 44 alert("你所请求的页面发生异常,可能会影响你浏览该页的信息!");45 alert(http.status);46 }47 }48 }4950 function chkUser(){ 51 var url = "/chkUserAndCom";52 var name = document.getElementById("userName").value;53 url += ("&userName="+name+"&oprate=chkUser");54 http.open("GET",url,true);55 http.onreadystatechange = handleHttpResponse;56 http.send(null);57 return ;58 }59 function chkComNm(){ 60 var url = "/chkUserAndCom";61 var name = document.getElementById("comNm").value;62 url += ("&comName="+name+"&oprate=chkCom");63 http.open("GET",url,true);64 http.onreadystatechange = handleHttpResponse1;65 http.send(null);66 return ;67 }68 69 //该函数可以创建我们需要的XMLHttpRequest对象70 function getHTTPObject(){ 71 var xmlhttp = false;72 if(window.XMLHttpRequest){ 73 xmlhttp = new XMLHttpRequest();74 if(xmlhttp.overrideMimeType){ 75 xmlhttp.overrideMimeType('text/xml');76 }77 }78 else{ 79 try{ 80 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");81 }catch(e){ 82 try{ 83 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");84 }catch(E){ 85 xmlhttp = false;86 }87 }88 }89 return xmlhttp;90 }91/**//**Ajax 结束*/9293//检测表单94function chkpassword()95{ 96 var m=document.form1;97 if(len(m.password.value) > 20 || len(m.password.value) < 5 || !isStr(m.password.value))98 { 99 document.getElementById("passwordStr").style.display = "";100 document.getElementById("password").style.background= "#FF0000";101 document.getElementById("passwordStr").innerText = "对不起,密码必须为英文字母、数字或下划线,长度为5~20!";102 }103 else104 { 105 document.getElementById("password").style.background= "#FFFFFF";106 document.getElementById("passwordStr").style.display = "none";107 }108}109110function chkconfirmPassword()111{ 112 var m=document.form1;113 if (m.password.value != m.confirmPassword.value)114 { 115 document.getElementById("confirmPasswordStr").style.display = "";116 document.getElementById("confirmPassword").style.background= "#FF0000";117 document.getElementById("confirmPasswordStr").innerText = "对不起,密码与重复密码不一致!";118 }119 else120 { 121 document.getElementById("confirmPassword").style.background= "#FFFFFF";122 document.getElementById("confirmPasswordStr").style.display = "none";123 }124}125126function checkfield()127{ 128 var m=document.form1; 129 if(m.userName.value.length==0)130 { 131 alert("对不起,用户名必须为英文字母、数字或下划线,长度为5~20。");132 m.userName.focus();133 return false;134 }135 if(m.password.value.length==0)136 { 137 alert("对不起,密码必须为英文字母、数字或下划线,长度为5~20。");138 m.password.focus();139 return false;140 }141 if (m.password.value != m.confirmPassword.value)142 { 143 alert("对不起,密码与重复密码不一致!");144 m.confirmPassword.focus();145 return false;146 } 147 if(m.comNm.value.length==0)148 { 149 alert("对不起,企业名称不能为空!!");150 m.comNm.focus();151 return false; 152 }153 m.submit();154}155156//--> 157</script>158<body topmargin="0">159<form name="form1" method="post" action="/Control?act=Register">160<table width="100%">161 <tr><td align="center"> <H2>Ajax 演示程序</H1></td></tr>162 <tr><td align="center"> ------ 企业注册 By Alpha</td></tr>163</table>164165<HR>166 <table width="400" border="0" cellpadding="1" cellspacing="1" align="center" >167 <tr>168 <td><font color="red">*</font></td>169 <td>用户帐号:</td>170 <td>171 <input type="text" name="userName" maxlength="20" style="background:#FFFFFF" onBlur="chkUser()" value=""/>172 <div id="showStr" style="background-color:#FF9900;display:none"></div>173 </td> 174 </tr>175 <tr>176 <td><font color="red">*</font></td>177 <td>企业名称:</td>178 <td>179 <input type="text" name="comNm" maxlength="100" style="background:#FFFFFF" onBlur="chkComNm()" value=""/>180 <div id="comNmStr" style="background-color:#FF9900;display:none"></div>181 182 </td> 183 </tr> 184 <tr>185 <td><font color="red">*</font></td>186 <td>用户密码:</td>187 <td><input type="password" name="password" maxlength="20" style="background:#FFFFFF" onBlur="chkpassword()"/>188 <div id="passwordStr" style="background-color:#FF9900;display:none"></div>189 </td>190 </tr>191 <tr>192 <td><font color="red">*</font></td>193 <td>确认密码:</td>194 <td><input type="password" name="confirmPassword" maxlength="20" style="background:#FFFFFF" onBlur="chkconfirmPassword()"/>195 <div id="confirmPasswordStr" style="background-color:#FF9900;display:none"></div>196 </td> 197 </tr>198 </table> 199200 <div align="center"> 201 <input type="button" name="ok" value=" 确 定 " οnclick="checkfield()">202 203 <input type="reset" name="reset" value=" 取 消 ">204 </div>205206</form>207</body>208</html>
用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求后,接下来要决定当收到服务器的响应后,需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名,如下所示:xmlhttp_request.onreadystatechange =FunctionName;
FunctionName是用JavaScript创建的函数名,注意不要写成FunctionName(),当然我们也可以直接将JavaScript代码创建在onreadystatechange之后。
1/**//*2 * Created on 2005-12-313 *4 * TODO To change the template for this generated file go to5 * Window - Preferences - Java - Code Style - Code Templates6 */7package com.event;89import javax.servlet.ServletException;10import javax.servlet.http.HttpServletRequest;11import javax.servlet.http.HttpServletResponse;1213import com.beans.EBaseInfo;1415/** *//**16 * @author Alpha 2007-7-517 * 18 * <P>Ajax 演示---企业注册时检查企业用户名和企业名称</P>19 *20 * TODO To change the template for this generated type comment go to21 * Window - Preferences - Java - Code Style - Code Templates22 */23public class CheckUserAndComNm { 24 private String msgStr = "";25 protected void doGet(HttpServletRequest request,HttpServletResponse response) 26 throws ServletException 27 { 2829 EComBaseInfo info=new EComBaseInfo();30 String oprate=request.getParameter("oprate")).trim(); 31 String userName=request.getParameter("userName");32 String passWord=request.getParameter("password");33 String comName=request.getParameter("comName");34 35 try36 { 37 if(oprate.equals("chkUser"))38 { 39 response.setContentType("text/html;charset=GB2312");40 if(userName.length()<5||userName.length()>20)41 { 42 msgStr = "对不起,用户名必须为字母、数字或下划线,长度为5-20个字符!";43 }44 else45 { 46 boolean bTmp=info.findUser(userName); //找查数据库中有无该用户名47 if(bTmp) 48 msgStr ="对不起,此用户名已经存在,请更换用户名注册!";49 else50 msgStr ="";51 }52 response.getWriter().write(msgStr);53 }54 else if(oprate.equals("chkCom"))55 { 56 response.setContentType("text/html;charset=GB2312");57 if(comName.length()<6||comName.length()>100)58 { 59 msgStr = "对不起,公司名称长度为6-100个字符(不包括字符内的空格)!";60 }61 else62 { 63 boolean bTmp=info.findCom(comName); //找查数据库中有无该企业名64 if(bTmp) 65 msgStr ="对不起,此企业名称已经存在,请更换企业名称注册!";66 else67 msgStr ="";68 }69 response.getWriter().write(msgStr);70 71 }72 }73 catch(Exception ex)74 { 75 }76 finally77 { 78 request.setAttribute("url",url);79 }80 }8182 protected void doPost(HttpServletRequest request,HttpServletResponse response) 83 throws ServletException 84 { 85 doGet(request,response);86 }87}88
AJAX技术小结
1. Ajax(Asynchronous JavaScript and XML)是一个结合了Java技术、XML、以及JavaScript的编程技术,可以让你构建基于Java技术的Web应用,并打破了使用页面重载的惯例。 2. Ajax,异步JavaScript与XML,是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样,Web页面不用打断交互流程进行重新加裁,就可以动态地更新。使用Ajax,你可以创建接近本地桌面应用的,直接的、高可用的、更丰富的、更动态的Web用户接口界面。 3. 对于Mozilla﹑Netscape﹑Safari、Firefox等浏览器,创建XMLHttpRequest 方法如下:xmlhttp_request = new XMLHttpRequest(); 4. IE等创建XMLHttpRequest 方法如下:xmlhttp = new ActiveXObject("Msxml2.XMLHTTP") 或 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 5. xmlhttp_request.open('GET', URL, true); xmlhttp_request.send(null); 6. open()的第一个参数是HTTP请求方式—GET,POST或任何服务器所支持的您想调用的方式。 按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理请求。第二个参数是请求页面的URL。第三个参数设置请求是否为异步模式。如果是TRUE,JavaScript函数将继续执行,而不等待服务器响应。这就是"AJAX"中的"A"。 Ajax技术运用的好的话,给我们的网页增添了许多友好的效果,给用户还来更好的感觉。Ajax是个好东西。来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/10294527/viewspace-123007/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/10294527/viewspace-123007/