I'm working on a project that has several scripts that I cannot change. These scripts update the page via AJAX. When the update is complete I need to run some code.

Is there any event that fires when any XMLHttpRequest is complete? (or any XMLHttpRequest state change?).

Unfortunately I cannot access the specific XMLHttpRequest object used to make the request.

Thanks,

I'm working on a project that has several scripts that I cannot change. These scripts update the page via AJAX. When the update is complete I need to run some code.

Is there any event that fires when any XMLHttpRequest is complete? (or any XMLHttpRequest state change?).

Unfortunately I cannot access the specific XMLHttpRequest object used to make the request.

Thanks,

• javascript
• jquery
• ajax
• xmlhttprequest

• 4 If you're using jQuery exclusively for said ajax, yes. ajaxComplete. – Kevin B Commented Aug 15, 2013 at 18:34
• @KevinB's suggestion would only work if the scripts that are not under your control rely on jQuery ajax. – Christophe Commented Aug 15, 2013 at 18:36
• @Christophe That's what KevinB's comment says - If you're using jQuery exclusively for **said ajax**, – Ian Commented Aug 15, 2013 at 18:37
• @Ian my point is that it's not just about what the OP is using, but also about what was used in the other scripts he didn't write. I doubt the other scripts rely on jQuery because the OP explicitly mentions the XMLHttpRequest object. – Christophe Commented Aug 15, 2013 at 18:41
• 1 Do i really have to be that exact? i thought my comment covered both cases pretty well. said ajax, being ajax requests he wishes to know when they are done. – Kevin B Commented Aug 15, 2013 at 18:42

1 Answer 1

Without jQuery, you can hook the open method to attach a listener for each XHR object's readystatechange events at the time the XHR object is opened. Ensure the following code runs before any Ajax occurs:

// save the real open
var oldOpen = XMLHttpRequest.prototype.open;

function onStateChange(event) {
    // fires on every readystatechange ever
    // use `this` to determine which XHR object fired the change event
}

XMLHttpRequest.prototype.open = function() {
    // when an XHR object is opened, add a listener for its readystatechange events
    this.addEventListener("readystatechange", onStateChange)

    // run the real `open`
    oldOpen.apply(this, arguments);
}

Alternatively, if you only care about successful load events, you can listener for that event instead of readystatechange.