在上一篇文章Ajax實(shí)現(xiàn)異步用戶名驗(yàn)證功能中，用javascript實(shí)現(xiàn)了用戶驗(yàn)證，但并沒(méi)有對(duì)密碼進(jìn)行驗(yàn)證，這次追加了這個(gè)功能，并分別用javascript和jquery實(shí)現(xiàn)。

一.用jquery的ajax實(shí)現(xiàn)的關(guān)鍵代碼

實(shí)現(xiàn)如下

/*jquery實(shí)現(xiàn)
$(document).ready(function(){
 $("#account").blur(function(event) {
 $.ajax({
  type:"GET",
  url:"checkAccount.php?account="+$("#account").val(),
  dataTypes:"text",
  success:function(msg){
  $("#accountStatus").html(msg);
  },
  error:function(jqXHR) {
  alert("賬號(hào)發(fā)生錯(cuò)誤！")
  },
 });
 });
 
 $("#password").blur(function(event) {
 $.ajax({
  type:"GET",
  url:"checkPassword.php?",
  dataTypes:"text",
  data:"account="+$("#account").val()+"&password="+$("#password").val(),
  success:function(msg){
  $("#passwordStatus").html(msg);
  },
  error:function(jqXHR) {
  alert("密碼查詢發(fā)生錯(cuò)誤！")
  },
 });
 });
}); */

二.用javascript實(shí)現(xiàn)的關(guān)鍵代碼

實(shí)現(xiàn)如下

//javascript實(shí)現(xiàn)
 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","checkAccount.php?account="+name,true);
 xmlhttp.send();
 
 xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  document.getElementById("accountStatus").innerHTML=xmlhttp.responseText;
 }
 }
 
 function checkPassword(){
 var xmlhttp;
 var name = document.getElementById("account").value;
 var pw = document.getElementById("password").value;
 if (window.XMLHttpRequest)
  xmlhttp=new XMLHttpRequest();
 else
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 
 xmlhttp.open("GET","checkPassword.php?account="+name+"&password="+pw,true);
 xmlhttp.send();
 
 xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  document.getElementById("passwordStatus").innerHTML=xmlhttp.responseText;
 }
 }

mysql和數(shù)據(jù)庫(kù)部分跟上篇博文的一樣沒(méi)有改變，運(yùn)行結(jié)果如下圖