Difference between 2 types of HTTP GET requests from inside browser

Question

If I open a browser and go to http://example.com/myapp, the browser will fetch an HTML file from the web server, parse the HTML, and then load it as the window.document.

But I could also do an AJAX query like the jQuery example below:

$.ajax({
    url: "http://example.com/myapp",
    success: onSuccess
});

Here, in this case, the browser executes an asynchronous request for the same HTML content, however it does not necessarily load that content into the window.document. The code then needs to explicitly make the HTML visible to the user.

My question is: what is the difference between these two types of HTTP GETs, both requesting the same file from the web server. Why does the former result with the users seeing a new web page, and the latter just fetches the HTML and gives the JavaScript developer the option to display it or not?

Answer 1

There's not much meaningful difference between the HTTP requests involved. What matters is what the browser does with the responses. That's simply the functionality of a web browser; it's just a piece of software and it can decide to do anything it wants to with the response to an HTTP request.

Note that the browser knows how the different HTTP transactions are initiated. It therefore simply keeps track of the difference internally in a way that's implicitly evident from the observable behavior. If some JavaScript code initiates an AJAX HTTP request, it can be confident that the response will be delivered to it via the state change event, and that the browser won't spontaneously decide to update the page.

The precise way that a browser internally manages a group of concurrent HTTP requests is pretty much an internal architectural detail.