Ajax小实例 ? 用户注册异步验证

发布时间：2020-12-16 00:20:40 所属栏目：百科来源：网络整理

导读：简介 51cto 的程序员应该都有 sina 微博吧！你会发现当你更改新浪会员名称，输入用户名 Tab 后，光标焦点移动到密码输出框时，用户名输出框的后面，就已经显示出了验证。验证信息是：你的用户名是否唯一，因为新浪微博和腾讯微博不一样，她的会员用户名都

简介

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

<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>用户输入</title>
<scriptlanguage="javascript"src="public.js"></script>
<scriptlanguage="javascript"src="ajax.js"></script>
</head>

<bodyonload="response()">
<form>
用户名：
<inputtype="text"name="username"id="username"/><spanid="msg"></span>
</form>
</body>

public.js

functioncreatexhr(){
try{returnnewActiveXObject("Microsoft.XMLHTTP")}catch(e){}
try{returnnewXMLHttpRequest}catch(e){}
alert("请更换浏览器");
}
//获取DOM对象的id值
function$(id){
returndocument.getElementById(id);
}

ajax.js

functionresponse(){
$('username').onblur=function(){
varuname=this.value;//面向对象编程，this指代"$('username')"
varxhr=createxhr();
//应用getTime()方法解决IE缓存问题
varurl="demo.php?username="+uname+'&_'+newDate().getTime();
xhr.open('get',url);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
varvalue=xhr.responseText;
if(value==1){
$('msg').innerHTML='<fontcolor=red>用户名已存在</font>';
}else{
$('msg').innerHTML='<fontcolor=green>用户名可用</font>';
}
}
};
xhr.send(null);
};
};

demo.php

//接收传递数据
$username=$_GET['username'];

//连接、选择数据库
mysql_connect('localhost','root','222221');
mysql_select_db('shop');
mysql_query('setnamesgb2312');
//sql语句、执行
$sql="select*fromuserswhereusername='$username'";
$result=mysql_query($sql);
$num=mysql_num_rows($result);//获得结果集的行数

//判断结果集行数
if($num>0){
echo1;
}else{
echo2;
}

查看结果：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!