jQuery下ajax事件的简单分析

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

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

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

(function(){
    var box = $("#ajaxtest .docs-room"); //测试数据显示区元素

    $("#btn-send").click(function(){ //绑定发送按钮
        box.html(""); //清空显示区

        $("<p>").html( (new Date).toLocaleString() ).appendTo(box); //添加测试事件
        $.ajax({
            url: '/mvc/blog/news.aspx', //右侧 昵称，园龄 等数据页面
            data: '{"blogApp":"' + currentBlogApp + '"}', //博客blogApp
            type: 'post',
            dataType: 'text',
            contentType: 'application/json; charset=utf-8',
            //从 url 到 contentType 这几行代码是博客园的，我直接拿过来用的。
            success: function(data) { //请求成功后调用
                $("<p>").html( "success [ " + $(data).eq(0).text() + " ]" ).appendTo(box);
            },
            complete: function(request) { //请求完成后调用
                $("<p>").html("complete [ " + $(request.responseText).eq(0).text() + " ]" ).appendTo(box);
            }
        }).done(function(data) { //请求成功后调用(deferred对象的方法)
            $("<p>").html("done success [ " + $(data).eq(0).text() + " ]" ).appendTo(box);
        }).always(function(data) { //请求完成后调用(deferred对象的方法)
            $("<p>").html("always complete [ " + $(data).eq(0).text() + " ]" ).appendTo(box);
        });
    });

    $("#btn-clear").click(function(){ //清除数据
        box.html("");
    });

    $(document).ajaxSuccess(function(evt, request){ //ajax监听，所有ajax请求成功都执行
        $("<p>").html("ajaxSuccess [ " + $(request.responseText).eq(0).text() + " ]" ).appendTo(box);
    }).ajaxComplete(function(evt, request){ //ajax监听，所有ajax请求完成都执行
        $("<p>").html("ajaxComplete [ " + $(request.responseText).eq(0).text() + " ]" ).appendTo(box);
    });

}());

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

测试控制区

-

测试数据显示区

 

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

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

(function(){ //监听ajax事件
    $(document).ajaxSuccess(function(evt, request, settings, data) {

        var patchs = { //页面补丁方法集，把需要补丁的页面名写到这就可以了。
            CommentForm: function(){ //评论页面
                $("#btn_comment_submit").removeClass("comment_btn").addClass("btn"); //提交按钮
            },
            sidecolumn: function(){//搜索所在的页面
                $(".div_my_zzk").addClass("input-append"); //搜索框
                $(".btn_my_zzk").removeClass("btn_my_zzk").addClass("btn"); //搜索按钮
            }
        }

        var _key = settings.url.split("/").pop().split(".").shift(); //取的ajax url的文件名
        patchs[_key] && patchs[_key](); //如果有这个补丁，就应用补丁
    });
})();

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