jQuery下ajax事件的简单分析

昨天写了一篇关于监视页面动态生成元素问题的文章，引起了一些小小的争议，不过我从中学到了很多。
文章在这，《jQuery下实现等待指定元素加载完毕》
当然 动态生成的节点元素 分很多种情况，这里我们只分析ajax取得数据后生成元素问题。

昨天有大侠在下面评论，我学到了两种方法，一是 ajaxSuccess 来监听，二是 DOMNodeInserted 来监听，
最终我选择了 ajaxSuccess 而不打算用 DOMNodeInserted 。
不是因为 DOMNodeInserted 不好，这个方法还是相当不错的，我以前都没见过，(先学习了，留着以后备用)
只是因为 DOMNodeInserted 对每个节点生成都响应一次，所以会有上百次上千次的判断，造成了不必要的浪费。
(PS：不知道我的理解是否正确，如果有不恰当的地方，还望各位大侠指出。)

所以我选择了 ajaxSuccess ，但是还有个问题，ajaxSuccess 与 $.ajax() 内的 success 方法，
以及 jQuery 1.5 以后推荐的 done 方法，执行的先后顺序是怎样的呢？
我们先来做一个简单的测试，代码如下

 1 (function(){
 2     var box = $("#ajaxtest .docs-room"); //测试数据显示区元素
 3     
 4     $("#btn-send").click(function(){ //绑定发送按钮
 5         box.html(""); //清空显示区
 6         
 7         $("<p>").html( (new Date).toLocaleString() ).appendTo(box); //添加测试事件
 8         $.ajax({
 9             url: '/mvc/blog/news.aspx', //右侧 昵称，园龄 等数据页面
10             data: '{"blogApp":"' + currentBlogApp + '"}', //博客blogApp
11             type: 'post',
12             dataType: 'text',
13             contentType: 'application/json; charset=utf-8',
14             //从 url 到 contentType 这几行代码是博客园的，我直接拿过来用的。
15             success: function(data) { //请求成功后调用
16                 $("<p>").html( "success [ " + $(data).eq(0).text() + " ]" ).appendTo(box);
17             },
18             complete: function(request) { //请求完成后调用
19                 $("<p>").html("complete [ " + $(request.responseText).eq(0).text() + " ]" ).appendTo(box);
20             }
21         }).done(function(data) { //请求成功后调用(deferred对象的方法)
22             $("<p>").html("done success [ " + $(data).eq(0).text() + " ]" ).appendTo(box);
23         }).always(function(data) { //请求完成后调用(deferred对象的方法)
24             $("<p>").html("always complete [ " + $(data).eq(0).text() + " ]" ).appendTo(box);
25         });
26     });
27     
28     $("#btn-clear").click(function(){ //清除数据
29         box.html("");
30     });
31     
32     $(document).ajaxSuccess(function(evt, request){ //ajax监听，所有ajax请求成功都执行
33         $("<p>").html("ajaxSuccess [ " + $(request.responseText).eq(0).text() + " ]" ).appendTo(box);
34     }).ajaxComplete(function(evt, request){ //ajax监听，所有ajax请求完成都执行
35         $("<p>").html("ajaxComplete [ " + $(request.responseText).eq(0).text() + " ]" ).appendTo(box);
36     });
37     
38 }());

下面是测试区，大家可以点击测试下。

 

测试控制区

-

测试数据显示区

 

发现执行顺序很有意思，always 竟然跑到 ajaxSuccess 前面去了。
与我原先预想的不太一样，后来看了 deferred对象 方面的文章才弄懂，
这里就不解释了，大家自己去找这方面的资料吧，不过 done 和 always 要1.5以后的版本才能使用，这点要注意下。

我们可以肯定的是 ajaxSuccess 会在 success 和 done 之后执行，那么可以肯定节点已经生成，
这时我们对这几个节点进行补丁处理即可，下面是我的代码，请各位大侠审查、

 1 (function(){ //监听ajax事件
 2     $(document).ajaxSuccess(function(evt, request, settings, data) {
 3     
 4         var patchs = { //页面补丁方法集，把需要补丁的页面名写到这就可以了。
 5             CommentForm: function(){ //评论页面
 6                 $("#btn_comment_submit").removeClass("comment_btn").addClass("btn"); //提交按钮
 7             },
 8             sidecolumn: function(){//搜索所在的页面
 9                 $(".div_my_zzk").addClass("input-append"); //搜索框
10                 $(".btn_my_zzk").removeClass("btn_my_zzk").addClass("btn"); //搜索按钮
11             }
12         }
13         
14         var _key = settings.url.split("/").pop().split(".").shift(); //取的ajax url的文件名
15         patchs[_key] && patchs[_key](); //如果有这个补丁，就应用补丁
16     });
17 })();

这样既不会导致太多次的判断，而且可以针对指定页面的请求进行补丁处理。
这是目前我能想到最好的方法了，如果还有更完美的方法，还望大侠赐教。:-)

 

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>