这是用ajax实现登录的安全/好方法吗?

时间:2009-11-30 20:57:10

标签: html ajax login

您好我已经创建了下面的代码来检查用户是否有效登录数据库,我使用SSL来保护连接,但我不知道这是否仍然是我完成它的好方法。有人可以提供建议吗?感谢。

(对不起,长期以来)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="login_styles.css" />   
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="../jquery/ui/effects.core.js"></script>
<script src="../jquery/ui/effects.shake.js"></script>

<title>Login</title>

</head>

<body>

<script type="text/javascript" >
var clicked = 0;

$(document).ready(function() 
{   
    document.form.username.focus();
})
   function make_request()
{
   try
    {
        // Firefox, Opera 8.0+, Safari
        httpxml=new XMLHttpRequest();
    }
    catch (e)
    {
        // Internet Explorer
        try
    {
       httpxml=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
    try
    {
        httpxml=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e)
    {
        alert("Your browser does not support AJAX!");
        return false;   }
    }
    }
}

function checkCanSubmit()
{
    if (fnameok && lnameok && emailok && projectnameok && descriptionok)
    {
    document.getElementById("button").disabled= false;

    }
    else
    {
    document.getElementById("button").disabled= true;
    }

}

function counting()
 {
clicked++;
 }

function check_login(username, password)
{


make_request()
$("#login_loading").show();
var parameters = 'username=' + document.getElementById("username").value + '&password=' + document.getElementById("password").value;
httpxml.onreadystatechange = stateck;       
httpxml.open('POST', 'login.php', true);
httpxml.setRequestHeader('Content-Type', "application/x-www-form-urlencoded");
httpxml.setRequestHeader('Content-Length', parameters.length);
httpxml.send(parameters);

function stateck() 
{

if(httpxml.readyState==4)

    { 
    if (httpxml.responseText.indexOf("Login Successful") >= 0)
    {
    $("#login_loading").hide("fast");
    $("#login_error").hide("slow"); 
    $("#forgot").hide("slow");
    $("#button").fadeOut("slow");       
    $("#loading_big").fadeIn("slow");
    setTimeout( "window.location.href = '../members'", 2000);   


    }
    else
    {
        focus();
        if (clicked > 1)
        {
        $("#login_error").effect("shake", { times:2 }, 100);
        $("#login_loading").fadeOut(1000);
        $("#forgot").show("slow");

        }
        else
        {           
        $("#login_loading").fadeOut(1000);
        $("#login_successful").hide("normal");
        $("#login_error").show("slow");
        }

    }           

    }
}   
}

function focus()
{       
    document.form.username.focus();
}

</script>


   <div class="login_loading" id="login_loading"><img src="images/login_loader.gif"       alt="loading1" id="loading1" /></div>
    <div class="loading_big" id="loading_big">   Login successful please   wait . . .<br /><img src="images/loading_big.gif" alt="loading" /></div>
    <div class="form">
   <table class="form" id="form" cellpadding="10" >
    <form id="form" name="form" method="post" action="login.php" />
   <tr>

    <td>Username</td>
   <td><input type="text" name="username" id="username" size="26" /></td>

   </tr>

  <tr>

    <td>Password</td>
         <td><input type="password" name="password" id="password" size="26"/>

        <div id="login_error" class="login_error" ><img src="images/error.png" alt="Error" id="error" />Username or password incorrect.</div>
        <div id="forgot" class="login_error">Forgot Password?<a   href="forgotpass.php"></a></div>
         <div id="login_successful" class="login_successful" >Login successful please wait . . . </div></td>

</tr>

<tr>
<td>
<input type="submit" name="button" id="button" value="Submit" onclick="check_login(username, password); counting(); return false;"/>
</td>
 </tr>
 </form>
 </table>
 </div>
 </body>
 </html>

代码格式在这里变得一团糟:p

再次感谢。

1 个答案:

答案 0 :(得分:0)

除了一些明显的清理点,以及因为你导入jQuery无论如何你也可以使用它的Ajax方法而不是手工编写自己的方法,我认为这里没有什么特别错误。有一个巨大的警告 - "members"最好验证用户是否有合法的登录会话。如果用户首先访问此登录页面或登录失败后访问../members会发生什么?它们是否被重定向到登录页面?