1. 程式人生 > >Ajax 和 PHP 實現驗證碼的實時驗證

Ajax 和 PHP 實現驗證碼的實時驗證

PHP的影象處理功能強大,做一張驗證碼圖片也是非常簡單的,但是,在實現實時驗證時,確遇到了一個難題:
我用nat123對我的電腦上的網站進行埠對映,實現了在外網訪問,本來是採用cookie的方式用js對驗證碼進行驗證,但是經檢驗發現nat123雖然使我的網站可以通過一個自定義的網址進行訪問,但是產生驗證碼的php檔案在網路上的位置竟然和其它頁面不在一個域,經查詢得知,因為輸出圖片的緣故,被作為快取檔案對映在了某個資料夾內,所以——其他頁面在我的網址下,產生驗證碼的頁面又在另一個網址裡,所以它們的cookie不能共用,不管怎麼設定path和domain都不管用,於是我只好採用session儲存驗證碼了,因為session存在於伺服器,也就是在我本地網址中都可以存取。
接下來是重頭戲,之前只是粗略瞭解過ajax,對於它的用途和特性還是知道的,獲取後臺來的資料這個比較泛泛的概念具體的使用起來就不知道如何下手了。
首先,我分析了個例題的程式碼,用途是獲取後臺的一個文字檔案的內容:

function getHTTPObject(){
    if(typedef XMLHttpRequest == "undefined")
        XMLHttpRequest = function(){
            try{ return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
            catch(e){}
            try{ return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
            catch(e){}
            try
{ return new ActiveXObject("Msxml2.XMLHTTP");} catch(e){} return false; } return new XMLHttpRequest(); } function getNewContent(){ var request = getHTTPObject(); if(request){ request.open("GET","TEST.txt",true); request.onreadystateschange = function
(){
alert(request.responseText); } }else{ alert("no support XMLHttpRequest!"); } }

其中的關鍵是:

        request.open("GET","TEST.txt",true);
        request.onreadystateschange =function(){
            alert(request.responseText);
        }

這三句指定了GET請求發向的頁面和XMLHttpRequest物件送回響應的時候觸發的處理函式,而資料正是通過request.responseText獲取的。

可是我要獲取的資料是後臺php檔案產生的驗證碼,怎麼讓後臺傳送驗證碼?
無論GET還是POST方式都是把資料傳送到後臺,ajax從哪裡取回後臺的資料呢?
百思不得其解之下,我又查詢了另一本資料,找到一個示例:
其中XMLHttpRequest物件送回響應的處理語句是:

request.onreadystateschange=alertContent;
function alertContent(){
...
    alert(request.responseText);
...
}

請求的檔案為check.php
其中有這麼幾句條件輸出:

if($info){
    echo "你的使用者名稱可以使用";
}else {
    echo "該使用者名稱已被註冊";
}

而執行例項效果圖中赫然在靜態頁面彈出訊息框,內容如check.php頁面的輸出!!!
也就是說ajax能請求到一個php頁面的輸出內容,於是,接下來簡單多了,因為圖片也是驗證碼頁面的輸出,所以不能直接ajax驗證碼頁面,不然就把圖片的資料也獲取了。
新建一個php頁面:

sission_start();
$code="";
if(!empty($_session['check']))$code=$_session['check'];
echo $code;

再在前端用ajax向這個頁面GET一個請求,就能用request.responseText獲取驗證碼了。
然後把驗證過程封裝在一定條件觸發的函式裡,即可實時驗證。