Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript: Detect AJAX requests

Is there any way to detect global AJAX calls (particularly responses) on a web page with generic JavaScript (not with frameworks)?

I've already reviewed the question "JavaScript detect an AJAX event", here on StackOverflow, and tried patching in the accepted answer's code into my application but it didn't work. I've never done anything with AJAX before either so, I don't know enough to modify it to work.

I don't need anything fancy, I just need to detect all (specific, actually, but I'd have to detect all first and go from there) AJAX responses and patch them into an IF statement for use. So, eventually, I'd like something like:

if (ajax.response == "certainResponseType"){     //Code } 

, for example.

Update: It seems I should clarify that I'm not trying to send a request - I'm developing a content script and I need to be able to detect the web page's AJAX requests (not make my own), so I can execute a function when a response is detected.

like image 550
mythofechelon Avatar asked May 28 '12 10:05

mythofechelon


People also ask

How do I know if ajax request is running?

You could use ajaxStart and ajaxStop to keep track of when requests are active. Show activity on this post. Show activity on this post. Checking for null to determine if the request object exists is important, but if it is not null you should really check request.

How do you check if all ajax calls are completed?

The ajaxStop() method specifies a function to run when ALL AJAX requests have completed.

How would you fire a callback when any ajax request on a page has completed?

The "complete" function executes only after the "success" of ajax. So try to call the printWithAjax() on "complete". This should work for you.


1 Answers

Here's some code (tested by pasting into Chrome 31.0.1650.63's console) for catching and logging or otherwise processing ajax requests and their responses:

(function() {     var proxied = window.XMLHttpRequest.prototype.send;     window.XMLHttpRequest.prototype.send = function() {         console.log( arguments );         //Here is where you can add any code to process the request.          //If you want to pass the Ajax request object, pass the 'pointer' below         var pointer = this         var intervalId = window.setInterval(function(){                 if(pointer.readyState != 4){                         return;                 }                 console.log( pointer.responseText );                 //Here is where you can add any code to process the response.                 //If you want to pass the Ajax request object, pass the 'pointer' below                 clearInterval(intervalId);          }, 1);//I found a delay of 1 to be sufficient, modify it as you need.         return proxied.apply(this, [].slice.call(arguments));     };   })(); 

This code solves the above issue with the accepted answer:

Note that it may not work if you use frameworks (like jQuery), because they may override onreadystatechange after calling send (I think jQuery does). Or they can override send method (but this is unlikely). So it is a partial solution.

Because it does not rely on the 'onreadystatechange' callback being un-changed, but monitors the 'readyState' itself.

I adapted the answer from here: https://stackoverflow.com/a/7778218/1153227

like image 73
Omn Avatar answered Sep 24 '22 00:09

Omn