ajax升级版,使用ajax实现用户登录验证(升级版)

在上一篇博文http://my.oschina.net/lgr6/blog/664027中,用javascript实现了用户验证,但并没有对密码进行验证,这次追加了这个功能,并分别用javascript和jquery实现。

一.用jquery的ajax实现的关键代码如下

/*jquery实现

$(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("账号发生错误!")

},

});

});

$("#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("密码查询发生错误!")

},

});

});

}); */

一.用javascript实现的关键代码实现如下

//javascript实现

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和数据库部分跟上篇博文的一样没有改变,运行结果如下图

0d7f83f3b4ddec82566f8275eb5da2ea.png

06fc5e02b664d13a51f52a250210d504.png