ajax 登录验证入门

来源：互联网发布：金银在线软件下载编辑：程序博客网时间：2024/05/17 03:07

最进几天在练习ajax,其实学习ajax已经有一段时间,但是一直都是抄书上的代码,没有自己写过代码,这几天终于可是自己写了,呵呵,总结一下经验了,呵呵,今天还真的不好意思,班上唱歌没去,在这里要向班长同志道一下谦啊,呵呵,真的不好意思啊,呵呵不乱讲了,开始了.

1,首先是我的登录页面:代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
  <SCRIPT language=JavaScript>
var xmlHttp;
function createXMLHttpRequest(){
    if(window.ActiveXObject){
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      else if(window.XMLHttpRequest){
         xmlHttp=new XMLHttpRequest();
         }
         }
function validate(){
         createXMLHttpRequest();
         var userName=document.getElementById("userName");
         var userPwd=document.getElementById("userPwd");
         var url="checkservlet?userName=" +escape(userName.value) + "&userPwd=" + escape(userPwd.value);
         xmlHttp.open("GET",url,true);
         xmlHttp.onreadystatechange=callback;
         xmlHttp.send(null);
         }
         function callback(){
         if(xmlHttp.readyState==4){
            if(xmlHttp.status==200){
                setMessage();
                }
                }
                }
        function setMessage(){
            var a=xmlHttp.responseText;
            var a1=a.toString();
            var a2=a1.substring(0,4);
            if(a2=="true"){
            window.location.href="index.jsp"
            }
            else{
            document.getElementById("dataMessage").innerHTML="用户名与密玛错误"
           }
</SCRIPT>
</head>
<body>
  <form action="#">
   <table align="center">
    <div id="dataMessage"></div>
    <tr>
     <td>
      用户名
     </td>
     <td>
      <input type="text" name="userName" id="userName" />
     </td>
    </tr>
    <tr>
     <td>
      密码
     </td>
     <td>
      <input type="password" name="userPwd" id="userPwd" />
     </td>
    </tr>
    <tr>
     <td></td>
     <td>
      <input type="button" name="Submit" value="登陆" onclick="validate()">
        
      <input type="reset" value="重置">
        
     </td>
    </tr>
   </table>
   <br>
  </form>
</body>
</html>

在登录页面我要强调的是 var a1=a.toString(); var a2=a1.substring(0,4);这个地方,为什么要这么做了,请大家看完我后面的servelt代码,代码如下:

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException

{
  if (request.getParameter("userName") != null
    && request.getParameter("userPwd") != null) {
   response.setContentType("text/xml; charset=UTF-8");
   response.setHeader("Cache-Control", "no-store");
   response.setHeader("Pragrma", "no-cache");
   PrintWriter out = response.getWriter();
   String userName = request.getParameter("userName");
   String userPwd = request.getParameter("userPwd");
   DbBean db = new DbBean();
   UserBean ub = db.checkUsersLogin(userName, userPwd);
   if (ub != null) {
    ArrayList news = db.getAllNews();
    ArrayList news1 = new ArrayList();
    request.getSession().setAttribute("news1", news);
    out.println("true");
   } else {
    out.println("false");

}
}
}

我用out.println从服务器端返回一个文本数据,其实这个数据的作用只是一个标志位,选其他任意的值都可以,关键是起到一个区别成功与不成功的作用,这样页面好进行判断,我在这里出了很久的问题,他返回的值不知道为什么更我out.println的值的长度不一样,不知道为什么有几个空格还是什么加上去了,这个我还在思考中,所以我用了substring 来截取后做一个判断,这里大家仁者见仁,智者见智,可以用别的好办法,但是思路是这样了,请大家指交了.我的javabean代码没有贴出来了,贴一个函数的代码,如下:

public UserBean checkUsersLogin(String userName, String userPwd) //登陆验证
     {
         UserBean ub = null;
         if (!checkParameter(userName + userPwd))
         {
             userName = "null";
             userPwd = "null";
         }
         try
         {
             String sql =
                 "select count(*) from admin where userName=? and userPwd=?";
             prepar = conn.prepareStatement(sql);
             prepar.setString(1, userName);
             prepar.setString(2, userPwd);
             res = prepar.executeQuery();
             if (res.next())
             {
                 if (res.getInt(1) > 0)
                 {
                     ub = this.getUser(userName);
                 }
                 else
                 {
                     ub = null;
                 }
             }
         }
         catch (Exception e)
         {
             ub = null;
             e.printStackTrace();
         }
         return ub;
     }
这里谈一下我对ajax的感受了,这几天的学习的确对ajax有了更深层次了解了,对ajax的异步理解更深层次了，传统的web客户交换，每次服务器端响应后都要重载页面，但是有了ajax后我们每次提交数据并不用完全重载整个页面，只设计到我们要更新的那部分数据。怎么说了，我对ajax现在有了一定了解，但是还没到完全理解的地步啊，还要努力啊！呵呵！加油