php+ajax实现用户名验证

zhangsanfeng88

　　form.html



<script src="ajax.js"></script>
<script>
var username = document.getElementById("user");
function show(username){
if(username==""){
alert("用户名不能为空!");
return;
}
var ajax=Ajax();
var userobj=document.getElementById("userid");
ajax.post("form.php", {username:username}, function(data){
userobj.innerHTML=data;
if(document.getElementById("error").value != "") {
//document.myform.username.select();
document.myform.username.focus();
}else {
document.myform.pass.select();
}
});
}
</script>

<form action="" method="post" name="myform">
username: <input type="text"  name="username" id="user"><span id="userid"></span><br>
password: <input type="password" name="pass"><br>
<input type="submit" value="submit">
</form>




ajax.js  文件，主要是创建ajax对象

function Ajax(recvType){
var aj=new Object();
aj.recvType=recvType ? recvType.toUpperCase() : 'HTML' //HTML XML   判断返回的对象是html还是xml
aj.targetUrl='';                                       //目标url
aj.sendString='';                                      //发送的字符串
aj.resultHandle=null;                                  //返回的字符串
aj.createXMLHttpRequest=function(){
var request=false;
//window对象中有XMLHttpRequest存在就是非IE，包括（IE7，IE8）
if(window.XMLHttpRequest){
request=new XMLHttpRequest();
if(request.overrideMimeType){
request.overrideMimeType("text/xml");
}

//window对象中有ActiveXObject属性存在就是IE
}else if(window.ActiveXObject){
var versions=['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
for(var i=0; i<versions.length; i++){
try{
request=new ActiveXObject(versions);
if(request){
return request;
}
}catch(e){
request=false;
}
}
}
return request;
}
aj.XMLHttpRequest=aj.createXMLHttpRequest();   //将aj的XMLHttpRequest 属性设置为获得的XMLHttpRequest对象
aj.processHandle=function(){
if(aj.XMLHttpRequest.readyState == 4){
if(aj.XMLHttpRequest.status == 200){
if(aj.recvType=="HTML")
aj.resultHandle(aj.XMLHttpRequest.responseText);
else if(aj.recvType=="XML")
aj.resultHandle(aj.XMLHttpRequest.responseXML);
}
}
}
aj.get=function(targetUrl, resultHandle){
aj.targetUrl=targetUrl;
if(resultHandle!=null){
aj.XMLHttpRequest.onreadystatechange=aj.processHandle;
aj.resultHandle=resultHandle;
}
if(window.XMLHttpRequest){
aj.XMLHttpRequest.open("get", aj.targetUrl);
aj.XMLHttpRequest.send(null);
}else{
aj.XMLHttpRequest.open("get", aj.targetUrl, true);
aj.XMLHttpRequest.send();
}
}
aj.post=function(targetUrl, sendString, resultHandle){
aj.targetUrl=targetUrl;
//发送字符串的几种不同形式，一种是以字符串的形式，一种是以对象的形式，针对不同形式，将传入的字符串转化为ajax能接受的形式
if(typeof(sendString)=="object"){
var str="";
for(var pro in sendString){   //javascript中对象的用法
str+=pro+"="+sendString[pro]+"&";
}
aj.sendString=str.substr(0, str.length-1); //字符串长度减一，为什么是在post方法中使用&，这不是相当于把所有的查询字符串放在一个字符串中么？
}else{
aj.sendString=sendString;
}
if(resultHandle!=null){
aj.XMLHttpRequest.onreadystatechange=aj.processHandle;
aj.resultHandle=resultHandle;
}
aj.XMLHttpRequest.open("post", targetUrl);
aj.XMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
aj.XMLHttpRequest.send(aj.sendString);
}
return aj;
}



form.php文件，主要是从数据库中查找并响应

<?php
header("Content-Type:text/html;charset=utf-8");
$mysqli=new mysqli("localhost", "root", "123456", "xsphpcms");
$result=$mysqli->query("select * from cms_user where userName='{$_POST["username"]}'");
if($result->num_rows > 0){
echo "<font color='red' id='error'>用户{$_POST["username"]}已经存在,不能使用</font>";
}else{
echo "<font color='green' id='pass'>用户{$_POST["username"]}可以使用</font>";
}
?>