簡介

51cto的程序員應該都有sina微博吧！你會發現當你更改新浪會員名稱，輸入用戶名Tab后，光標焦點移動到密碼輸出框時，用戶名輸出框的后面，就已經顯示出了驗證。驗證信息是：你的用戶名是否唯一，因為新浪微博和騰訊微博不一樣，她的會員用戶名都是唯一的，這樣好將用戶區分開，達到沒有重名的目的。

如果用戶名已被注冊，就顯示“用戶名已存在”，用戶名還沒被注冊，就顯示“用戶名可用”。

實現原理

1、當光標焦點移動到別處時，觸發js的window.onblur事件，調用Ajax對象

2、將用戶名框內的字符串(document.getElementById(id).value)提交到后臺頁面

3、與相應數據庫里的數據進行比對，再將比對結果返回到界面上，呈現我們面前的就是上面那樣的畫面。

好處：實現頁面的局部刷新，在全部提交到后臺前，提前驗證并給出結果，提高了輸出的效率。

下面不說那么多了，直接上代碼：

demo.html前端頁面就一個用戶名輸出框(很簡單吧！關鍵是弄懂原理)

public.js封裝了對不同瀏覽器、創建不同Ajax對象的方法

ajax.js????? Ajax對象的封裝、方法的實現

demo.php后臺頁面主要實現接收數據、選擇并連接數據庫、判斷接收的數據與數據庫比對

demo.html

用戶輸入

用戶名：

public.jsfunction?createxhr(){

try{return?new?ActiveXObject("Microsoft.XMLHTTP")}catch(e){}

try{return?new?XMLHttpRequest}catch(e){}

alert("請更換瀏覽器");

}

//獲取DOM對象的id值

function?$(id){

return?document.getElementById(id);

}

ajax.jsfunction?response(){

$('username').onblur?=?function(){

var?uname?=?this.value;?//面向對象編程，this指代"$('username')"

var?xhr?=?createxhr();

//應用getTime()方法解決IE緩存問題

var?url?=?"demo.php?username="+uname+'&_'+new?Date().getTime();

xhr.open('get',url);

xhr.onreadystatechange?=?function(){

if?(xhr.readyState?==?4?&&?xhr.status?==?200){

var?value?=?xhr.responseText;

if?(value?==?1){

$('msg').innerHTML?=?'用戶名已存在';

}else{

$('msg').innerHTML?=?'用戶名可用';

}

}

};

xhr.send(null);

};

};

demo.php//接收傳遞數據

$username?=?$_GET['username'];

//連接、選擇數據庫

mysql_connect('localhost','root','111111');

mysql_select_db('shop');

mysql_query('set?names?gb2312');

//sql語句、執行

$sql?=?"select?*?from?users?where?username='$username'";

$result?=?mysql_query($sql);

$num?=?mysql_num_rows($result);//獲得結果集的行數

//判斷結果集行數

if($num>0){

echo?1;

}else{

echo?2;

}

查看結果：

總結

以上是生活随笔為你收集整理的php mysql ajax 注册验证 实例_Ajax小实例   用户注册异步验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。