JSP---网上商城->使用Ajax技术验证用户名是否已存在
js代码:
1 <script language="javascript"> 2 var req; 3 function createReq() { 4 if (window.XMLHttpRequest) { 5 req = new XMLHttpRequest(); 6 } else if (window.ActiveXObject) { 7 req = new ActiveXObject("Microsoft.XMLHTTP"); 8 } 9 } 10 11 function Validate() { 12 createReq(); 13 var id = document.getElementById("cid"); 14 var url = "Validate.jsp?id=" + escape(id.value); 15 req.open("Get", url, true); 16 req.onreadystatechange = callback; 17 req.send(); 18 } 19 20 function callback() { 21 if (req.readyState == 4) { 22 if (req.status == 200) { 23 var msg = document.getElementById("msg"); 24 msg.innerHTML = req.responseText; 25 } 26 } 27 } 28 </script>
用户注册的jsp页面关键html代码
1 <!-- 输入用户名的文本框 --> 2 <input type="text" id="cid" name="name" onBlur="Validate()" /> 3 <!-- 显示信息span --> 4 <span id="msg" style="color: red;"></span>
后台处理的异步请求的代码(Validate.jsp)
1 <% 2 String id = request.getParameter("id"); 3 if (id != null) { 4 if (CustomerMgr.getInstance().existName(id)) { 5 out.write("该用户名已存在!"); 6 } else { 7 out.write("恭喜你,访用户名可以使用!"); 8 } 9 10 } 11 %>
体会:当用户名文本框失出焦点(onblur事件)时,由js创建一个异步请求对象向服务器发出一个请求并传入用户名参数,如果服务器准备就绪,接收请求并处理,并将响应的信息传回客户端.