【www.gdgbn.com--php入门】

ajax 入门检测用户名实例与实现方法



我们还需要一个判断输入昵称是否存在的后端页面(本文以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);
}


  ibase.ixhr(),初始化xhr,以保证xmlhttprequest对象的兼容。接下来,通过以get的方式,异步发送到/demo/ajax/iajax20110306_query.php页面进行验证。有人会问什么是get,get是从服务器上请求数据,get方法就是把数据参数队列加到一个url上,值和表单是一一对应的,比如本文的entryname=val。这个概念可能属于后台程序的范畴,不在此细说。然后,我们需要用到一个onreadystatechange事件属性,这个属性是用来存储函数(或函数名),每当readystate属性改变时,就会调用该函数,即本文中的returnfun;最后,我们还要发送一个数据到服务器,send属性一般用于数据交换,而本文只是一个简单的验证判断,所以,send一个空值。基本的判断与数据发送完成了,接下来还剩一个关键的信息获取,即returnfun。

function returnfun(){
    //当send()已调用,正在发送请求时,显示loading...
 if(xhr.readystate==1){
  ibase.id("tips").innerhtml="loding...";
 }else if(xhr.readystate==4){
  //当响应内容解析完成,可以调用时
  //更缜密,再判断一下status是否成功
  if(xhr.status==200){
   //responsetext为返回的文本
   ibase.id("tips").innerhtml=xhr.responsetext;
  }
  //使用完请销毁,避免内存泄露
  xhr=null;
 }
}


readystate表示xmlhttprequest对象的处理状态:
0:xmlhttprequest对象还没有完成初始化。
1:xmlhttprequest对象开始发送请求。
2:xmlhttprequest对象的请求发送完成。
3:xmlhttprequest对象开始读取服务器的响应。
4:xmlhttprequest对象读取服务器响应结束。

关于状态的实例

if(xmlhttp.readystate==4){
   alert(xmlhttp.status) ;
  if(xmlhttp.status==200){
  // document.getelementbyid("tdata").innerhtml = xmlhttp.responsetext ;
   var logmessage = xmlhttp.responsetext.trim() ;
      if(logmessage!="error"){
    window.location = "index.jsp教程" ;
    }else{
     alert("用户名或密码有误,重新输入....") ;
     window.location = "login.jsp" ;
    }
  }
 }

另:在ie(即internet explorer)浏览器中可以不区分大小写,但在其他浏览器中将严格区分大小写。所以为了保证更好的跨浏览器效果,建议采用严格区分大小写的形式。

缩合上面的我们把实现整出来如下


<script>
/**
 * @author mr.think
 * @author blog http://mrthink.net/
 * @2011.03.06
 * 可自由转载及使用,但请注明版权归属
 */
window.onload = function(){
 //底层共用
 //定义一个xhr全局变量来存放兼容的xmlhttprequest对象
 var xhr=null;
    var ibase = {
        id: function(name){
            return document.getelementbyid(name);
        },
  //兼容的xmlhttprequest对象
        ixhr: function(){
         if(window.activexobject){
          xhr=new activexobject("microsoft.xmlhttp");
         }else if(window.xmlhttprequest){
          xhr=new xmlhttprequest();
         }else{
          return null;
         }
        }
    }
    //返回值
    function returnfun(){
        //当send()已调用,正在发送请求时,显示loading...
  if(xhr.readystate==1){
   ibase.id("tips").innerhtml="loding...";
  }else if(xhr.readystate==4){
   //当响应内容解析完成,可以调用时
   //更缜密,再判断一下status是否成功
   if(xhr.status==200){
    //responsetext为返回的文本
    ibase.id("tips").innerhtml=xhr.responsetext;
   }
   //使用完请销毁,避免内存泄露
   xhr=null;
  }
 }
 //触发焦点时执行
    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);
 }
 
}
</script>

 



tips:输入3~16位由英文、数字、下划线组成的字符串,然后在表单外单击,即可看到效果。mrthinkijsiajax为已注册。


 

ko了。

本文来源:http://www.gdgbn.com/jiaocheng/29661/