Detect matching between ajaxSend() and ajaxComplete()

Question

I need to catch all ajax requests. I use jQuery like here

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

And I can have some repeated requests (with same url). And maybe with same data.
Simple example
Here I call loadBBC() twice.

Question: How can I identity (match) ajaxSend/ajaxComplete for the 1st loadBBC and for the 2nd loadBBC?

I just want to save all request_1/response_1, request_2/response_2 together. Not request_1, request_2, response_2, response_1

I can't use settings.url or settings.data as unique values because they can be repeated.

Thanks

score 1 · Answer 1 · answered Mar 25 '19 at 16:18

1

My suggestion is, instead of two unconnected listeners, is adding a specific listener to each request in the global ajaxSend. A sample is better than thousand words:

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

always is the deferred method equivalent for ajaxComplete. Check other supported methods

answered Mar 25 '19 at 16:18

kpull1

1,623
15
19

This is perfect. – GuyPaddock Jul 18 '21 at 01:16

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

I think jQuery AJAX doesn't support third party JS libraries.
So I used native XMLHttpRequest and overrode it.
I used these ways and modified it (to save request from send() and response from 'readystatechange' event together).

For example, you can use https://github.com/slorber/ajax-interceptor . And add your own functionality.

edited May 23 '17 at 12:13

Community

1
1

answered Dec 14 '16 at 17:42

JDoE

33
2

score 0 · Accepted Answer · answered Dec 14 '16 at 18:20

If I am understanding you correctly, you are looking to correlate your requests and responses via a unique value.

You could use context on jquery.ajax. This means you would have to "give up" load but since its really a wrapper around ajax you aren't losing anything besides a little typing.

Here is an example using similar code that you provided.

$(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;
}

});

Detect matching between ajaxSend() and ajaxComplete()

3 Answers3