ajax学习之1-登录验证之-json
ajax登陆验证的json版本，主要是xmlhttprequest获取时代码要写对，核心代码：
register.jsp:
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'}");
完整代码如下：
register.jsp:
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>
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 %>
