JSP---网上商城->使用Ajax技术验证用户名是否已存在

时间：2021-01-25 17:08:45

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创建一个异步请求对象向服务器发出一个请求并传入用户名参数,如果服务器准备就绪,接收请求并处理,并将响应的信息传回客户端．

标签：

相关文章