這篇文章給大家分享的是有關(guān)Ajax如何實現(xiàn)異步用戶名驗證功能的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)是一家專業(yè)提供合江企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、網(wǎng)站制作、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為合江眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

先看看布局比較簡單，效果圖如下

ajax功能：

    當(dāng)用戶填寫好賬號切換到密碼框的時候，使用ajax驗證賬號的可用性。檢驗的方法如下：首先創(chuàng)建XMLHTTPRequest對象，然后將需要驗證的信息（用戶名）發(fā)送到服務(wù)器端進(jìn)行驗證，最后根據(jù)服務(wù)器返回狀態(tài)判斷用戶名是否可用。

function checkAccount(){
var xmlhttp;
var name = document.getElementById("account").value;
if (window.XMLHttpRequest)
 xmlhttp=new XMLHttpRequest();
else
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 
xmlhttp.open("GET","login.php?account="+name,true);
xmlhttp.send();
 
xmlhttp.onreadystatechange=function(){
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
  document.getElementById("accountStatus").innerHTML=xmlhttp.responseText;
}

運(yùn)行結(jié)果

代碼實現(xiàn)

index.html

function checkAccount(){
var xmlhttp;
var name = document.getElementById("account").value;
if (window.XMLHttpRequest)
 xmlhttp=new XMLHttpRequest();
else
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 
xmlhttp.open("GET","login.php?account="+name,true);
xmlhttp.send();
 
xmlhttp.onreadystatechange=function(){
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
  document.getElementById("accountStatus").innerHTML=xmlhttp.responseText;
}
}




使用Ajax實現(xiàn)異步登陸驗證

賬 號：


密 碼：