PHP+Aax實現異步驗證

時間  2019-11-10
標籤 php+aax php aax 實現 異步 驗證 欄目 PHP 简体版
原文   原文鏈接

利用Ajax技術來檢測用戶名是否存在的原理流程圖：javascript

http://files.jb51.net/upload/201112/20111201222535796.jpg

最終結果截圖：php

 

 

http://files.jb51.net/upload/201112/20111201222826254.jpg

<!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" />
<title>Ajax檢測用戶名</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<form name="myform">
用戶名：<input type="text" name="user" onblur="checkname();">
<span id="checkbox"></span>
</form>
</body>
</html>

 代碼解釋：
①實現該功能的核心代碼在ajax.js，須要另外引進
②給form命名，由於後面咱們須要利用JS來取得input框中的value
③給input框添加一個「onblur」事件，即當「焦點」失去時觸發該事件(即流程圖的「觸發控件」)
④<span id="checkbox"></span>用來放從服務器發送回來的數據（即「用戶名已存在」等）html

 

<?php
mysql_connect("localhost",'root','');
mysql_select_db('test');
$sql="select * from ajax where name='$_GET[id]'";
$query=mysql_query($sql);
if(is_array(mysql_fetch_array($query))){
echo "<font color=red>用戶名已存在</font>";
}else{
echo "<font color=green>用戶名可使用</font>";
}
?>

 代碼解釋：
經過ajax的open方法，將用戶輸入」用戶名「經過id傳遞給進來（即$_GET[id]），此時將對指定的數據庫表中進行查詢，檢查是否有存在該「用戶名」
ajax.jsjava

// JavaScript Document
var XHR; //定義一個全局對象
function createXHR(){ //首先咱們得建立一個XMLHttpRequest對象
if(window.ActiveXObject){//IE的低版本系類
XHR=new ActiveXObject('Microsoft.XMLHTTP');//以前IE壟斷了整個瀏覽器市場，沒遵循W3C標準，因此就有了這句代碼。。。但IE6以後開始有所改觀
}else if(window.XMLHttpRequest){//非IE系列的瀏覽器，但包括IE7 IE8
XHR=new XMLHttpRequest();
}
}
function checkname(){
var username=document.myform.user.value;
createXHR();
XHR.open("GET","checkname.php?id="+username,true);//true:表示異步傳輸，而不等send()方法返回結果，這正是ajax的核心思想
XHR.onreadystatechange=byhongfei;//當狀態改變時，調用byhongfei這個方法，方法的內容咱們另外定義
XHR.send(null);
}
function byhongfei(){
if(XHR.readyState == 4){//關於Ajax引擎對象中的方法和屬性，能夠參考個人另外一篇博文：http://www.cnblogs.com/hongfei/archive/2011/11/29/2265377.html
if(XHR.status == 200){
var textHTML=XHR.responseText;
document.getElementById('checkbox').innerHTML=textHTML;
}
}
}

 代碼解釋：
①首先咱們須要聲明一個ajax引擎的對象：XHR(隨便命名一個)
②由於微軟的低版本IE和其餘的瀏覽器建立ajax對 象的方式不同，如今IE和其餘瀏覽器的市場份額幾乎各佔一半，因此咱們得兩方面都考慮到，IE-->ActiveXObject;其餘 -->XMLHttpRequest。我將她封裝在一個函數中：createXHR
③咱們在index.html中指定的當失去「焦點」 時就會觸發checkname（）函數。那麼咱們如何將用戶輸入的「用戶名」捕獲呢？這裏，利用js便可輕鬆捕獲到 document.myform.user.value（如今知道爲什麼給form和input命名了吧，這一步對應流程圖的「得到填寫內容」），有興趣的 博友，能夠試試在createXHR（）的前一行敲行代碼（alert(username)），將捕獲到的用戶名彈出試試看。
④Ajax引擎有幾個方法和屬性（能夠參考個人另外一篇博文：看圖理解：普通交互方式和Ajax交互方式區別），使用以前咱們得先調用函數craateXHR建立一個ajax對象
⑤有了ajax對象，有三個方法是必不可少的：open()、onreadystatechange、send()。
將請求發送到服務器，要使用open ()和send()方法
open()方法的第一個參數，指示採用GET或者POST方式進行傳輸。。。。。。
open()方法的第二個參數，指示要請求的URL地址(這裏咱們請求的是checkname.php文件)，能夠是絕對或相對地址
open() 方法的第三個參數async指示是否採用異步請求，true爲採用，這種狀況下，經過ajax、js無需等待服務器響應，而是：①在等待服務器響應的同時 執行其餘腳本②當響應就緒後對響應進行處理。通常對一些小型的請求，async=false也是能夠的，但此時就不要編寫 onreadystatechange 函數了
onreadystatechange事件：當ajax的屬性readyState改變時，就觸 發此事件。在此事件中，當服務器響應已作好被處理的準備時（即readyState=4且status=200時），咱們規定要讓服務器作什麼任務，這裏 咱們規定將從數據庫檢索到的結果輸出到id爲」checkbox「的span標籤中。
⑥經過checkname.php，查詢數據庫後，將獲得 查詢結果（即服務器的響應，對應流程圖中的」查詢數據庫「），此時數據還在ajax引擎中，如需得到該來自服務器的響應，咱們須要使用 XMLHttpRequest對象的responText或responseXML屬性，並經過DOM屬性innerHTML將從服務器響應回來的數據設 置爲id=」checkbox「的span標籤的值
注：利用ajax監測郵箱是否存在一個道理，咱們還能夠利用ajax實時監測用戶輸入的密碼強度，此時，須要用到能夠把onblur事件改成onfocus事件。mysql

 

