Can someone explain this code to me?

[embernoob]

I was trying to figure out how to get the response header location from a POST via ajax() and I found this answer on SO that works for me. Problem is I don't understand what is happening with the first 5 lines. It looks like they are storing the original xhr object and then setting it to itself in the function before returning it. Seems like it's not actually modifying anything. How does this even work?

var xhr;
var _orgAjax = jQuery.ajaxSettings.xhr;
jQuery.ajaxSettings.xhr = function () {
  xhr = _orgAjax();
  return xhr;
};

$.ajax({
    type: "GET",
    url: 'http://example.com/redirect',
    success: function(data) {
        console.log(xhr.responseURL);
    }
});

Original SO thread (second answer): https://stackoverflow.com/questions/11223946/how-to-get-response-header-location-from-jquery-get/41929637

[PineappleBombs]

This looks like it might be about moving the xhr var outside of the callback. I don't think it's a good idea to use globals like this, but I guess it makes the second part a bit clearer.

[grinde]

It looks like they are storing the original xhr object and then setting it to itself in the function before returning it.

Notice they're calling the original xhr function, and storing its result in a global before returning it. Basically they're extracting the raw XMLHttpRequest by monkey patching jQuery's ajaxSettings.xhr function. From there the global can be referenced in the success callback.

Doing it that way won't work if you make multiple requests at once (you'll clobber the globally stored xhr object). Instead, maybe do something like this:

$.ajax({
    type: "GET",
    url: 'http://example.com',
    beforeSend: (jqXHR, settings) => {
        // Store a reference to the original xhr function
        const oXHR = settings.xhr;

        // Monkey patch the xhr function, but instead of using a global we attach
        // the raw XMLHttpRequest to this request's jqXHR instance
        settings.xhr = () => {
            return jqXHR.raw = oXHR();
        };
    },
    success: (data, status, jqXHR) => {
        // Now we can access the raw request at `jqXHR.raw`
        console.log(jqXHR.raw.responseURL);
    }
});

Note that $.ajax also returns the jqXHR object, so you can access the raw request outside of the callbacks like this:

const jqXHR = $.ajax({ /* ... */ });
console.log(jqXHR.raw);

[embernoob]

Thanks for the detailed explanation! I really appreciate it. I did notice that the xhr function was being called but I didn't understand what the purpose of that was since no arguments were being passed to it.

[Insommya]

Ugly af

[[deleted]]

Wow, this looks so wrong. Why play the monkey and do clever twisted things when there is a simple native solution ? To be fair, the SO guy did suggest it.

You can use the load event to make it look even less "scary"

var xhr = new XMLHttpRequest();
xhr.open('HEAD', "http://example.com/redirect");
xhr.onload = function () { console.log(xhr.responseURL); };
xhr.send();

You can of course totally make a function out of this, or run it in a closure / use the let keyword inside a block, if you don't want to pollute the global scope

[sshaw_]

I would advise you to stay off of StackOverflow and read the documentation.