参照网上自己写了一个Ajax.js文件

前端之家收集整理的这篇文章主要介绍了参照网上自己写了一个Ajax.js文件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近自己写了一个Ajax的基础文件调用数据库判断前台用户注册是否用户名存在。

这是前台部分(未渲染)

<form name="myform" method="POST" action="register_handle.PHP">
<fieldset>
<legend>用户注册</legend>
<center>用&nbsp;户&nbsp;名:<input type="text" name="UserName" size="40" onblur="checkname();" ></center><span id="span1"></span><BR><BR>
<center>电&nbsp;&nbsp;话:<input type="text" name="UserNumber" size="40"><BR><BR></center>
<center>Q&nbsp;&nbsp;Q:<input type="text" name="UserQQ" size="40"><BR><BR></center>
<center>Email&nbsp;&nbsp;:<input type="text" name="UserEmail" size="40"><BR><BR></center>
<center>住&nbsp;&nbsp;址:<input type="text" name="UserAddress" size="40"><BR><BR></center>
<center>密&nbsp;&nbsp;码:<input type="text" name="UserPWD" size="40"><BR><BR></center>
<center><input type="submit" value="确 定" size="40">
<input type="reset" value="重 置" size="40"></center>
</fieldset>
</form>

这是Ajax.js文件

//检测用户名是否存在
var XHR=null;


function createXMLHttpRequest()
{
if(window.XMLHttpRequest)
return new XMLHttpRequest();
else if (window.ActiveXObject)
{
var XMLVersions=["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0",
"MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Micrsoft.XMLHttp"];
for(var i=0;i< XMLVersions.length;i++)
{
try
{
return new ActiveXObject(XMLVersions[i]);
}
catch(error)
{}
}
}
throw new Error("您的浏览器不支持XMLHttpRequest对象");
}


function checkname()
{
var username=document.myform.UserName.value;
//alert(username);
XHR=createXMLHttpRequest();
XHR.onreadystatechange=handleStateChange;
XHR.open("POST","register_username.PHP",true); //修改
XHR.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //post 特有


XHR.send("username="+username); //修改 post时, 传递参数
//alert(username);
}


function handleStateChange()
{


if(XHR.readyState==4)
{
if(XHR.status==200)
{
document.getElementById("span1").innerHTML=XHR.responseText;
}
else
window.alert("文件打开有误!");
}
}

这里我用的是post调用方式,关于这个的send()函数查了好久。

这个事后台数据库,我用的是MysqL

<?PHP //检测用户名是否存在 $user=$_POST['username']; //echo $user; MysqL_connect("localhost",'root','123456'); MysqL_select_db('design'); $sql="select * from design.user_register where user_name='".$user."'"; $query=MysqL_query($sql); if(is_array(MysqL_fetch_array($query))) { echo "<font color=red>用户名已存在!</font>"; } else { echo "<font color=green>用户名可以使用</font>"; } ?>

猜你在找的Ajax相关文章