Run a function if a ajax get/post is fired

Question

As my title indicates, I need to run a function if any ajax get/post is fired.

I tried using

    $(document).ajaxStart(function () {
        console.log('a');
    });
    $(document).ajaxComplete(function () {
        console.log('c');
    });

but it runs only for the first time.

Later it does not log anything. What am I doing wrong?

I need to do this in chrome extension and on google image search page, so after 100 images it fire a ajax function to get more image data and show on page.

score 2 · Accepted Answer · edited May 23 '17 at 12:22

2

You probably want it to work even if AJAX requests are not made with jQuery with a technique like How to check if HTTP requests are open in browser?

(function() {
  var oldOpen = XMLHttpRequest.prototype.open;
  XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
    console.log('Request went out', arguments);
    oldOpen.call(this, method, url, async, user, pass);
  }
})();

edited May 23 '17 at 12:22

Community

1
1

answered Apr 23 '15 at 18:12

Ruan Mendes

90,375
31
153
217

Yes, it works when I try to do it locally, but not with chrome extension. Do you have knowledge how to do it via chrome extension? – kannu Apr 23 '15 at 18:45
@kannu You have to inject the code onto the page, not run in the context of the extension. You can then communicate back using custom events See http://stackoverflow.com/a/9517879/227299 – Ruan Mendes Apr 23 '15 at 19:17
Can you also guide which thing should I look to communicate between injected script and executeScript? I am adding my main source of code using executeScript. If I able to run function again when ajax request went out then my mail problem will be sort out. – kannu Apr 24 '15 at 10:03
@kannu You should post a separate question showing what you've tried and what your current problem is. At StackOverflow, we like a question to be about a single problem so they can be most useful to others. – Ruan Mendes Apr 24 '15 at 11:23

score 1 · Answer 2 · answered Apr 23 '15 at 17:37

1

You might be looking for something like this:

$.ajaxSetup({
   success: function(){ 
      callYourFunctionHere();
   }
});

OR

$(document).bind("ajaxSend", function(){
   alert('ajax fired');
   callYourFunctionHere();
});

Hope it works for you.

answered Apr 23 '15 at 17:37

Fahad Khan

1,635
4
23
37

Does this work with any `XMLHttpRequest`, or only with `$.ajax` requests? – redbmk Apr 23 '15 at 17:45
@Fahad, it says `Now, make an Ajax request using any jQuery method`. I'm just wondering how it would trigger it on a page that doesn't use jQuery, like Google Image Search. It could probably modify the `XmlHttpRequest` object, but I'd imagine that is frowned upon. – redbmk Apr 23 '15 at 18:01
@redbmk are you also trying to do it with google image search? – kannu Apr 23 '15 at 18:02
@kannu, no, I just read that in your question. I like that you can get events for all jQuery ajax requests, but I'm not convinced yet it'll work with native ajax calls. – redbmk Apr 23 '15 at 18:04

score 0 · Answer 3 · answered Apr 23 '15 at 17:41

0

The ajax method itself can accept functions in beforeSend and complete.

.ajax({
  // the rest of your parameters
  complete: function(data) {
    // do something
  }
});

If you do not want to specify these on a per-request basis, you can do so with the `.ajaxSetup' function which modifies the defaults.

.ajaxSetup({
  beforeSend: function() {
    // custom logic
  },
  complete: function() {
    // custom logic
  }
});

answered Apr 23 '15 at 17:41

Greg Pettit

10,749
5
53
72

I want to use it with chrome extension and check if any website is sending ajax request. – kannu Apr 23 '15 at 17:48
Seems to me that the chunk of code you are using to query the Google image API could be provided. Is it not in the the JavaScript world? – Greg Pettit Apr 23 '15 at 18:03

Run a function if a ajax get/post is fired

3 Answers3