AJAX编写用户注册实例及技术小结

下载本文示例代码
　　我所举的这个例子是一个企业用户注册时的一个应用，当用户注册时检查用户名和企业名是否可用，以前的做法是在旁边加一个按钮，点击“检查”，就向服务器发出请求，然后等待……服务器返回信息，继续操作。如果我们用Ajax技术来实现以上的操作则不必等待服务器返回信息，用户输入用户名或企业名称的时候，当输入文本框失去焦点的时候，则会自动向服务器发出请求，用户继续做下面的操作，不必点击“检查”，也不必等待服务器返回信息，检查与用户操作是异步的，可同时进行。当服务器信息返回的时候，会自动在面页相应位置显示返回信息，不必刷新页面，相当于局部刷新的效果。 　　下面我们来看代码吧。　　HTML页面的完整代码如下： 1＜%@page language="java" contentType="text/html;charset=GBK"%＞2＜script language="javascript" type="text/javascript"＞3＜!--4/**//**Ajax 开始 by Alpha 2005-12-31*/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=" 确 定 " onclick="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之后。共2页。 1 2 : 　　我所举的这个例子是一个企业用户注册时的一个应用，当用户注册时检查用户名和企业名是否可用，以前的做法是在旁边加一个按钮，点击“检查”，就向服务器发出请求，然后等待……服务器返回信息，继续操作。如果我们用Ajax技术来实现以上的操作则不必等待服务器返回信息，用户输入用户名或企业名称的时候，当输入文本框失去焦点的时候，则会自动向服务器发出请求，用户继续做下面的操作，不必点击“检查”，也不必等待服务器返回信息，检查与用户操作是异步的，可同时进行。当服务器信息返回的时候，会自动在面页相应位置显示返回信息，不必刷新页面，相当于局部刷新的效果。 　　下面我们来看代码吧。　　HTML页面的完整代码如下： 1＜%@page language="java" contentType="text/html;charset=GBK"%＞2＜script language="javascript" type="text/javascript"＞3＜!--4/**//**Ajax 开始 by Alpha 2005-12-31*/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=" 确 定 " onclick="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之后。共2页。 1 2 : 下载本文示例代码


AJAX编写用户注册实例及技术小结AJAX编写用户注册实例及技术小结AJAX编写用户注册实例及技术小结AJAX编写用户注册实例及技术小结AJAX编写用户注册实例及技术小结AJAX编写用户注册实例及技术小结AJAX编写用户注册实例及技术小结AJAX编写用户注册实例及技术小结AJAX编写用户注册实例及技术小结AJAX编写用户注册实例及技术小结AJAX编写用户注册实例及技术小结AJAX编写用户注册实例及技术小结AJAX编写用户注册实例及技术小结AJAX编写用户注册实例及技术小结AJAX编写用户注册实例及技术小结