ajax学习之1-登录验证之-json

ajax登陆验证的json版本，主要是xmlhttprequest获取时代码要写对，核心代码：

1 //取出json格式数据,myXmlHttpRequest.responseXML是个xml dom对象
2 var mes=myXmlHttpRequest.responseText;
3 //json数据是原生态数据，
4 var mes_obj=eval('('+mes+')');
5 $("myres").value=mes_obj.res;

registerPro.jsp(服务器端)

1 out.print("{'res':'该用户不可以用','date':'2011-11'}");

完整代码如下：

 1 <%@ page language="java" import="java.util.*" 
 2 pageEncoding="utf-8"%>
 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 4 <html>
 5   <head>  
 6     <title>My JSP 'register.jsp' starting page</title>
 7     <script type="text/javascript">
 8     function $(id)
 9     {
10       return document.getElementById(id);
11     }    
12     function getXmlHttpObject(){
13     var xmlHttpRequest;
14     //不同浏览器获取对象xmlHttpRequest对象方法不同
15     if(window.ActiveXObject)
16     {
17         //是ie内核
18         xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");    
19     }
20     else{
21         xmlHttpRequest=new XMLHttpRequest();        
22     }
23     return xmlHttpRequest;    
24     }
25     var myXmlHttpRequest="";
26     function chuli()
27     {
28         if(myXmlHttpRequest.readyState==4)
29         {
30             //取出json格式数据,myXmlHttpRequest.responseXML是个xml dom对象
31              var mes=myXmlHttpRequest.responseText;
32             //json数据是原生态数据，
33             var mes_obj=eval('('+mes+')');
34             $("myres").value=mes_obj.res;        
35         }
36     }
37     function checkName()
38     {
39         
40         myXmlHttpRequest=getXmlHttpObject();
41         if(myXmlHttpRequest)
42         {
43             /*
44             var url="./registerPro.jsp?mytime="+Date()+"&username="+$("username").value;                        
45             //****************使用get方式提交*****************************
46             //使用true代表使用异步机制,打开请求
47             myXmlHttpRequest.open("get",url,true);
48             //指定回调函数
49             myXmlHttpRequest.onreadystatechange=chuli;
50             //真的发送请求，如果是get，则send null,如果是post，则填入实际的数据
51             myXmlHttpRequest.send(null);
52             */
53             //****************使用post方式提交*****************************
54             var url="./registerProJson.jsp";
55             var data="username="+$("username").value;
56             //打开请求,使用true代表使用异步机制
57             myXmlHttpRequest.open("post",url,true);
58             //此处有一句话，必须
59             myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");            
60             //指定回调函数
61             myXmlHttpRequest.onreadystatechange=chuli;
62             //真的发送请求，如果是get，则send null,如果是post，则填入实际的数据
63             myXmlHttpRequest.send(data);                                    
64         }
65         else
66         {
67         }
68     }
69     //写一个函数
70     
71     </script>
72   </head>
73   
74   <body>
75   <form action=# method="post"> 
76     用户名:<input type="text" onkeyup="checkName();" name="username" id="username"></input>
77      <input type="button" value="验证用户名" onclick="checkName();"/>
78   <input type="text" id="myres" style="color:red;border:0"></input>   
79      密码:<input type="password" name="pass"></input>
80      <input type="submit" value="register"/>
81   </form>
82   
83   
84    <form  action=# method="post">
85     用户名:<input type="text" name="username"></input>
86      密码:<input type="text" name="pass"></input>
87      <input type="submit" value="register"/>
88   </form>
89   
90   </body>
91 </html>

my Code

registerPro.jsp:

 1 <%@ page language="java" import="java.util.*" 
 2 pageEncoding="utf-8"%>    
 3   <%
 4           //告诉服务器不缓存数据
 5           response.setHeader("Cache-Control", "no-cache");
 6           //此处写text/xml一定不要写错
 7           response.setHeader("Content-type","text/html");
 8         String username=request.getParameter("username");
 9         System.out.println("用户名是"+username);
10         if(username.equals("yun"))
11         {    
12             System.out.println("用户名不可用");                    
13             out.print("{'res':'该用户不可以用','date':'2011-11'}");
14         }    
15         else
16         {
17             System.out.println("可以用啊啊啊");                       
18             out.print("{'res':'该用户可以用','date':'2011-11'}");
19             }    
20         
21         
22      %>

my Code