使用者登入驗證Ajax例項詳解

阿新 • • 發佈：2019-01-24

程式的思路主要是：頁面載入時呼叫init判斷客戶端是否存有網站所需的cookies，如果有的話取相應cookies到服務端驗證，通過驗證顯示成功提示，反之顯示登入框，同樣如果沒有所需cookies也顯示登入框直到使用者輸入正確的使用者名稱和密碼。整個過程兩次用到了ajax，一次是使用者輸入使用者名稱和密碼點選登入按鈕後，另一次是頁面載入時的使用者名稱和密碼驗證，其實兩個過程呼叫的是同一個函式parseLogin，這個函式主要負責與遠端（也就是“?action=login”）通訊，而“?action=login”接受post過來的使用者名稱和密碼進行處理並返回處理結果，客戶端收到服務端的處理結果後進行進一步的處理（呼叫函式makeResult）。可以看出與傳統的“處理登入”相比是有很大差別的，首先整個過程中沒有任何的頁面載入（也就是無重新整理），form中我並沒有指定action和method，由js完成與PHP的通訊，同時也是非同步的（你可以同時進行多個請求，而按傳統方式在進行一個請求時不能再進行其他請求（使用多個iframe也可以模擬出非同步的效果，這裡不包括這種情況）），充分利用這兩點就可以製作出以前需要通過非常複雜的方法才可能達到的效果，如自動完成等。
客戶端使用的prototype.js，實際上從我第一眼發現這個強悍無比的傢伙時就離不了它了，還狠心“拋棄”了已經很習慣的SAJAX。另外服務端返回的是XML，在這裡使用XML只是想說明一種通用的js處理XML的方式。
當然由於是無重新整理的，所以在提交登入時已經看不到狀態列上的進度條，如果登入時間過長，使用者可能不知道發生了什麼事情，會不停的點選提交，這時我們一般會在提交時生成一個載入條，告訴使用者目前正在發生什麼，如gmail右上角的loading...，chinaren的“我正在幫您登入，請稍等...”，當服務端返回結果時就要隱藏這個載入條，控制display屬性就可以簡單的實現這種輪換效果

<?php
/**************************************************************
* login.php
* @author JAVA中文網 
* @email [email protected]
* @note ajax登入驗證，使用者名稱和密碼儲存在客戶端cookies中
**************************************************************/

//得到安全字串
function safe_str($str)
{
return (string)htmlspecialchars(trim($str));
}

if(safe_str($_GET['action'])=='login')
{
//登入驗證
header("Content-type: text/xml");
$user=safe_str($_POST['user']);
$pwd=safe_str($_POST['pwd']);

$response_xml='<info>';

//只有當用戶名為root，密碼為888時才通過驗證
$response_xml.=($user!='root'||$pwd!='888')?'<error>incorrect username or password!</error>':"<login><info><user>{$user}</user><pwd>{$pwd}</pwd></info></login>";

$response_xml.='</info>';
print $response_xml;
exit;
}
else
{
?>
<html>
<head>
<title>Ajax登入驗證</title>
<script type="text/javascript" src="prototype.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
//得到cookies的值
function getCookie(name)
{
var dc=document.cookie;
var prefix=name+"=";
var begin=dc.indexOf("; "+prefix);

if(begin==-1)
{
begin=dc.indexOf(prefix);
if(begin!=0)
return "";
}
else
begin+=2;
var end=document.cookie.indexOf(";",begin);
if(end==-1)
end=dc.length;
return unescape(dc.substring(begin+prefix.length,end));
}

//刪除cookies
function delCookie(name)
{
if(getCookie(name))
document.cookie=name+"=; path=/; expires=Thu, 01-Jan-70 00:00:01 GMT";
}

//設定cookies
function setCookie(name,value)
{
var expires=new Date();
expires.setTime(expires.getTime()+30*24*60*60*1000); //設定cookies失效時間為一個月
document.cookie=name+"="+escape(value)+"; expires="+expires.toGMTString()+"; path=/";
}

//得到節點的值
function getElementTextNS(local,parentElem,index) 
{
var result = parentElem.getElementsByTagName(local)[index];
return result?result.childNodes.length>1?result.childNodes[1].nodeValue:(result.firstChild?result.firstChild.nodeValue:""):"n/a";
}

//初始化
function init()
{
var loginUser=getCookie("ajaxUser");
var loginPwd=getCookie("ajaxPwd");
loginUser!=""?parseLogin(loginUser,loginPwd):genLoginForm();
}

//退出登入
function logOut()
{
delCookie("ajaxUser");
delCookie("ajaxPwd");
genLoginForm();
}

//用指定的使用者名稱和密碼登入
function parseLogin(username,password)
{
var postBody="user="+escape(username)+"&pwd="+escape(password);
new Ajax.Request("?action=login", {method:"post", postBody:postBody,
onFailure:function() {alert("程式異常")}, 
onSuccess:makeResult});
return false;
}

//處理登入返回結果
function makeResult(response)
{
var info=response.responseXML.getElementsByTagName("info");
var error=getElementTextNS("error",info[0],0);
if(error!="n/a")
{
genLoginForm();
alert("請輸入正確的使用者名稱和密碼");
}
else
{
var user=getElementTextNS("user",info[0],0);
var pwd=getElementTextNS("pwd",info[0],0);

setCookie("ajaxUser",user);
setCookie("ajaxPwd",pwd);
if(getCookie("ajaxUser")=="")
{
genLoginForm();
alert("您的瀏覽器必須支援cookies");
}
else
$("content").innerHTML="<h2>Hello,<font color=\"red\">"+user+"</font>!<a href=\"javascript:logOut();\">logout</a></h2>";
}
}

//顯示登入框
function genLoginForm()
{
$("content").innerHTML="<form onsubmit=\"return parseLogin($('user').value,$('pwd').value);\">使用者名稱：<input type=\"text\" id=\"user\" size=\"12\"> 密碼：<input type=\"password\" id=\"pwd\" size=\"12\"> <input type=\"submit\" value=\"登入\"></form>";
}
//-->
</script>
</head>

<body onload="init();">
<div id="content"></div>
</body>
</html>
<?php
}
?>

使用者登入驗證Ajax例項詳解

使用者登入驗證Ajax例項詳解

Shiro安全框架入門篇（登入驗證例項詳解與原始碼）

ssh證書登入(例項詳解)

ajax引數詳解+例項

例項詳解js實現登入與註冊介面

PHP檔案上傳操作例項詳解(包含上傳檔案型別MIME驗證)

Ajax實戰——例項詳解這本書怎麼樣

Laravel表單驗證例項詳解

[jQuery]$.ajax()方法詳解及例項

Ajax用法例項詳解

SSO單點登入基本概念實現思路以及小的例項詳解

MVC入門——經典MVC登入例項詳解--附完整程式碼

$.ajax()方法詳解

14.javaweb AJAX技術詳解

ajax技術詳解，封裝一個原生的ajax請求

http填坑2&Ajax基礎詳解

[譯]例項詳解防抖與節流（乾貨！！！）

C#資料結構之單鏈表(LinkList)例項詳解

android平臺下OpenGL ES 3.0例項詳解頂點屬性、頂點陣列

android平臺下OpenGL ES 3.0例項詳解頂點緩衝區物件(VBO)和頂點陣列物件(VAO)

使用者登入驗證Ajax例項詳解

相關推薦