利用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事件。

w3school 在线教程——PHP 和 AJAX 请求

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

First Name：

例如输入“A”产生以下结果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ4AAABOCAIAAABe/G8qAAAEiklEQVR4nO2d25WsIBAAzWuTMBTTIIZNwgjMgAz21zi8H44K2Gj7GERu1Zc6DvSiZYOz53Q1AICC6ukAAN4BqgCoQBUAFagCoAJVAFSgCoAKVAFQgSoAKlAFQAWqAKhAlZAOiuD2GwNVQr4xypAYVEkBqhQAqqQAVQoAVVKAKgWAKilAlQJAlRSgSgGgSgpQpQBQJQWoUgCZqdK3dVW3/X2x5AGqFMBzqvRtXfkcdWTDq0/jxnpHnN20oEoBPKvKtQSyo4oxxpEld1W65vPA+Pn9SxESHCUzVeaD40Zrqjk5uFmobvsgKwUtjWK4XTiqyN/s27qqjanno/NpbtvOdw94rh3lrml+fxtcyZKcVXEnUNYsJ/dtPcuzlVWsK0gkq/Rt7ar4ac6aytt2HHOjcBoc7Yn9rcpR7pqmG/5wJU/yWas4yaRfa2BNtbrTFaosX4xNwObjYQpab7u6jh8su3eo0jVNNwy4kik5ZxX/U2vCOZNKleksT5VAU70qIcrVj2qUP6bgSqa8R5XD53hi1MY4ecb51vmscgDNKM/retb2efIWVaxZ9uZbVpqVLe04n1gjZ49wrbKtyiqo3trbJmBzThkG8kqWvEUVb/YjTKTEN2D+/vI9dy43ZxuFKl6Pfq/XVJkyymet8kNmyZDMfq0vFH6CLABUSQGqFACqpABVCgBVUoAqBYAqKUCVAkCVFKBKAaBKClClAFAlBahSAKiSAlQpAFRJAaoUAKqkAFUKAFVSgCoFgCopuKdkATzN7TcGqgCoQBUAFagCoAJVAFSgCoAKVAFQgSoAKlAFQAWqAKhAFQAVqAKgAlUAVKAKgApUAVCBKgAqUAVAxftVKbQmeKb8x6OtV8Wvg/XgcOVytazRlwIrJoZcBv8BlKoEIzQVQ32ETK6WNZUxp2uDvTWGTAb/CfSliGJ1TIMCdF7BLjENxY7LtbN363qvSgmHbXi1wv2ikGHjB7CmMtavoxfrKB7AZpHy8zFslynfqG8uj1Lkkl0M/nUos0ok0cdVWd3AR4+va0FG6no7u24RvWU7qBW+fCA1Pg5KVVXxsl5TK8au2xA7igawGstjc6loDNtlyuVO40HGLtm14N/HybWKNIrxqqVHjy+1sxV1vWN19sQaq2Gn8uXdV2W6S73IDwQmPYNjqft0DPHSf0KnylG6K/gXcuoNmDVh6fqR3Ztj83oELLeBkPhv6VRqXD0A7vP3ZGDTzvqPvieGqCp79c2/H/wbOfeyeHqGfCurxPo8qsTOhE1oXPvX+4xfPfOAkAK+KwZ5W1HffOf8y8G/E/WyPlzlzdN9f34rzY3D+bN0PLxXP7WzFXW9VWuVyMUWGh+GvQnY6q6YurqW7qLTfUljVQzidqxT3QpwuWTK4AviwMtiOdU6cxjTusO3fLAU0d46Lr9R2a/rHZsSxFaiwU0gzR42VRGen5+b6eIM0B+NQTr9WAyx7d365uFucMkOBF8SSX6tj02vFNMucNck8CBfU0V6YbZ1HGQwJRfe/z9gAElAFQAVqAKgAlUAVKAKgApUAVCBKgAq/gEkAdAuBYs8rwAAAABJRU5ErkJggg==" alt="" />

Suggestions：

这个例子包括三张页面：

一个简单的 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" 的输入字段。

该表单是这样工作的：

当用户在输入域中按下并松开按键时，会触发一个事件
当该事件被触发时，执行名为 showHint() 的函数
表单的下面是一个名为 "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)，该函数这样执行：

定义要发送到服务器的 URL（文件名）
把带有输入域内容的参数 (q) 添加到这个 URL
添加一个随机数，以防服务器使用缓存文件
调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象，并在事件被触发时告知该对象执行名为 stateChanged 的函数
用给定的 URL 来打开打开这个 XMLHTTP 对象
向服务器发送 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)，则：

找到与 JavaScript 所传送的字符相匹配的名字
如果找到多个名字，把所有名字包含在 response 字符串中
如果没有找到匹配的名字，把 response 设置为 "no suggestion"
如果找到一个或多个名字，把 response 设置为这些名字
把 response 发送到 "txtHint" 占位符

PHP+Aax实现异步验证的更多相关文章

