2

So I have used the below function to detect an ajax call.

var oldXHR = window.XMLHttpRequest;

function newXHR() {
    var realXHR = new oldXHR();
    realXHR.addEventListener("readystatechange", function() {
        if(realXHR.readyState==1){
            alert('server connection established');
        }
        if(realXHR.readyState==2){
            alert('request received');
        }
        if(realXHR.readyState==3){
            alert('processing request');
        }
        if(realXHR.readyState==4){
            alert('request finished and response is ready');
        }
    }, false);
    return realXHR;
}
window.XMLHttpRequest = newXHR;

It is working but now I need the url of that particular ajax request. I have functions like below:- 

function loadFundSimulation(num_days = ''){
    var url = "<?php echo site_url('investment_plan/simulation/FUND'); ?>";

        $.post(url, data).done(function (response,status,xhr) {
             #....code....#
        }).fail(function (data) {
            #....code....#
        });
}

When the ajax is being called at that time I want url of this functions. I have many functions like this. When I get the url I want to append ?debug = 1 at the end of the url. I have tried alert(this.url); but it was returning undefined. Any help will appreciated. Thanks in advance.

Edit

var open = XMLHttpRequest.prototype.open;

XMLHttpRequest.prototype.open = function(method, uri, async, user, pass) {
    this.addEventListener("readystatechange", function(event) {  
    if(this.readyState == 4){
       var self = this;
       var response = {
         method: method,
         uri: uri,
         responseText: self.responseText
      };
      response.uri = uri + '?debug=1';
      console.log(response);  
    } else {
        console.log(this.readyState);
    }
    }, false);
  open.call(this, method, uri, async, user, pass);
};

I have got the url of that ajax request and I appended ?debug=1 as well. When I console.log(response); I see the url is being changed but I still don't see any error. Please let me know I have to do anything else for that.

Alek Stephanok
  • 193
  • 2
  • 17
  • The URL is already defined inside `loadFundSimulation` in the variable `url`. So you already have it. Try `console.log(url);` inside `loadFundSimulation` and it should log it to your browser console. – Andy Feb 04 '19 at 09:19
  • @Andy yeah I know that but there is many functions exist in my website I actually want the url of those functions which are being called and then I will append ?debug=1 at the end of it. – Alek Stephanok Feb 04 '19 at 09:21
  • @Andy I believe the requirement is to get the url in `realXHR.addEventListener`, not `var url = ".."; alert(url)` – freedomn-m Feb 04 '19 at 09:24
  • @Andy you are right the the requirement is to get the url in realXHR.addEventListener. I did console.log(url); inside realXHR.addEventListener but it is showing url is not defined in the console. – Alek Stephanok Feb 04 '19 at 09:25
  • 1
    Doesn't seem to give you your exact answer, but worth a read: https://stackoverflow.com/questions/4674021/xhr-get-request-url-in-onreadystatechange – freedomn-m Feb 04 '19 at 09:27
  • 1
    Also: https://stackoverflow.com/questions/921198/get-request-url-from-xhr-object – freedomn-m Feb 04 '19 at 09:27
  • 2
    What are you trying to achieve? You might want a [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) object – Pinke Helga Feb 04 '19 at 09:28
  • @Quasimodo'sclone I want the request url when ajax is being called. I'm able to detect it but can't get the url and then I will append **?debug=1** at the end of the url. – Alek Stephanok Feb 04 '19 at 09:33
  • 1
    You could simply overwrite the `XMLHttpRequest.prototype.open` method. Or, as mentioned, write a Proxy for more complex tasks. – Pinke Helga Feb 04 '19 at 09:40
  • @Quasimodo'sclone I have added some code please check and let me know. – Alek Stephanok Feb 04 '19 at 09:58
  • If URL has successfully changed, you got what you have asked. What an error do you expect? The server gets the altered request not. Its up to you writing the implementation on server-side. – Pinke Helga Feb 04 '19 at 10:18
  • @Quasimodo'sclone It's working thank you for your help. I got what I want. – Alek Stephanok Feb 04 '19 at 10:27

1 Answers1

0

After searching a lot this is the best way to do this. Though only tested on chrome. 

(function() {
        var proxied = window.XMLHttpRequest.prototype.open;
        window.XMLHttpRequest.prototype.open = function() {
            arguments[1] = arguments[1] + '&debug=1';
            console.log( arguments[1] );
            return proxied.apply(this, [].slice.call(arguments));
        };
    })();
Alek Stephanok
  • 193
  • 2
  • 17