ajax学习之1-经典登陆验证
1.ajax诞生原由
传统客户端和服务器端响应方式的缺点:a 整体提交 b整个页面刷新 c 用户体验差。
ajax：集7种技术的综合-javascript，xml，xstl，xhtml，dom，xmlhttprequest，css.ajax的本质是http请求。
登陆验证，实现效果如下：
2.练习主要内容：一个注册界面，register.jsp,一个服务器验证界面registerPro.jsp,注册界面上js代码完成ajax交互
3.主要代码如下(备注，能够区分post和get的两种写法，建议用post，好处1-安全，数据量多2-编码格式比较好)：
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 // 根据返回信息格式而定,从服务器页面取出返回的数据 31 //alert("服务器返回了结果"+myXmlHttpRequest.responseText); 32 $("myres").value=myXmlHttpRequest.responseText; 33 } 34 } 35 function checkName() 36 { 37 38 myXmlHttpRequest=getXmlHttpObject(); 39 if(myXmlHttpRequest) 40 { 41 /* 42 var url="./registerPro.jsp?mytime="+Date()+"&username="+$("username").value; 43 //****************使用get方式提交***************************** 44 //使用true代表使用异步机制,打开请求 45 myXmlHttpRequest.open("get",url,true); 46 //指定回调函数 47 myXmlHttpRequest.onreadystatechange=chuli; 48 //真的发送请求，如果是get，则send null,如果是post，则填入实际的数据 49 myXmlHttpRequest.send(null); 50 */ 51 //****************使用post方式提交***************************** 52 var url="./registerPro.jsp"; 53 var data="username="+$("username").value; 54 //打开请求,使用true代表使用异步机制 55 myXmlHttpRequest.open("post",url,true); 56 //此处有一句话，必须 57 myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 58 //指定回调函数 59 myXmlHttpRequest.onreadystatechange=chuli; 60 //真的发送请求，如果是get，则send null,如果是post，则填入实际的数据 61 myXmlHttpRequest.send(data); 62 } 63 else 64 { 65 } 66 } 67 //写一个函数 68 69 </script> 70 </head> 71 72 <body> 73 <form action=# method="post"> 74 用户名:<input type="text" onkeyup="checkName();" name="username" id="username"></input> 75 <input type="button" value="验证用户名" onclick="checkName();"/> 76 <input type="text" id="myres" style="color:red;border:0"></input> 77 密码:<input type="password" name="pass"></input> 78 <input type="submit" value="register"/> 79 </form> 80 81 82 <form action=# method="post"> 83 用户名:<input type="text" name="username"></input> 84 密码:<input type="text" name="pass"></input> 85 <input type="submit" value="register"/> 86 </form> 87 88 </body> 89 </html>
registerPro.jsp
1 <%@ page language="java" import="java.util.*" 2 pageEncoding="utf-8"%> 3 <% 4 //告诉服务器不缓存数据 5 response.setHeader("Cache-Control", "no-cache"); 6 String username=request.getParameter("username"); 7 System.out.println("用户名是"+username); 8 if(username.equals("yun")) 9 { 10 System.out.println("用户名不可用"); 11 out.print("用户名不可用"); 12 } 13 else 14 { 15 System.out.println("可以用啊啊啊"); 16 out.print("可以用啊啊啊"); 17 } 18 %>