w3school 在線教程——PHP 和 AJAX 請求

在下面的文本框中輸入名字：

web

例如輸入「A」產生如下結果：ajax

 

Suggestions：sql

這個例子包括三張頁面：數據庫

  • 一個簡單的 HTML 表單
  • 一段 JavaScript
  • 一張 PHP 頁面

HTML 表單

這是 HTML 表單。它包含一個簡單的 HTML 表單和指向 JavaScript 的連接：數組

<html>
<head>
<script src="clienthint.js"></script> 
</head>

<body>

<form> 
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>

<p>Suggestions: <span id="txtHint"></span></p>

</body>
</html>

 



例子解釋 - HTML 表單

正如您看到的，上面的 HTML 頁面含有一個簡單的 HTML 表單，其中帶有一個名爲 "txt1" 的輸入字段。

該表單是這樣工做的：

  1. 當用戶在輸入域中按下並鬆開按鍵時，會觸發一個事件
  2. 當該事件被觸發時，執行名爲 showHint() 的函數
  3. 表單的下面是一個名爲 "txtHint" 的 <span>。它用做 showHint() 函數所返回數據的佔位符。

JavaScript

JavaScript 代碼存儲在 "clienthint.js" 文件中，它被連接到 HTML 文檔：

var xmlHttp

function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  return
  } 
var url="gethint.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

 

例子解釋：

showHint() 函數

每當在輸入域中輸入一個字符，該函數就會被執行一次。

若是文本框中有內容 (str.length > 0)，該函數這樣執行：

  1. 定義要發送到服務器的 URL（文件名）
  2. 把帶有輸入域內容的參數 (q) 添加到這個 URL
  3. 添加一個隨機數，以防服務器使用緩存文件
  4. 調用 GetXmlHttpObject 函數來建立 XMLHTTP 對象，並在事件被觸發時告知該對象執行名爲 stateChanged 的函數
  5. 用給定的 URL 來打開打開這個 XMLHTTP 對象
  6. 向服務器發送 HTTP 請求

若是輸入域爲空，則函數簡單地清空 txtHint 佔位符的內容。

stateChanged() 函數

每當 XMLHTTP 對象的狀態發生改變，則執行該函數。

在狀態變成 4 （或 "complete"）時，用響應文本填充 txtHint 佔位符 txtHint 的內容。

GetXmlHttpObject() 函數

AJAX 應用程序只能運行在完整支持 XML 的 web 瀏覽器中。

上面的代碼調用了名爲 GetXmlHttpObject() 的函數。

該函數的做用是解決爲不一樣瀏覽器建立不一樣 XMLHTTP 對象的問題。

這一點在上一節中已經解釋過了。

 

PHP 頁面

被 JavaScript 代碼調用的服務器頁面是一個名爲 "gethint.php" 的簡單服務器頁面。

"gethint.php" 中的代碼會檢查名字數組，而後向客戶端返回對應的名字：

<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//get the q parameter from URL
$q=$_GET["q"];

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
  {
  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
    if ($hint=="")
      {
      $hint=$a[$i];
      }
    else
      {
      $hint=$hint." , ".$a[$i];
      }
    }
  }
}

//Set output to "no suggestion" if no hint were found
//or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}

//output the response
echo $response;
?>

 

若是存在從 JavaScript 送來的文本 (strlen($q) > 0)，則：

  1. 找到與 JavaScript 所傳送的字符相匹配的名字
  2. 若是找到多個名字，把全部名字包含在 response 字符串中
  3. 若是沒有找到匹配的名字，把 response 設置爲 "no suggestion"
  4. 若是找到一個或多個名字，把 response 設置爲這些名字
  5. 把 response 發送到 "txtHint" 佔位符
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程