使用者登入驗證Ajax例項詳解
程式的思路主要是:頁面載入時呼叫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例項詳解
程式的思路主要是:頁面載入時呼叫init判斷客戶端是否存有網站所需的cookies,如果有的話取相應cookies到服務端驗證,通過驗證顯示成功提示,反之顯示登入框,同樣如果沒有所需cookies也顯示登入框直到使用者輸入正確的使用者名稱和密碼。整個過程兩次用到了ajax,一
Shiro安全框架入門篇(登入驗證例項詳解與原始碼)
一、Shiro框架簡單介紹 Apache Shiro是Java的一個安全框架,旨在簡化身份驗證和授權。Shiro在JavaSE和JavaEE專案中都可以使用。它主要用來處理身份認證,授權,企業會話管理和加密等。Shiro的具體功能點如下: (1)身份認證/登
ssh證書登入(例項詳解)
http://www.cnblogs.com/ggjucheng/archive/2012/08/19/2646346.html 前言 本文基於實際Linux管理工作,例項講解工作中使用ssh證書登入的實際流程,講解ssh證書登入的配置原理,基於配置原理,解決實際工作中,wi
ajax引數詳解+例項
ajax很多時候都能用到,在網上看到了很多關於ajax引數的介紹,但是都沒有提供實際的詳解。來做個小總結以防不時之需。 1.url 要求為String型別的引數,(預設為當前頁地址)傳送請求的地址。 2.type 要求為String型別的引數,請求方式(post或ge
例項詳解js實現登入與註冊介面
本文主要為大家詳細介紹了js實現登入與註冊介面,具有一定的參考價值,感興趣的小夥伴們可以參考一下,希望能幫助到大家。 完成登入與註冊頁面的HTML+CSS+JS,其中的輸入項檢查包括: 使用者名稱6-12位 首字母不能是數字 只能包含字母和數字
PHP檔案上傳操作例項詳解(包含上傳檔案型別MIME驗證)
本文例項分析了PHP檔案上傳操作。分享給大家供大家參考,具體如下: 檔案上傳 發生在瀏覽器向伺服器發出的請求中。 檔案,對於瀏覽器來講,就是表單中的一個特殊型別的資料而已。 瀏覽器表單中的資料,兩種型別: 字串型別(位元組流編碼) 檔案型別(二進位制編碼),檔案是表單資料中
Ajax實戰——例項詳解這本書怎麼樣
關於Ajax實戰——例項詳解 評論讀後感:實戰講的還不錯,主要是講前臺,後臺只是講一點,重點分明,很棒!讀後感:一直沒用過Ajax,感覺還不錯讀後感:我是先看了和這本書是同一系列的之後才看這本書的,作為一個ajax應用的實際開發者,有著不少體會,那就是至少這本書裡面的內容不是
Laravel表單驗證例項詳解
在專案下執行命令:php artisan make:request CreateProjectRequest(隨表起一個名字) (1)執行命令後,會生成一個檔案:app/Http/Requests/CreateProjectRequest.php 修改CreateProjectRequest.
[jQuery]$.ajax()方法詳解及例項
$.ajax()方法詳解及例項 1.url: 要求為String型別的引數,(預設為當前頁地址)傳送請求的地址。2.type:要求為String型別的引數,請求方式(post或get)預設為get。注意其他http請求方法,例如put和delete也可以使用,但僅部分瀏覽
Ajax用法例項詳解
本文例項講述了jQuery學習筆記之Ajax用法。分享給大家供大家參考,具體如下: 一、Ajax請求 1、jQuery.ajax(options) 通過 HTTP 請求載入遠端資料。jQuery 底層 AJAX 實現。簡單易用的高層實現見 .get,.post 等。
SSO單點登入基本概念實現思路以及小的例項詳解
一、什麼是單點登入SSO(Single Sign-On) SSO是一種統一認證和授權機制,指訪問同一伺服器不同應用中的受保護資源的同一使用者,只需要登入一次,即通過一個應用中的安全驗證後,再訪問其他應用中的受保護資源時,不再需要重新登入驗證。 二、單點登
MVC入門——經典MVC登入例項詳解--附完整程式碼
參考《JavaWeb開發實戰經典》 MVC是核心,是最重要的基礎! “有不少人一直問,是不是應該把框架(Struts、Spring、Hibernate等成為開發框架)開發作為學習重點,其實:框架只是一種很簡單的應用,而整個JavaEE的核心並不在框
$.ajax()方法詳解
例如 lencod ace 包含 等等 json 返回 用戶名 代碼 jquery中的ajax方法參數總是記不住,這裏記錄一下。 1.url: 要求為String類型的參數,(默認為當前頁地址)發送請求的地址。 2.type: 要求為String類型的參數,請求方式(p
14.javaweb AJAX技術詳解
填充 cut pub cti div htm .get conn lec 一、簡介 1, ajax:在不重新加載網頁的前提下,與服務器交換數據並更新部分網頁的技巧,但其本身並不是一種新技術 2, 核心:XMLHttpRequest對象。AJAX技術主要是通過此
ajax技術詳解,封裝一個原生的ajax請求
status 語法 match 基礎上 abort param sync 可選參數 導致 一、Ajax 概述 Ajax 是 Asynchronous Javascript And XML 的簡寫 Ajax是一門技術,並不是一門語言 使用XHTML+CSS來標準化呈現 使
http填坑2&Ajax基礎詳解
這篇文章是網上看到的一片博文,比較幹練的總結了AJAX的基礎東西和相關的http的知識,適合AJAX入門。 同步請求和非同步請求 先解釋一下同步和非同步的概念: 同步是指:傳送方發出資料後,等接收方發回響應以後才發下一個數據包的通訊方式。 非同步是指:傳送方發出資料後,不等接收方發回
[譯]例項詳解防抖與節流(乾貨!!!)
lodash原始碼中推薦的文章,為了學習(英語),翻譯了一下~ 原文連結 作者:DAVID CORBACHO 本文來自一位倫敦前端工程師DAVID CORBACHO的技術投稿。我們在之前討論過這個話題(關於防抖與節流),但這次,DAVID CORBACHO通過生動的演示會將它們講的十分清晰,通俗易懂。
C#資料結構之單鏈表(LinkList)例項詳解
本文例項講述了C#資料結構之單鏈表(LinkList)實現方法。分享給大家供大家參考,具體如下: 這裡我們來看下“單鏈表(LinkList)”。在上一篇《C#資料結構之順序表(SeqList)例項詳解》的最後,我們指出了:順序表要求開闢一組連續的記憶體空間,而且插入/刪除元素時,為了保證元素的順序
android平臺下OpenGL ES 3.0例項詳解頂點屬性、頂點陣列
OpenGL ES 3.0學習實踐 android平臺下OpenGL ES 3.0從零開始 android平臺下OpenGL ES 3.0繪製純色背景 android平臺下OpenGL ES 3.0繪製圓點、直線和三角形 android平臺下OpenGL E
android平臺下OpenGL ES 3.0例項詳解頂點緩衝區物件(VBO)和頂點陣列物件(VAO)
OpenGL ES 3.0學習實踐 android平臺下OpenGL ES 3.0從零開始 android平臺下OpenGL ES 3.0繪製純色背景 android平臺下OpenGL ES 3.0繪製圓點、直線和三角形 android平臺下OpenGL E