我理解的jquery.ajax请求的loading处理方式

admin 发布于：2015-03-23 21:00:00

阅读：loading

背景介绍

满项目中到处都飘着ajax请求，基本上这几年所有的项目当中都如此，特别是前端使用某个富客户端js框架，传统的form表单提交请求的方式已经很少见了，反正我现在是这种情况，就谈一谈对在jquery中ajax请求的一个通用loading效果的处理吧。
先简单说一下适合做loading效果的jquery插件吧，主要有弹出框和弹出层两种方式，以jquery.block插件为例吧。假设打开loading和关闭loading的函数为：

function showLoading() {
    $.blockUI({
        message : "<font size='3'>操作执行中...请稍后</font>",
        css : {
            border : "none",
            padding : "15px",
            "-webkit-border-radius" : "10px",
            "-moz-border-radius" : "10px",
            opacity : 1
        },
        overlayCSS : {
            opacity : 0.6
        },
        baseZ : 99999
    });
}
function hideLoading() {
    $.unblockUI();
}

方案一
有了loading效果之后，就可以在ajax请求之前和之后分别调用开启和关闭，我记得我最开始的写法是所有用到的地方调用一下，就如同以下的代码一样：

$.ajax({
    url : "xxx.jsp",
    data : {
        "paramName" : "paramValue"
    },
    beforeSend : function(xhr) {
        showLoading();
    },
    success : function(result) {
        hideLoading();
    },
    error : function(a, b, c) {
        hideLoading();
    }
});

方案二
上述代码尽管已经非常简化了，但是仍然使得业务处理代码与等待效果的代码揉一块儿了，在某个项目中看到了另外一种写法，如下示例：

$(document).ajaxStart(showLoading);
$(document).ajaxStop(hideLoading);

此种写法属于一劳永逸了，所有的页面发起的ajax请求都将会有loading提示了，但是细细分析起来或者说是本着严谨的态度来说，有些ajax请求本身不需要loading效果，或者某些datagrid组件自带的有loading效果，无需我们重复添加，那这相当于还是有些问题了。

方案三
那么为了更好的解决上述两种方式的不足，我的想法是，在不改变$.ajax请求的api情况下（能不增加学习成本当然是最好的），我们自己包装一个ajax请求，专门用于出现操作等待效果，这样在不需要出现loading效果时使用原生态的$.ajax，需要使用时就用包装的这个函数，假设包装的请求函数命名为$.ajaxRequest，相关代码为：

function commonDefaules(options) {
    // 默认参数定义
    var defaults = {
        onBeforeSend : function(xhr) {
            showLoading();
            if (options.beforeSend) {
                options.beforeSend(xhr);
            }
        },
        onSuccess : function(data) {
            // 显示blockui
            hideLoading();
            if (options.success) {
                options.success(data);
            }
        },
        onError : function(a, b, c) {
            hideLoading();
            if (options.error) {
                options.error(a, b, c);
            }
        }
    };
    return defaults;
}
jQuery.extend({
    ajaxRequest : function(options) {
        // 默认参数定义
        var defaults = commonDefaules(options);
        var options = $.extend(defaults, options);
        options.beforeSend = defaults.onBeforeSend;
        options.success = defaults.onSuccess;
        options.error = defaults.onError;
        $.ajax(options);
    }
});

代码原理就不说明了，也没什么好说的，至于有疑问可以提出来。代码使用示例，则如同传统的$.ajax完全相同，只是在原有的某些函数执行前先执行启用或关闭loading的函数，调用示例如下（大多数参数可以不写，使用默认）：

$.ajaxRequest({
    url : "xxx.jsp",
    data : {},
    dataType : 'json',
    type : 'post',
    success : function(data) {
        alert("success");
    },
    error : function() {
        alert("error");
    }
});

注

上述许多内容已经过时和过期了，留存本篇文章仅为方便个人查看，原始文章的信息参考：

原始链接：https://www.chendd.cn/information/viewInformation/other/114.a

最后更新：2015-03-23 21:00:00

访问次数：350

评论次数：0

点赞个数：0