ajax 入门检测用户名实例与实现方法(1/2)

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

补充：网页制作,js教程