Javascript 中采用AJAX异步请求数据出错问题(没有搞清readystate几个状态)

本文介绍了在JavaScript中使用AJAX进行异步数据请求时遇到的错误,详细分析了AJAX的readyState五个状态,并指出只有当状态为4时才能获取完整响应。错误的代码导致了多次错误提示弹窗。解决方案是修改statechanged函数,只在readyState为4且服务器返回"OK"时提示成功,否则提示出错。

今天在写用户验证的时候出现了一个问题,卡了一天,也是笨的要死了,总结下:

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("出错");
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值