zoukankan      html  css  js  c++  java
  • 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      %>
  • 相关阅读:
    如何删除日志?
    sql lock
    生成DAL
    字符串ID替换
    精典SQL:分组合并列值
    SQL Server2005 XML数据类型基础
    Buckup
    SQL试题
    SQL处理表重复记录
    Left Join 中on与where的区别
  • 原文地址:https://www.cnblogs.com/luckyflower/p/3634669.html
Copyright © 2011-2022 走看看