yii2 modal弹窗之ActiveForm ajax表单异步验证
作者:白狼出处:http://www.manks.top/yii2_modal_activeform_ajax.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位 ...
ajax异步验证用户名密码，提示路径错误
使用thinkphp框架异步验证用户名和密码的时候,ajax路径错误可能有多重情况.我遇到的是,我自感路径没问题,且先前使用无错.由于多人合作使用svn,所以在更新代码后,使用firebug显示一直是 ...
ASP.NET MVC验证 - jQuery异步验证
本文主要体验通过jQuery异步验证. 在很多的教材和案例中,MVC验证都是通过提交表单进行的.通过提交表单,可以很容易获得验证出错信息.因为,无论是客户端验证还是服务端验证,总能找到与Model属性 ...
利用js制作异步验证ajax方法（）
如何利用js写ajax异步验证.代码如下: window.onload = function(){ var name = document.getElementById('register-name- ...
MVC验证11-对复杂类型使用jQuery异步验证
原文:MVC验证11-对复杂类型使用jQuery异步验证本篇体验使用"jQuery结合Html.BeginForm()"对复杂类型属性进行异步验证.与本篇相关的"兄弟篇 ...
MVC验证09-使用MVC的Ajax.BeginForm方法实现异步验证
原文:MVC验证09-使用MVC的Ajax.BeginForm方法实现异步验证 MVC中,关于往后台提交的方法有: 1.Html.BeginForm():同步 2.Ajax.BeginForm():异 ...
MVC验证10-到底用哪种方式实现客户端服务端双重异步验证
原文:MVC验证10-到底用哪种方式实现客户端服务端双重异步验证本篇将通过一个案例来体验使用MVC的Ajax.BeginForm或jQuery来实现异步提交,并在客户端和服务端双双获得验证.希望能梳 ...
MVC验证08-jQuery异步验证
原文:MVC验证08-jQuery异步验证本文主要体验通过jQuery异步验证. 在很多的教材和案例中,MVC验证都是通过提交表单进行的.通过提交表单,可以很容易获得验证出错信息.因为,无论是客户端 ...
struts2+ajax实现异步验证实现
由于老师布置作业的需要,在添加管理员的时候,要实现验证添加的管理员的用户名是否在数据库中已经存在,然后再客户端给用户一个提示.我首先想到的就是利用ajax实现异步验证技术,由于利用的ssh框架,所以在 ...

随机推荐

团队作业-Beta冲刺（1）
这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 这个作业要求在哪里 https://edu.cnblo ...
Objective-C基础笔记（4）Category
OC中提供了一种与众不同的方式--Category,可以动态的为已经存在的类添加新的行为(方法),这样可以保证类的原始设计规模较小,功能增加时再逐步扩展. 在使用Category对类进行扩展时,不需要 ...
Android 多线程断点续传同时下载多个大文件
最近学习在Android环境中一些网络请求方面的知识,其中有一部分是关于网络下载方面的知识.在这里解析一下自己写的demo,总结一下自己所学的知识.下图为demo的效果图,仿照一些应用下载商城在Lis ...
Java学习笔记四
1.简介.进程和线程:简单的说就是进程负责为程序开辟内存空间,线程负责具体的执行单元(执行路径). 一个进程中可以有多个执行路径,称为多线程.CPU一次只能执行一个进程,但是一个进程内部可以有多个线程 ...
Spring MVC框架实例
Spring MVC 背景介绍 Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块.使用 Spring 可插入的 MVC 架构,能够选择是使用内置的 Spring Web 框架还是 ...
Redis的高级应用-事务处理、持久化、发布与订阅消息、虚拟内存使用
三.事务处理 Redis的事务处理比较简单.只能保证client发起的事务中的命令可以连续的执行,而且不会插入其他的client命令,当一个client在连接中发出multi命令时,这个连接就进入一 ...
C# 报表
报表技术 1.OWC控件的使用 OWC是office web Components 是组件对象模型(COM)控件的集合,可用于将电子表格,图表和数据库发布到网站上．在Office2003以后的版本中 ...
CSS笔记 - fgm练习 2-7 - 简易选项卡
练习地址 http://www.fgm.cc/learn/lesson2/07.html <style> body,ul,li{margin:0;padding:0;} body{font ...
keytool用法总结
一.keytool的概念 keytool 是个密钥和证书管理工具.它使用户能够管理自己的公钥/私钥对及相关证书,用于(通过数字签名)自我认证(用户向别的用户/服务认证自己)或数据完整性以及认证服务.在 ...
卫星网络中使用TCP协议的劣势（所以才有TCP优化版用来卫星通信啊，比如TCP-Peach和ADolar）
卫星网络中使用TCP协议的劣势为了避免产生网络拥塞,原TCP协议综合采用了慢启动.拥塞避免.快速重传以及快速恢复等算法.但这些算法应用的前提是网络发生拥塞造成丢包,然而在误码率相对较高的卫星通信系统 ...

PHP+Aax实现异步验证