reg.htm
<!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" />
<meta
http-equiv="expires" content="0">
<meta http-equiv="pragma"
content="no-cache">
<title>php+ajax注册用户名验证</title>
<style
type="text/css">
<!--
body{
text-align:center;
font-family:
verdana, arial, helvetica, sans-serif;
font-size:
12px;
background:#efefef;
}
#login
{
margin-top:6%;
margin-right:auto;
margin-left:auto;
line-height:
20px;
color: #000000;
width:300px;
border:1px solid
#336699;
background:#fff;
}
#frmlogin{
text-align:left;
margin-left:8px;
}
h1{
margin:0px
0px 10px
0px;
padding:0px;
width:100%;
height:30px;
line-height:30px;
color:#fff;
background:#336699;
font-size:18px;
text-align:left;
text-indent:10px;
font-weight:normal;
font-family:arial,
helvetica, sans-serif;
}
input{
border:1px solid
#336699;
height:14px;
line-height:14px;
width:120px;
}
.button{
padding-right:10px;
padding-left:10px;
height:22px;
line-height:22px;
background:#fbfbfb;
color:#000;
text-align:center;
border-right:2px
solid #999;
border-left:2px solid #999;
border-top:1px solid
#999;
border-bottom:1px solid
#999;
margin-right:5px;
margin-left:5px;
}
label{
font-weight:bold;
color:#336699;
}
#tip{
color:#ff9900;
}
-->
</style>
<script
type="text/javascript">
<!--
//xmlhttprequest
var xmlhttp =
false;
try {
xmlhttp = new
activexobject("msxml2.xmlhttp");
} catch (e) {
try
{
xmlhttp = new activexobject("microsoft.xmlhttp");
}
catch (e2) {
xmlhttp = false;
}
}
if
(!xmlhttp && typeof xmlhttprequest != 'undefined') {
xmlhttp
= new xmlhttprequest();
}
function
ajax(data){
xmlhttp.open("get","db.php?username="+escape(document.getelementbyid("username").value),true);
xmlhttp.send(null);
xmlhttp.onreadystatechange=function(){
if
(4==xmlhttp.readystate){
if
(200==xmlhttp.status){
document.getelementbyid("tip").innerhtml=xmlhttp.responsetext;
}else{
alert("发生错误!");
}
}
}
}
function
chkusername(obj){
if(obj.value.length<1){
obj.style.backgroundcolor="#efefef";
alert("请输入用户名!");
obj.focus();
}else{
//调用ajax函数,向服务器端发送查询
ajax(obj.value);
}
}
//-->
</script>
</head>
<body>
<div
id="login">
<h1>php+ajax</h1>
<form
id="frmlogin"
name="frmlogin">
<label>用户名:
<input
name="username" type="text" id="username" size="22" maxlength="10"
onblur="chkusername(this)" />
</label><label
id="tip"></label>
<p>
<label>密 码:
<input name="pwd" type="password"
id="pwd" size="24" maxlength="16" />
</label>
</p>
<p align="center">
<input name="submit" type="button" class="button" id="btn_login"
style="width:60px;background:#efefef;height:25px;line-height:25px;font-size:12px;"
value="注册" />
<input name="submit2" type="reset"
class="button"
style="width:60px;background:#efefef;height:25px;line-height:25px;font-size:12px;"
value="重置" />
</p>
</form>
</div>
</body>
</html>
服务器端db.php
<?php
/*数据库连接*/
$conn=@mysql_connect("localhost","root","");
mysql_query("set
names
utf8");
mysql_select_db("php_ajax",$conn);
//设置页面编码
header("content-type:text/html;charset=utf-8");
//查询数据库
if(isset($_get["username"])){
$strsql="select
* from member where
username='".unescape($_get["username"])."'";
$result=mysql_query($strsql);
$rows=@mysql_num_rows($result);
mysql_close($conn);
//判断是否有此记录
if($rows){
echo
"已被注册!";
}else{
echo
"此用户名未被注册!";
}
}else{
echo
"别调戏我!";
}
/*php的unescape转换函数,用来转换javascript用escape函数加密过的字符
--此函数需要iconv函数库支持*/
function
unescape($str) {
$str =
rawurldecode($str);
preg_match_all("/%u.{4}|&#x.{4};|&#\d+;|&#\d+?|.+/u",$str,$r);
$ar
= $r[0];
foreach($ar as $k=>$v) {
if(substr($v,0,2)
== "%u")
$ar[$k] =
iconv("ucs-2","utf-8",pack("h4",substr($v,-4)));
elseif(substr($v,0,3)
== "&#x")
$ar[$k] =
iconv("ucs-2","utf-8",pack("h4",substr($v,3,-1)));
elseif(substr($v,0,2)
== "&#") {
$ar[$k] =
iconv("ucs-2","utf-8",pack("n",preg_replace("/[^\d]/","",$v)));
}
}
return
join("",$ar);
}
?>
sql
create table `member`
(
`id` int(11) not null auto_increment,
`username` varchar(20) not
null default '',
`pwd` varchar(50) not null default '',
primary
key (`id`)
) engine=myisam auto_increment=10 default charset=utf8
auto_increment=10 ;
--
-- 导出表中的数据 `member`
--
insert into
`member` values (8, 'admin', 'admin888');
insert into `member` values (9,
'测试', '测试');