1----问题描述
在我们的网站上,出现这样一个奇怪的问题,我们做了一个弹出层注册页面(专题号:qqcf),注册提示成功,但是在页首的登录框中输入,先后出现三个重大问题:
A, 页面验证码反复输入不对,而且页面在不断刷新中,偶尔能输入正确验证码,绝大多数不对;
B,解决A后,发现第一次验证码提示总是不对;
C,解决B后,QQCF专题页面的注册后,其他页面也有类似的问题,时好时坏,立即登录页首登录框,单击登录,无任何反应,手工单击其他页面,发现已经登录。
2----过程
对于问题A,一开始未找到思路,瞎改了一通代码,无用,照样更新无用,后再页面html中发现,有个“http://url/stat?参数”请求的iframe嵌入,这是我们自己开发的一个流量统计系统的统计代码段,而这个地址找不到,报404错误,因为是iframe嵌入模式,导致页面reload,刷新了验证码,而你输入的已经是过期的验证码,所以报错,偶尔正确输入是因为正好在刷新的空隙中输入的。
对于问题B,可能与Memcache有关系,因为验证码存储在其中,在第一次读取的时候存在问题,解决有乙方修改了JS逻辑,验证码框获得焦点后直接再次刷新获得新的验证码,规避了这个问题。因为我没有参与这个问题的解决,所以不了解详细情况,这里面只是记录一下。
对于问题C,主要重点描述:
我们分析了一下,大概几个原因:
a,注册并未成功,数据库中无数据;
b,注册没有问题,登录校验有问题;
c,校验没有问题,客户端JS有问题;
进一步分析:
经过一个晚上的思考实验,总结如下:
a,验证数据库的数据插入,非常正常,没有问题;
b,登录代码经过乙方确认更新,也没有问题;
c,问题很可能处在客户端上面,因为我们页面分为header.html,index.html,foot.html通过包含关系形成整体页面,其他众多页面也有类似的登录无反应情况,尤其是新注册用户,老用户似乎没有出现此类问题。
他人提示,header.html登录有问题否?经过测试,这个头部无法相应用户登录,问题依旧,而主页能登录的原因一个就是因为在header头部前面,还有<head>标签,标签中有一个jquery.min.js库,是不是因为缺少了一些JS函数呢?因为是min版本,chrome下提示网页jquery找不到,重新调整头部,加入Jquery-1.4.3完整库文件,问题解决了!
还是有问题,主要是其他页面登录现在能响应了,但是QQCF专题注册后,登录还是没有响应,我们一时没有找到问题的解决方法。无奈之下,查看报错,我们看下网页中包含的JS库文件:
<script type="text/javascript" src="http://###/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://###/js/hisap/jquery-1.4.3.js"></script>
我们看到头部文件已经加入了jquery-1.4.3.js,并且有个一个负责登录的JS脚本index_logon.js,我们看一下里面的主要触发函数:
function logons() { var uname = document.getElementById("uname").value; var upassword = document.getElementById("upassword").value; var llcode = document.getElementById("llcode").value; if(uname=="") { alert("请填写用户名"); return false; } if(upassword=="") { alert("请填写密码"); return false; } if(llcode=="") { alert("请填写验证码"); return false; } jQuery.getJSON(lrpath+"/member/loginAction_memberLogin2.do?date="+new Date()+"&jsoncallback2=?", {'member.loginName':uname, 'member.password':upassword,'checkCode':llcode}, function(data){ if(data!="" && data.ack=='noc') { alert("验证码错误"); } else if(data!="" && data.ack=='yes') { if(jQuery.cookie('loginState') =='true') { window.location.reload(); } else { alert("用户名密码错误"); } /* window.location.reload(); */ } else { alert("用户名密码错误"); } }); }经过检测,我们发现在if(jQuery.cookie('loginState') =='true')出现 no method cookie的问题,即单击登录按钮,执行至此条语句后,无法继续执行,提示上面的错误,我们通过firefox重新跟踪了流程,发现在寻找cookie方法中是到jquery-1.4库中寻找,而不是cookie插件库;
一时间,没有思路解决,与乙方闲聊中,说了一句,为什么目前其他页面都是好的?我突然想到,这个专题页面的问题,是不是嵌入了过多的库?
看下了源码,发现一共嵌入了三次jquery库,分别出现在<head>标签,header.html,和专题的page.html中,分别对应:
<head> <script type="text/javascript" src="http://###/js/jquery-1.4.2.min.js"></script> </head> <script type="text/javascript" src="http://###/js/hisap/jquery-1.4.3.js"></script> 以及专题页面中: <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>会不会因为加载次数过多的原因呢?我试着去掉最后这个,发现reload语句执行了!页面终于正常了。
3------总结
这个问题其实以前也遇到类似的,不过是CSS方面的,在目前的网页中,加载CSS和JS过程中,是以最后一个加载的为准,所以,虽然我们在头部文件header.html中加载了jquery库和jquery.cookie插件,但是由于在page.html中又加载了一次微软的jquery库,导致前面所做的工作完全没有起到作用,cookie方法找不到,结合我们前面跟踪JS执行过程中,发现到jquery-1.4.min.js中寻找cookie方法来看,正是这个原因,并且CSS中也有类似的情况,所以在网页中加载JS以及CSS等时候,需要注意顺序。同时在处理这个问题中,由于出现了多个BUG,同时本身header.html头部文件就有问题,掩盖了很大部分的根源,以致我们走了不少弯路。