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-编码格式比较好)：

 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      %>