Ajax 编写的用户注册实例及技术小节

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

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

　　HTML页面的完整代码如下：

xml 代码

＜%@page language="java" contentType="text/html;charset=GBK"%＞

＜script language="javascript" type="text/javascript"＞

＜!--

/**//**Ajax 开始 by Alpha 2007-7-5*/

5

6 var http = getHTTPObject();

7

8 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 }

28

29 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 }

49

50 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 结束*/

92

93//检测表单

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 else

104 {

105　 document.getElementById("password").style.background= "#FFFFFF";

106　 document.getElementById("passwordStr").style.display = "none";

107 }

108}

109

110function 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　 else

120　 {

121 document.getElementById("confirmPassword").style.background= "#FFFFFF";

122 document.getElementById("confirmPasswordStr").style.display = "none";

123　 }

124}

125

126function 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}

155

156//--＞

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＞

164

165＜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＞

199

200 ＜div align="center"＞

201　 ＜input type="button" name="ok" value=" 确 定 " onclick="checkfield()"＞

202

203　 ＜input type="reset" name="reset" value=" 取 消 "＞

204 ＜/div＞

205

206＜/form＞

207＜/body＞

208＜/html＞

　　用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求后，接下来要决定当收到服务器的响应后，需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名，如下所示:xmlhttp_request.onreadystatechange =FunctionName;

　　FunctionName是用JavaScript创建的函数名，注意不要写成FunctionName()，当然我们也可以直接将JavaScript代码创建在onreadystatechange之后。

　　我们调用request.open()-它用服务器打开套接字频道，使用一个HTTP动词(GET或POST)作为第一个参数并且以数据提供者的URL作为第二个参数。request.open()的最后一个参数被设置为true-它指示该请求的异步特性。注意，该请求还没有被提交。随着对request.send()的调用，开始提交-这可以为POST提供任何必要的有效载荷。在使用异步请求时，我们必须使用request.onreadystatechanged属性来分配请求的回调函数。(如果请求是同步的话，我们应该能够在调用request.send之后立即处理结果，但是我们也有可能阻断用户，直到该请求完成为止。)
      再看看数据提供者的URL，url = "/chkUserAndCom"，servlet如下：

 

xml 代码

1/**//*

2 * Created on 2005-12-31

3 *

4 * TODO To change the template for this generated file go to

5 * Window - Preferences - Java - Code Style - Code Templates

6 */

7package com.event;

8

9import javax.servlet.ServletException;

10import javax.servlet.http.HttpServletRequest;

11import javax.servlet.http.HttpServletResponse;

12

13import com.beans.EBaseInfo;

14

15/** *//**

16 * @author Alpha 2007-7-5

17 *

18 * ＜P＞Ajax 演示---企业注册时检查企业用户名和企业名称＜/P＞

19 *

20 * TODO To change the template for this generated type comment go to

21 * Window - Preferences - Java - Code Style - Code Templates

22 */

23public class CheckUserAndComNm {

24 private String msgStr = "";

25 protected void doGet(HttpServletRequest request,HttpServletResponse response)

26 throws ServletException

27 {

28

29 　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 　try

36 　{

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 　else

45 　{

46 boolean bTmp=info.findUser(userName); //找查数据库中有无该用户名

47 if(bTmp)

48 　msgStr ="对不起,此用户名已经存在,请更换用户名注册!";

49 else

50 　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 　else

62 　{

63 boolean bTmp=info.findCom(comName); //找查数据库中有无该企业名

64 if(bTmp)

65 　msgStr ="对不起,此企业名称已经存在,请更换企业名称注册!";

66 else

67 　msgStr ="";

68 　}

69 　response.getWriter().write(msgStr);

70

71 }

72 　}

73 　catch(Exception ex)

74 　{

75 　}

76 　finally

77 　{

78 request.setAttribute("url",url);

79 　}

80 }

81

82 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是个好东西。

分享到：

用java向一个Web站点发送POST请求 | 关于jsp乱码问题的解决

• 2007-07-16 19:59
• 浏览 1326
• 评论(0)
• 查看更多

相关推荐

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

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

ajax应用实例 用AJAX编写用户注册时的应用实例

ajax应用实例 用AJAX编写用户注册时的应用实例

Ajax之用户注册实例源码

这是一个简单的Ajax用户注册的实例源码，希望对初学者有帮助。

ajax编写用户注册的应用实例

关于基本ajax知识讲解，和完成用户名炎症应用

ajax 实例实例实例ajax 实例实例实例ajax 实例实例实例

ajax 实例实例实例ajax 实例实例实例ajax 实例实例实例ajax 实例实例实例ajax 实例实例实例ajax 实例实例实例ajax 实例实例实例ajax 实例实例实例

ASP.NET Ajax 写的一个用户注册实例

本人用ASP.NET Ajax 写的一个用户注册实例，希望对大家有所帮助。

Ajax之用户注册实例_ajaxcheckuser.zip

Ajax之用户注册实例_ajaxcheckuser.zip

(.net)Ajax之用户注册实例源码AjaxCheckUs

(.net)Ajax之用户注册实例源码AjaxCheckUs

Ajax之用户注册实例_aspx开发教程.rar

Ajax之用户注册实例_aspx开发教程

AJAX+servlet入门实例用户注册

AJAX+servlet入门实例用户注册

ASP.NET源码——Ajax之用户注册实例.zip

ASP.NET源码——Ajax之用户注册实例.zip

Ajax编程技术与实例

Ajax编程技术与实例

ASP.NET-[其他类别]Ajax之用户注册实例.zip

ASP.NET-[其他类别]Ajax之用户注册实例.zip

用AJAX编写用户注册时的

用AJAX编写用户注册时的TTX,我所举的这个例子是一个企业用户注册时的一个应用，当用户注册时检查用户名和企业名是否可用，以前的做法是在旁边加一个按钮，点击“检查”，就向服务器发出请求，然后等待……服务器返回...

一个个人编写的简单的Ajax实例。eclipse开发

Ajax 实例，Ajax 实例，Ajax 实例Ajax 实例，Ajax 实例，Ajax 实例，Ajax 实例

Ajax网站开发典型实例JSP源码包

Ajax网站开发典型实例JSP源码包

[其他类别]Ajax之用户注册实例_ajaxcheckuser（ASP.NET源码）.rar

[其他类别]Ajax之用户注册实例_ajaxcheckuser（ASP.NET源码）.rar

Ajax实例演示Ajax实例演示

Ajax实例演示Ajax实例演示Ajax实例演示Ajax实例演示

Ajax注册验证用户名实例

Ajax注册验证用户名实例，及各种Ajax的js文件