ajax 入門檢測使用者名稱執行個體與實現方法(1/2)

來源:互聯網
上載者:User

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 末頁
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.