ajax 入门检测用户名实例与实现方法
<form action="#" method="post" name="iform">
<p><label for=nickname>用户名：</label><input id=nickname name=nickname placeholder="在这里输入用户名"><span id=tips教程></span></p>
</form>
我们还需要一个判断输入昵称是否存在的后端页面（本文以php教程为例，这部分不用细究）:
...
if(isset($_get['entryname'])){
$entryname=$_get['entryname'];
}else{
$entryname='data null';
}
$sql=sprintf("select * from i_test_ajax where nickname='%s'",$entryname);
$res=$iajax->query($sql);
//sleep只是为了展示readstate==1时的效果
sleep(1);
if(($res->num_rows)>0){
echo "抱歉！此昵称已存在 :(";
}else{
echo "恭喜！此昵称可注册 :)";
}
...
剩下的就交给ajax来处理了。 xmlhttprequest，不得不提的一个对象，ajax最核心也是最底层的对象。可悲哀的是，它是w3c的一个标准，但微软ie一直很自我（微软ie）。怎么办？当然是用一个方法和谐掉它们。微软ie支持activexobject('microsoft.xmlhttp')对象，这样就简单了：
//兼容的xmlhttprequest对象
ixhr: function(){
if(window.activexobject){
xhr=new activexobject('microsoft.xmlhttp');
}else if(window.xmlhttprequest){
xhr=new xmlhttprequest();
}else{
return null;
}
}
兼容的xmlhttprequest对象实现了，接下来写一个简单的onblur事件，即当输入值后，表单失去焦点后开始判断并迅速回馈一个信息到前台。代码如下：
//触发焦点时执行
document.forms['iform'].nickname.onblur = function(){
//输入的值
var val=document.forms['iform'].nickname.value;
//对用户名的判断
if(!/^[a-za-z0-9_]{3,16}$/.test(val)){
alert('请输入3~16位由英文、数字、下划线组成的昵称！');
return false;
}
//初始化一下xhr
ibase.ixhr();
//原来需要新打开的判断页面用get使用异步
xhr.open('get','/demo/ajax/iajax20110306_query.php?entryname='+val,true);
//与readystate属性有关，当readystate改变时它才会触发
xhr.onreadystatechange=returnfun;
//异步处理完成后发送数据出去（比如某些需要在焦点事件后再执行的）
xhr.send(null);
}
首页 1 2 末页