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](); //如果有这个补丁,就应用补丁 }); })();
这样既不会导致太多次的判断,而且可以针对指定页面的请求进行补丁处理。
这是目前我能想到最好的方法了,如果还有更完美的方法,还望大侠赐教。:-)