jsp+ajax 实现简易的用户名注册无刷新验证

　　　　在注册用户的时候，经常看到刚写完用户名就可以验证用户名是否存在的效果。于是我也尝试了一下，写了一个简单的效果。直接上代码：

form.html代码：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
 7 <script type="text/javascript" src="ajax.js"></script>
 8 <style>
 9 #hasName{
10 font-size:12px;
11 color:red;
12 }
13 </style>
14 </head>
15 
16 <body>
17 <form action="" method="post">
18     用户名:<input type="text" name="username" id="name"/><label id="hasName" ></label>
19  <br>   密码：<input  type="password" name="password" /><br>
20     <input type="submit" />
21 </form>
22 
23 <script type="text/javascript">
24 
25 //jquery 版本
26 /*
27     $('#name').blur(function(){
28         var name = $(this).val();
29         $.ajax({
30         url:"index.jsp?name="+name,
31         type:"post",
32         datetype:"text",
33         success: function(date){
34             $("#hasName").html(date);
35         }
36         });
37     
38     
39     });
40     */
41     
42 //js  版本
43 
44 document.getElementById("name").onblur = function(){
45     var name = this.value;
46     var method = "post";
47     var url = "index.jsp?name="+name;
48     ajax(url,method,success,failed);
49 
50 }
51 function success(date){
52     document.getElementById("hasName").innerHTML = date;
53 }
54 function failed(){
55     alert("请求失败！");
56 }
57 </script>
58 </body>
59 </html>

js的代码直接写在里面了，jquery版本也是可以运行的，还有一个ajax.js的代码如下：

 1 function ajax(url,method, fnSucc, fnFaild)
 2 {
 3     //1.创建Ajax对象
 4     if(window.XMLHttpRequest)
 5     {
 6         var oAjax=new XMLHttpRequest();
 7     }
 8     else
 9     {
10         var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
11     }
12     
13     //2.连接服务器（打开和服务器的连接）
14     oAjax.open(method, url, true);
15     
16     
17     //3.发送
18     oAjax.send();
19     
20     //4.接收
21     oAjax.onreadystatechange=function ()
22     {
23         if(oAjax.readyState==4)
24         {
25             if(oAjax.status==200)
26             {
27                 //alert('成功了：'+oAjax.responseText);
28                 fnSucc(oAjax.responseText);
29             }
30             else
31             {
32                 //alert('失败了');
33                 if(fnFaild)
34                 {
35                     fnFaild();
36                 }
37             }
38         }
39     };
40 }

index.jsp的代码，由于没有连接数据库，所以只有一点如下：

1 String name = String.valueOf(request.getParameter("name"));
2     if(name.equals("wj")){
3         out.println("用户名已存在");
4     }
5     else{
6         out.println("用户名可用");
7     }
posted @ 2014-07-30 14:39  Jing.w  阅读(421)  评论(0)    收藏  举报