php mysql ajax 注册验证 实例_Ajax小实例 用户注册异步验证

简介

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;

}

查看结果：