index.html
<html>
<head></head>
<body>
<form name="reg">
<input type="text" name="username" id="username">
<span id="mm"></span>
</form>
<script type="text/javascript">
function checkusername(){
//得到表单中的值
var username=document.forms["reg"]["username"].value;
// alert(username);
//执行ajax
//创建请求的对象
var xmlhttp=new XMLHttpRequest();
//准备请求发送
xmlhttp.open("GET","user.php?username="+username+"",true);
//发送请求
xmlhttp.send();
// readyState 属性改变时，就会调用该函数。
xmlhttp.onreadystatechange=function()
{
//4表示 请求已完成，且响应已就绪 ，200表示ok
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
//这里接收后台返回的数据，把数据放入id为mm的元素中
document.getElementById('mm').innerHTML=xmlhttp.responseText;
}
}
}
var user=document.getElementById('username');
//给文本一个失去焦点的监听***
user.addEventListener("blur",checkusername);
</script>
</body>
</html>
user.php
<?php
//接收到前台的用户名
$username=$_GET['username'];
//连接数据库
$con = mysql_connect("localhost","root","root");
mysql_select_db('shop');
//查询是否能找到提交过来的用户名，找到了就不可用，没找到就说明可用
$sql="select * from user where name='$username'";
// echo $sql;die();
$res=mysql_fetch_assoc(mysql_query($sql));
// var_dump($res);die;
if($res)
echo "查到了，用户名不可用";
else
echo "用户名可用";
mysql_close();
