WEB前端a标签的使用:
场景描述:门户网站提供apk文件的下载功能,同时需要记录下载日志。这时候在<a>标签的href属性指定资源服务器上提供下载静态资源的URL,同时添加onclick事件用来记录下载日志。
问题:记录日志的ajax请求在firebug中显示Aborted(中断,阻塞)
解决过程:先自己检查了写的js代码,是不是少添加了某个属性(例如:contentType、dataType、error),这个时候真的很纠结,google、baidu。有的说是ajax 内存溢出,有的是ajax请求超时。于是就开始改js改过来改过去貌似都一样。后来还是google看到了一篇关于IE6下同时使用href属性和onclick事件的引发的ajax请求被中断的文章引发了思考找到了解决的办法。
文章描述:
HTML代码:<a href="javascript:void(0);" id="hello"></a>
JS代码:
$("#hello").click(function(){
ajax.send(url);
});
在IE6中,会出现这个ajax请求,被中断(http请求提示:“aborted”)
产生的原因:$("#hello").click(function(){
ajax.send(url);
});
在IE6中,会出现这个ajax请求,被中断(http请求提示:“aborted”)
a标签的默认事件为跳转,也就是执行href="url",当我们设置为href="javascript:void(0);",其实就是为了阻止跳转这个默认事件。
IE6下,如果a标签被设置为href="javascript:void(0);"时,当我们点击a标签,先执行onclik事件,然后它再执行void(0);,它会阻止a标签的默认跳转行为的同时,也阻止了ajax请求,也就是为什么ajax突然被中断的原因。(onclik事件和阻止事件,间隔时间很小,几乎是同时触发的)
解决方法:
(1)在onclik事件上,添加setTimeOut,这样阻止默认事件的行为,先执行了,然后,再执行发送ajax请求。
$("#hello").click(function(){
setTimeout(function(){ajax.send(url);}, 1000);
});
(2)在onclik事件上,主动添加默认事件阻止,后面的href="javascript:void(0);"则不阻止。ajax请求正常发送。(1)在onclik事件上,添加setTimeOut,这样阻止默认事件的行为,先执行了,然后,再执行发送ajax请求。
$("#hello").click(function(){
setTimeout(function(){ajax.send(url);}, 1000);
});
$("#hello").click(function(e){
e.preventDefault();
ajax.send(url);
});