在写注册界面的时候,比如账号输入框,我们要实现的功能不仅仅是判断有没有输入,或者说是格式对不对,还需要进行的一步操作便是对账号是否已经存在进行判断;对于这个功能其实也挺简单实现,就是在form表单的提交页面进行数据库查询操作。而这样做便是要提交一次页面,但我们平时在注册的时候也碰到过这样的网站,在我们刚输入账号的时候,后面的就有提示框告诉你这个用户是否可以使用。两者一相比,后者所实现的效果肯定比前者实现的效果好很多,要实现这样的功能便需要掌握ajax的相关知识了。
简单介绍一下ajax:
AJAX即“
A
synchronous
J
avascript And
X
ML”(异步JavaScript和XML),是指一种创建交互式
网页应用的网页开发技术。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。
想要了解更多的同学可以去百度查。
下面便以我自己写的一个例子来讲,截取其中部分代码讲解。
首先是html的代码:
<tr>
<td style="width:100px;">
账 号:
</td>
<td style="width:250px;">
<input type="text" name="userid" id="userid" class="form-control" placeholder="User Id"/>
</td>
<td style="width:200px;">
<span id="useridSpan" style="color:#F00; font-size:9px;">*6-18位字母或数字</span>
</td>
</tr>
然后是js的代码:
<script language="javascript">
var xmlHttp;
var useridObj=document.getElementById("userid");
useridObj.οnblur=checkUserid;//onblur是指当离开输入框是所触发的事件
//这个函数可以直接拷过去用
function S_xmlhttprequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
//这个函数就是你要进行账号判断时所要实现的功能
function checkUserid(){
var useridValue = trim(useridObj.value);
var useridRegex = /^\w{6,18}$/;
var span = document.getElementById("useridSpan");
var msg =" <img src='../images/loading.jpg' style='width:12px'>";
if(useridValue == null || useridValue == "")
{
msg ="<font color='red'>账号不能为空!</font>";
}
else if(!useridRegex.test(useridValue))
{
msg ="<font color='red'>账号长度不正确!</font>";
}
//检查账号时候存在
else
{
S_xmlhttprequest();
//这里是异步运行了,当js执行到这一句话后不会等待他的返回值,而是直接往下进行,我测试出来的效果是当你js代码执行完了这里的值才返回来。
xmlHttp.open("POST","regist_ajax_form.php?id="+useridValue,true);//这个页面便是你要进行选择查询的PHP页面
xmlHttp.onreadystatechange = byphp;//接受返回值
xmlHttp.send(null);
}
span.innerHTML = msg;
}
//接受返回值,xmlHttp.readyState一共有五种状态,想了解具体情况可以去百度查询
function byphp()
{
var msg;
if(xmlHttp.readyState==1)//等于1是指还未获取返回值的意思
{
document.getElementById('useridSpan').innerHTML = " <img src='../images/loading.jpg' style='width:12px'>";
}
else
{
var byphp100 = xmlHttp.responseText;//接受PHP的返回值
document.getElementById('useridSpan').innerHTML = byphp100; //设置span里的内容
}
}
</script>
然后是PHP的代码,也就是js代码中的regist_ajax_php
<?php
if($_GET['id'])
{
sleep(1);//为了显示等待检测这么一个动态效果,所以这里等待一秒执行
include("connection.php");
$sql = "select * from userform where userid='$_GET[id]'";
$result = mysql_query($sql);
//这里的echo输出的内容便是将要返回给之前byphp()这个函数的值
if(is_array(mysql_fetch_row($result)))
{
echo "用户名已经存在!";
}
else
{
echo " <img src='../images/true.gif' style='width:12px'>";
}
}
?>
注意:采用ajax是进行异步运行的,也就是说js和xmlHttp.open()打开的php页面是同时进行的,要是想实现表单提交再次进行判断的时候要注意返回值的问题。
差不多就这些了,我也是才接触ajax,只是会应用,因为一个异步运行的原因,导致checkUserid的返回值除了问题,以至于表单的submit事件一直出错,也是调试了好久才发现了这个问题。如果有什么错误的地方,希望各位能指出来,并且十分欢迎大家一起讨论,共同学习。