Difference between AJAX request and a regular browser request

Solution 1:

There may be some header differences, but the main behavior difference is on the client.

When the browser makes a regular request as in window.location.href = "index.html", it clears the current window and loads the server response into the window.

With an ajax request, the current window/document is unaffected and javascript code can examine the results of the request and do what it wants to with those results (insert HTML dynamically into the page, parse JSON and use it the page logic, parse XML, etc...).

The server doesn't do anything different - it's just in how the client treats the response from the two requests.

Solution 2:

An AJAX request is identical to a "normal" browser request as far as the server is concerned other than potentially slightly different HTTP headers. e.g. chrome sends:

X-Requested-With:XMLHttpRequest

I'm not sure if that header is standardized or not, or if it's different in every browser or even included at all in every browser.

edit: I take that back, that header is sent by jQuery (and likely other JS libraries), not the browser as is evidenced by:

var xhr = new XMLHttpRequest();
xhr.open('GET', '/');
xhr.send();

which sends:

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Cookie: ....
Host:stackoverflow.com
If-Modified-Since:Sat, 31 Dec 2011 01:57:24 GMT
Referer:http://stackoverflow.com/questions/8685750/how-does-an-ajax-request-differ-from-a-normal-browser-request/8685758
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.12 Safari/535.11

which leads me to the conclusion that by default there is absolutely no difference.

Solution 3:

Some popular client-side libraries like jQuery include the X-Requested-With header in their requests and set it to XMLHttpRequest to mark them as AJAX.

This seems to have been considered standard enough a few years ago (probably due to the huge popularity of jQuery and its presence in almost every website) that many server-side frameworks even have helpers that take care of checking for this header in the received request for you:

ASP.NET MVC 5:

HttpRequestBase.IsAjaxRequest()

Django:

HttpRequest.is_ajax()

Flask:

flask.Request.is_xhr

However, it seems that with the end of jQuery's reign in the front end world and the standardization of the fetch API and the rise of other modern client-side libraries that don't add any header for this purpose by default, the pattern has fallen into obsolescence also in the backend; with ASP.NET MVC not including the helper in newer versions and Flask marking it as deprecated.