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);
});

}());

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

测试控制区
-

测试数据显示区

// (function(){
var isButton = false; //是否点击按钮
var box = $("#ajaxtest .docs-room");

$("#btn-send").click(function(){
isButton = true; //点击按钮
box.html("");

$("").html( (new Date).toLocaleString() ).appendTo(box);
$.ajax({
url: '/mvc/blog/news.aspx',
data: {blogApp: currentBlogApp},
type: 'get',
dataType: 'text',
contentType: 'application/json; charset=utf-8',
success: function(data){
$("").html( "success [ " + $(data).eq(0).text() + " ]" ).appendTo(box);
},
complete: function(request) {
$("").html("complete [ " + $(request.responseText).eq(0).text() + " ]" ).appendTo(box);
}
}).done(function(data) { //deferred对象
$("").html("done success [ " + $(data).eq(0).text() + " ]" ).appendTo(box);
}).always(function(data) {
$("").html("always complete [ " + $(data).eq(0).text() + " ]" ).appendTo(box);
});
});

$("#btn-clear").click(function(){
box.html("");
});

$(document).ajaxSuccess(function(evt, request){
if(!isButton) return; //判断是否点击按钮了
$("").html("ajaxSuccess [ " + $(request.responseText).eq(0).text() + " ]" ).appendTo(box);
}).ajaxComplete(function(evt, request){
if(!isButton) return; //判断是否点击按钮了
$("").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](); //如果有这个补丁，就应用补丁
});
})();

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