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 末頁