ajax请求解决方法及案例

　　当前项目对用户体验的要求层出不穷，本篇通过所历项目与前辈网文日志加以记录总结。

　　多个 ajax 请求的各类解决方案：同步，队列，cancel 请求，本章末尾提供 demo，或点这里。

　　注意：能一个 ajax 请求解决的问题绝不用两个 ajax 请求来处理，没有最好的方案，只有最合适的方案。

　　需求大致分两大类，123和45：

　　　　1.多个 ajax 请求同时发送，相互无依赖。

　　　　2.多个 ajax 请求互相依赖，必须有先后顺序。

　　　　3.多个 ajax 请求被同时发送，只需要最后一个请求。

　　　　4.多个 ajax 请求返回的是同一个数据的不同部分，我们需要在前端把这些数据组合成一个完整的数据来运用，即需要知道数据的次序来正确拼接。

　　　　5.不同查询条件下的同一组数据，我们需要最新的一组数据。

　　第 2 种 case

　　应用场景：多个 ajax 请求，需要顺序执行，后一个 ajax 请求的执行参数是前一个 ajax 的结果。

　　一个非常经典的例子：用户登录后我们发送一次请求得到用户的应用 ID，然后利用应用 ID 发送一次请求得到具体的应用内容。

　　处理方法：

　　　　1.利用 ajax 参数 async 设置为 false，进行同步操作（这个方法只适合同域操作，跨域需使用下面两种方法）

　　　　2.利用 ajax 嵌套

　　　　3.利用队列进行操作，jquery ajax 队列操作核心代码：

(function ($) {
    var ajaxRequest = {};

    $.ajaxQueue = function (settings) {
        var options = $.extend({ className: 'DEFEARTNAME' }, $.ajaxSettings, settings);
        var _complete = options.complete;
        $.extend(options, {
            complete: function () {
                if (_complete)
                    _complete.apply(this, arguments);

                if ($(document).queue(options.className).length > 0) {
                    $(document).dequeue(options.className);
                } else {
                    ajaxRequest[options.className] = false;
                }
            }
        });

        $(document).queue(options.className, function () {
            $.ajax(options);
        });

        if ($(document).queue(options.className).length == 1 && !ajaxRequest[options.className]) {
            ajaxRequest[options.className] = true;
            $(document).dequeue(options.className);
        }
    };


})(jQuery);

　　第 3 种 case

　　应用场景：比较典型的是 autocomplete 控件的操作，case 2 解决方案有些浪费。

　　解决方法：保留最后一次请求，cancel之前的请求，代码如下：

(function ($) {
var jqXhr = {}；
 $.ajaxSingle = function (settings) {
        var options = $.extend({ className: 'DEFEARTNAME' }, $.ajaxSettings, settings);

        if (jqXhr[options.className]) {
            jqXhr[options.className].abort();
        }

        jqXhr[options.className] = $.ajax(options);
    };
})(jQuery);

　　某500强企业操作平台解决方案，待整理。

　　由于多个 ajax 请求的响应时间无法控制，可以用？解决。完整 demo 如下：

body：

<form id="form1" runat="server">
    <input type="button" id="btnLaunchAsync" value="Launch Asynchronous Request" />
    <input type="button" id="btnLaunchSync" value="Launch Synchronous Request" />
    <input type="button" id="btnLaunchQueue" value="Launch Requested Queue" />
    <input type="button" id="btnLaunchSingle" value="Launch Single Request" />
    <div id="txtContainer"></div>
    </form>

JavaScript：

(function ($) {
    var jqXhr = {},
        ajaxRequest = {};

    $.ajaxQueue = function (settings) {
        var options = $.extend({ className: 'DEFEARTNAME' }, $.ajaxSettings, settings);
        var _complete = options.complete;
        $.extend(options, {
            complete: function () {
                if (_complete)
                    _complete.apply(this, arguments);

                if ($(document).queue(options.className).length > 0) {
                    $(document).dequeue(options.className);
                } else {
                    ajaxRequest[options.className] = false;
                }
            }
        });

        $(document).queue(options.className, function () {
            $.ajax(options);
        });

        if ($(document).queue(options.className).length == 1 && !ajaxRequest[options.className]) {
            ajaxRequest[options.className] = true;
            $(document).dequeue(options.className);
        }
    };

    $.ajaxSingle = function (settings) {
        var options = $.extend({ className: 'DEFEARTNAME' }, $.ajaxSettings, settings);

        if (jqXhr[options.className]) {
            jqXhr[options.className].abort();
        }

        jqXhr[options.className] = $.ajax(options);
    };

})(jQuery);

var ajaxSleep = (function () {
    var _settings = {
        type: 'GET',
        cache: false,
        success: function (msg) {
            var thtml = $('#txtContainer').html();
            $('#txtContainer').html(thtml + "<br />" + msg);
        }
    };
    return {
        get: function (seconds, mode, isAsync) {
            var mode = mode || 'ajax',
                        isAsync = isAsync || false;

            $[mode]($.extend(_settings, {
                url: "ResponsePage.aspx?second=" + seconds,
                async: isAsync,
                className: 'GET'
            }));
        },
        post: function (seconds, mode, isAsync) {
            var mode = mode || 'ajax',
                        isAsync = isAsync || false;

            $[mode]($.extend(_settings, {
                type: 'POST',
                url: "PostPage.aspx",
                data: { second: seconds },
                async: isAsync,
                className: 'POST'
            }));
        }
    };
} ());

var launch = function (settings) {

    $('#txtContainer').html('');

    var mode = settings.mode,
                isAsync = settings.isAsync;

    ajaxSleep.get(12, mode, isAsync);
    ajaxSleep.get(10, mode, isAsync);
    ajaxSleep.get(8, mode, isAsync);

    ajaxSleep.post(6, mode, isAsync);
    ajaxSleep.post(4, mode, isAsync);
    ajaxSleep.post(2, mode, isAsync);
}

$(document).ready(function () {
    //第1种case
    $('#btnLaunchAsync').click(function () {
        launch({ isAsync: true });
    });

    //第2种case
    $('#btnLaunchSync').click(function () {
        launch({});
    });

    //第2种case
    $('#btnLaunchQueue').click(function () {
        launch({ mode: 'ajaxQueue', isAsync: true });
    });

    //第3种case
    $('#btnLaunchSingle').click(function () {
        launch({ mode: 'ajaxSingle', isAsync: true });
    });
});

　　摘自：多ajax请求的各类解决方案（同步, 队列, cancel请求）

ajax请求解决方法及案例

猜你喜欢