检测 ajaxSend() 和 ajaxComplete() 之间的匹配答案

【问题标题】：Detect matching between ajaxSend() and ajaxComplete()检测 ajaxSend() 和 ajaxComplete() 之间的匹配
【发布时间】：2017-04-28 21:31:47
【问题描述】：

我需要捕获所有 ajax 请求。我使用 jQuery like here

$(document).ajaxSend(function (event, req, settings) {
    console.log('Request Sent');
});
$(document).ajaxComplete(function (event, req, settings) {
    console.log('Request Completed');
});

而且我可以有一些重复的请求（使用相同的 url）。并且可能具有相同的数据。
Simple example
这里我调用 loadBBC() 两次。

问题：如何识别（匹配）第一个 loadBBC 和第二个 loadBBC 的 ajaxSend/ajaxComplete？

我只想将所有request_1/response_1、request_2/response_2保存在一起。不是request_1、request_2、response_2、response_1

我不能使用 settings.url 或 settings.data 作为唯一值，因为它们可以重复。

谢谢

【问题讨论】：

标签： jquery ajax

【解决方案1】：

我认为 jQuery AJAX 不支持第三方 JS 库。
所以我使用了原生 XMLHttpRequest 并覆盖了它。
我使用了these 方式并对其进行了修改（将 send() 的请求 和 'readystatechange' 事件的响应 一起保存）。

例如，您可以使用 https://github.com/slorber/ajax-interceptor 。并添加您自己的功能。

【讨论】：

【解决方案2】：

如果我对您的理解正确，您希望通过一个独特的值来关联您的请求和响应。

您可以在jquery.ajax 上使用上下文。这意味着您将不得不“放弃”负载，但由于它实际上是 ajax 的包装器，因此您不会丢失任何东西，除了一点点打字。

这是一个使用您提供的类似代码的示例。

$(function () {

// Ensure if our request context doesn't have an ID we at least get something back.
function getContextRequestID(settings, defaultIfNotSet)
{
    if (typeof settings.context.requestID !== "undefined")
    {
        return settings.context.requestID;
    }
    return defaultIfNotSet;
}

function writeToJsResult(method, settings)
{
    var DefaultRequestID = -1;

    var requestID = getContextRequestID(settings, DefaultRequestID);

    $(".js-result").append('<p>' + method + ': Ajax request for page -->  ' + settings.url + ' with ID of: ' + settings.context.requestID + '</p>');
}

$(document).ajaxSend(function (event, jqxhr, settings) {
    writeToJsResult("Starting", settings);
});

$(document).ajaxError(function (event, req, settings) {
    writeToJsResult("Error", settings);
});

$(document).ajaxComplete(function (event, req, settings) {
    writeToJsResult("Complete", settings);
});

/* triggering all Ajax requests */
$('.js-btn-json').on('click', function () {
    loadBBC();
    loadBBC();
});

function loadBBC()
{
    loadSite("http://www.bbc.com");
}

function loadCNN()
{
    loadSite("http://www.cnn.com");
}

function loadSite(url)
{
    // Not sure how you want to correlate them. For now using random. 
    // Perhaps a global running counter
    // Perhaps a GUID/UUID
    // http://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
    var requestID = getRandomInt(0, 100);

    $.ajax({
        url: url,
        context: {
            requestID: requestID
        }
    });
}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

});

【讨论】：

【解决方案3】：

我的建议是，在全局ajaxSend 中为每个请求添加一个特定的侦听器，而不是两个未连接的侦听器。一个样本胜过千言万语：

$(document).ajaxSend(function (e, xhr, settings) {
    xhr.always(function () {
        //do something
    });
});

always 是等效于ajaxComplete 的延迟方法。 Check other supported methods

【讨论】：

这是完美的。