【jQuery学习笔记】关于jQuery1.6.1版的ajaxstart不执行问题解决方案
以前在学习jQuery的ajax时，遇到了在1.6版的ajaxStart不执行问题，在csdn上面曾经发过贴(原文)，前几天看到网友blackgull提供了jQuery1.6版的兼容方案，觉得很有必要重新整理下，便于自己查阅，以及有需要的朋友。具体代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title>全局Ajax事件应用示例 </title>
6 <style type="text/css">
7 button, div, li, a {
8 font-size: 12px;
9 font-family: Tahoma;
10 }
11
12 #loading {
13 display: none;
14 }
15 </style>
16 <script type="text/javascript" src="jquery-1.6.1.js">
17 </script>
18 <script type="text/javascript">
19 $(document).ready(function(){
20 $.ajaxSetup({
21 cache:false,
22 });
23 $("#loading").ajaxStart(function(){
24 $(this).show();
25 }).ajaxStop(function(){
26 $(this).hide();
27 }).ajaxError(function(){
28 alert("error");
29 });
30 $("button").click(function(){
31 var url ="http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?";
32 $.getJSON(url,function(data){
33 $.each(data.stories, function(i, story){
34 var content =" <li> <a href='"+ story.href +"' target='_blank'>"+ story.title +" </a>";
35 $("#res ul").append(content);
36 if (i ==3)
37 returnfalse;
38 });
39 });
40 // $.ajax({
41 // url: url,
42 // data: {
43 // "appkey": "appkey=http%3A%2F%2Fmashup.com",
44 // "type": "javascript"
45 // },
46 // dataType: "jsonp",
47 // cache: false,
48 // Type: "GET",
49 // success: function(data){
50 // $.each(data.stories, function(i, story){
51 // var content = " <li> <a href='" + story.href + "' target='_blank'>" + story.title + " </a>";
52 // $("#res ul").append(content);
53 // if (i == 3)
54 // return false;
55 // });
56 // }
57 // })
58
59 });
60 });
61 </script>
62 </head>
63 <body>
64 <button>
65 加载数据
66 </button>
67 <div >
68 数据加载中... <img src="images/ajax-loader.gif"/>
69 </div>
70 <div >
71 <ul type="square">
72 </ul>
73 </div>
74 </body>
75 </html>
我的想法是：发送请求后，出现加载动画，完成后动画消失。
可是得到的实际效果却是第一次有动画，第二次又没有动画了，后来根据zell419，jiangguoliao等网友的提醒，添加随机数，取消缓存，但还是失败。然后自己试了下$.ajax({cache:false})(注释部分)以及使用ajaxSetup()，还是不成功。
后来换了jquery-1.4.2版的，成功显示了。于是这里写了2种解决方案，代码如下：
1.换个库就OK
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title>全局Ajax事件应用示例</title>
6 <style type="text/css">
7 button, div, li, a {
8 font-size: 12px;
9 font-family: Tahoma;
10 }
11
12 #loading {
13 display: none;
14 }
15 </style>
16 <script type="text/javascript" src="jquery-1.4.2.js">
17 </script>
18 <script type="text/javascript">
19 $(document).ready(function(){
20 $("button").click(function(){
21 var url ="http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?";
22 $.getJSON(url, function(data){
23 $.each(data.stories, function(i, story){
24 var content ="<li><a href='"+ story.href +"' target='_blank'>"+ story.title +"</a>";
25 $("#res ul").append(content);
26 if (i ==3)
27 returnfalse;
28 });
29 });
30 });
31 $("#loading").ajaxStart(function(){
32 $(this).show();
33 }).ajaxStop(function(){
34 $(this).hide();
35 });
36 });
37 </script>
38 </head>
39 <body>
40 <button>
41 加载数据
42 </button>
43 <div >
44 数据加载中...<img src="images/ajax-loader.gif"/>
45 </div>
46 <div >
47 <ul type="square">
48 </ul>
49 </div>
50 </body>
51 </html>
2.另一种是有csdn网友izgnaw提供的方法，对库没有限制
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title>全局Ajax事件应用示例</title>
6 <style type="text/css">
7 button, div, li, a {
8 font-size: 12px;
9 font-family: Tahoma;
10 }
11
12 #loading {
13 display: none;
14 }
15 </style>
16 <script type="text/javascript" src="jquery-1.6.1.js">
17 </script>
18 <script type="text/javascript">
19 $(document).ready(function(){
20 $("button").click(function(){
21 $("#loading").show();
22 var url ="http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?";
23 $.getJSON(url,function(data){
24 $.each(data.stories, function(i, story){
25 var content ="<li><a href='"+ story.href +"' target='_blank'>"+ story.title +"</a>";
26 $("#res ul").append(content);
27 if (i ==3)
28 returnfalse;
29 $("#loading").hide();
30 });
31 });
32
33 });
34 });
35 </script>
36 </head>
37 <body>
38 <button>
39 加载数据
40 </button>
41 <div >
42 数据加载中...<img src="images/ajax-loader.gif"/>
43 </div>
44 <div >
45 <ul type="square">
46 </ul>
47 </div>
48 </body>
49 </html>
最后提供在jquery-1.6.1版本下，用ajaxStart实现：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title>全局Ajax事件应用示例</title>
6 <style type="text/css">
7 button, div, li, a {
8 font-size: 12px;
9 font-family: Tahoma;
10 }
11
12 #loading {
13 display: none;
14 }
15 </style>
16 <script type="text/javascript" src="jquery-1.6.1.js">
17 </script>
18 <script type="text/javascript">
19 jQuery.ajaxPrefilter(function( options ) {
20 options.global =true;
21 });
22 $(document).ready(function(){
23 $("#loading").ajaxStart(function(){
24 $(this).show();
25 }).ajaxStop(function(){
26 $(this).hide();
27 });
28 $("button").click(function(){
29 console.log('abc');
30 var url ="http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?";
31 $.getJSON(url,function(data){
32 $.each(data.stories, function(i, story){
33 var content ="<li><a href='"+ story.href +"' target='_blank'>"+ story.title +"</a>";
34 $("#res ul").append(content);
35 if (i ==3)
36 returnfalse;
37 });
38 });
39 });
40 });
41 </script>
42 </head>
43 <body>
44 <button>
45 加载数据
46 </button>
47 <div >
48 数据加载中...<img src="images/ajax-loader.gif"/>
49 </div>
50 <div >
51 <ul type="square">
52 </ul>
53 </div>
54 </body>
55 </html>
在1.6.3版下也有效果。
PS： 第一次放到首页，菜鸟刚刚学习怎么写博客，如果有疏漏，欢迎大家给我批评和指正！或者给我留言！
参考资料：1.在CSDN上曾经发的贴
3.jQuery API -AJAX