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对象 方面的文章才弄懂,
这里就不解释了,大家自己去找这方面的资料吧,不过 donealways1.5以后的版本才能使用,这点要注意下。

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

(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](); //如果有这个补丁,就应用补丁
    });
})();

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

 

posted @ 2013-07-10 11:23  楼教主  阅读(2795)  评论(0编辑  收藏  举报