今天在写用户验证的时候出现了一个问题,卡了一天,也是笨的要死了,总结下:
1.从用户界面获取用户的帐号和密码,点击登录
2.登录就会调用JS文件中的一个函数login(),login()中采用AJAX访问数据验证的PHP文件
3.验证返回后给出提示
先看错误代码,请求后输入正确信息总是弹出错误的提示:
function login()
{
var user = document.getElementById("TxtUserName").value;
var passwd = document.getElementById("TxtPassword").value;
xmlHttp = GetXmlHttpObject();
if(xmlHttp==null)
{
alert("您的浏览器不支持AJAX?");
return;
}
var url ="checkinfo.php"; //数据验证功能的PHP页面
url = url+"?user="+user+"&passwd="+passwd;
xmlHttp.onreadystatechange = statechanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function statechanged()
{
if(xmlHttp.readyState==4)
{
alert("成功");
}
else
alert("失败");
}
上述代码当你输入帐号密码后,点击提交,会出现5个弹出框,4个提示失败的,1个提示成功的。问题找了好久才发现,是因为readyState这个地方出现了错误:先看一下readystate的5种状态:
0:请求未初始化(还没有调用 open())。
1:请求已经建立,但是还没有发送(还没有调用 send())。
2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。
3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。
4:响应已完成;您可以获取并使用服务器的响应了。
只有当状态提示为4的时候,我们才能够使用服务器返回的数据,其他状态下使用的将是不完整的数据,也就会出现错误。
xmlHttp.onreadystatechange = statechanged; 这行代码是说,每次有一个readystate状态改变就会调用一次statechanged函数,这个函数正是我们想要弹出的提示框函数,因为状态有5个,所以就弹出了5次,因为我们的代码是这样写的:
function statechanged()
{
if(xmlHttp.readyState==4) //当状态码为4的时候弹出1次成功
{
alert("成功");
}
else // 当状态码不为4的时候弹出1次失败,因为有0.1.2.3这4个状态码,每次改变状态,都会调用statechanged()1次,共4次,而每次因为状态码不是4,
所以就弹出1个“失败”,总共弹出4次失败,加上1次状态码为4的时候弹出成功就出现了5个提示框。
alert("失败");
}
弄清楚这个将代码改写解决问题:
if(xmlHttp.readyState==4) //只判断当与服务器交互完成的状态,即只有一次
{
if(xmlHttp.responseText=="OK") //通过服务器给返回的数据进行判断是否成功,当用户名密码与数据库比对成功,服务器端echo一个“OK” 如果不成功就什么都不返回
alert("成功");
else //没有收到服务器返回的消息则说明用户名和密码不匹配
alert("出错");
}
本文介绍了在JavaScript中使用AJAX进行异步数据请求时遇到的错误,详细分析了AJAX的readyState五个状态,并指出只有当状态为4时才能获取完整响应。错误的代码导致了多次错误提示弹窗。解决方案是修改statechanged函数,只在readyState为4且服务器返回"OK"时提示成功,否则提示出错。

被折叠的 条评论
为什么被折叠?



