Starting ajax calls observer and listen for specific url to get url parameters

Question

I have a button injected in another website and on click, it is triggering an ajax get request with url, with some included url parameters. Let's say like this:

GET https://example.com/search/test=1&hello=world&session=123

$('#myBtn').click(function() {
    // Here

    funcForTriggeringAjax()
});

Is there a way to add an call observer on // Here to start observing only a specific url (something like https://example.com/search/*) and as soon as I get the result, it stops observing?

So that in the end, I can access to the parameter values.

Totally imaginary scenario:

$('#myBtn').click(function() {
    startAjaxObserver()

    funcForTriggeringAjax()
});

startAjaxObserver() {
   observingStarted(x, result) {
       var url = "https://example.com/search/*";
       if (x.url == url) {
           console.log(result['session'])
           stopObservingAjax()
       }
   }
}

I tried the below answer, but no luck:

$(document).ready(function() {
   $('#myBtn').click(function() {
      $(document).ajaxSuccess(responseHandler());
   });
})

function responseHandler() {
  console.log("X") // comes here
  return function(event, xhr, settings) {
      console.log('Y') // doesn't come here

      if (settings.url == 'desired-url' && active) {
          // do your thing
          active = false;
      }
  }
}

Lucky Soni · Answer 1 · 2017-07-22T14:54:14.557

1

Intercept the call

jQuery

function responseHandler() {
  var active = true;  
  return function(event, xhr, settings) {
      if (settings.url == 'desired-url' && active) {
          // do your thing
          active = false;
      }
  }
}
$(document).ajaxSuccess(responseHandler());

Custom Implementation

function ajax(url, method, data) {
    makeRequest(url, method, data, function(err, res) {
        afterAjax(url, res);
    });
}

function makeRequest(url, method, data, callback) {
    // your implementation of executing the request
    // assuming your implementation returns either error or response
    if(error) {
       callback(error);
    } else {
       callback(null, response); // send the response back
    }
}

var afterAjaxStack = {};

afterAjaxStack.urlCheck = function(url, res) {
    if (url === 'desired-url') {
        // do your stuff
        delete afterAjaxStack.urlCheck;
    }
}
// put more functions on the stack if you want

afterAjax(url, res) {
    for (var property in afterAjaxStack) {
        if (afterAjaxStack.hasOwnProperty(property)) {
            afterAjaxStack[property](url, res);
        }
    }
}

edited Jul 22 '17 at 14:54

answered Jul 22 '17 at 13:22

Lucky Soni

6,811
3
38
57

This doesn't work for me. I added my code in the question. Maybe because the website is not making ajax request in with jquery – senty Jul 22 '17 at 14:32
I have added an example of doing it with plain javascript, hope it helps. – Lucky Soni Jul 22 '17 at 14:54
I think you got me wrong. I am not making the ajax myself, i am only triggering the web page to do the ajax with a button which I created. And I am trying to observe the web pages requests, not the ones that I am making. Or am I wrong? – senty Jul 22 '17 at 14:59
you should mention all details in the question. You did not mention what you using to make the ajax call. – Lucky Soni Jul 22 '17 at 15:00
I said "I am injecting a script in another website" and trying to observe that :/ – senty Jul 22 '17 at 15:01
this should help https://stackoverflow.com/questions/10783463/javascript-detect-ajax-requests https://stackoverflow.com/questions/5202296/add-a-hook-to-all-ajax-requests-on-a-page https://stackoverflow.com/questions/25335648/how-to-intercept-all-ajax-requests-made-by-different-js-libraries – Lucky Soni Jul 22 '17 at 15:04

Starting ajax calls observer and listen for specific url to get url parameters

1 Answers1