Ajax实时验证用户名/邮箱等是否已经存在的代码打包


Posted in PHP onDecember 01, 2011

今天分享一个“利用Ajax技术来检测用户名是否存在”的例子。
利用Ajax技术来检测用户名是否存在的原理流程图:
Ajax实时验证用户名/邮箱等是否已经存在的代码打包

最终结果截图:

Ajax实时验证用户名/邮箱等是否已经存在的代码打包

Ajax实时验证用户名/邮箱等是否已经存在的代码打包

 


<!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>用来放从服务器发送回来的数据(即“用户名已存在”等)
<?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.js
// 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事件。
原创 cnblogs 小飞

源码打包下载 /201112/yuanma/checkname_php.rar

PHP 相关文章推荐
PHP遍历数组的几种方法
Mar 22 PHP
浅析51个PHP处理字符串的函数
Aug 02 PHP
九个你必须知道而且又很好用的php函数和特点
Aug 08 PHP
php实现获取及设置用户访问页面语言类
Sep 24 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
Dec 15 PHP
WordPress中获取所使用的模板的页面ID的简单方法
Dec 31 PHP
PHP实现获取并生成数据库字典的方法
May 04 PHP
PHP 接入支付宝即时到账功能
Sep 18 PHP
PHP生成word文档的三种实现方式
Nov 14 PHP
PHP验证终端类型是否为手机的简单实例
Feb 07 PHP
thinkphp项目如何自定义微信分享描述内容
Feb 20 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
Sep 10 PHP
PHP循环语句笔记(foreach,list)
Nov 29 #PHP
openPNE常用方法分享
Nov 29 #PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
Nov 29 #PHP
php从右向左/从左向右截取字符串的实现方法
Nov 28 #PHP
PHP的array_diff()函数在处理大数组时的效率问题
Nov 27 #PHP
PHP 中检查或过滤IP地址的实现代码
Nov 27 #PHP
PHP中usort在值相同时改变原始位置问题的解决方法
Nov 27 #PHP
You might like
discuz安全提问算法
2007/06/06 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
php中使用websocket详解
2016/09/23 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
python输出指定月份日历的方法
2015/04/23 Python
Python简单进程锁代码实例
2015/04/27 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
大学生关于奋斗的演讲稿
2014/01/09 职场文书
教师节促销活动方案
2014/02/14 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
2015元旦节寄语
2014/12/08 职场文书
2015年调度员工作总结
2015/04/30 职场文书
庭外和解协议书
2016/03/23 职场文书
浅谈python中的多态
2021/06/15 Python
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python