CODEWITHSUNDEEP
javascriptajaxeventsxmlhttprequestdom-events
Daniel Möller
Daniel Möller

Reputation: 86600

How to view all methods that will be executed when an ajax call finishes?

Suppose I have an ajax call created by a page I don't control.

The page itself creates a request, gets the response and continue it's job. None of the page's code is my code.

How can I see which methods will be executed as the callback of that request?

In other words, how can I know what the page will do with the response?

Important: I need to be able to do that for several different calls, so I wish to know that "programmatically".

Isn't there an easy way to list all handlers assigned to an event?

For instance, take the "onreadystatechange event and find out what listeners were assigned to it?

Upvotes: 0

Views: 38

Answers (2)

Joseph
Joseph

Reputation: 119837

In Chrome, to locate the code that's firing the AJAX

  • Use the network tab of Chrome.
  • Let the AJAX fire, and then look for the corresponding row, with Type of "xhr".
  • Then look at Initiator of the same row and hover over the text. It should show a tooltip of a stack trace, with latest code before request at the very top.
  • Click on the very top entry. It should transport you to the Sources tab, with the code launching the AJAX. The callback should be somewhere nearby.
    • If you are aware that the entry in the trace is a library, click on something further down the trace that doesn't look like a library.
    • If you happen to land on minified code, Chrome has a formatter. It's the "braces" icon ({}) on the lower left. Further encounters with a formatted file will show it formatted.

To trace the code after a successful AJAX

  • On the Sources, add a breakpoint to where the callback is.
  • Run the AJAX again and the browser will halt at that breakpoint when it completes.
  • Then step through code with F10. Go inside a function with F11.

Chrome: https://developer.chrome.com/devtools/docs/javascript-debugging

Firefox: https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint

I need to be able to do that for several different calls, so I wish to know that "programmatically".

That's only possible if you have access (your code can hook to, or is within scope) to any of the functions called in the operation (either override how the request operates, or override something in the callback sequence. If the AJAX happens to use jQuery, follow this answer using AJAX hooks.

Upvotes: 3

Carlos2W
Carlos2W

Reputation: 2544

Your question is unclear but have you tried ajaxStop from jQuery ?

$(document).ajaxStop(function(){/*Callback here*/});

Upvotes: 1

Related Questions