Qqwy
Qqwy

Reputation: 5649

Difference between AJAX request and a regular browser request

Is there a difference between an AJAX request and a direct browser request (in terms of how a web page is called and loaded)?

In other words, I mean: is a direct server-side request handled in any way differently than a client-side request (initiated by the browser)?

Upvotes: 55

Views: 38053

Answers (7)

Sora2455
Sora2455

Reputation: 844

An AJAX request in modern browsers will send this header with AJAX requests:

Sec-Fetch-Dest: empty

That means that:

The destination is the empty string. This is used for destinations that do not have their own value. For example fetch(), navigator.sendBeacon(), EventSource, XMLHttpRequest, WebSocket, etc.

Upvotes: 2

I always check if "text/html" is the request's "best" Accept mimetype, because browsers always send that as the first.

Firefox example:

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Of course, this may still be a ajax request with text/html as the Accept mimetype, but I found this to be reliable when you know what client will consume your backend api.

Upvotes: 1

slashCoder
slashCoder

Reputation: 1559

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.

Upvotes: 2

user578895
user578895

Reputation:

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.

Upvotes: 36

jfriend00
jfriend00

Reputation: 707856

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.

Upvotes: 45

Ruan Mendes
Ruan Mendes

Reputation: 92314

Not really. Except that most Ajax clients send a X-Requested-With=XMLHttpRequest HTTP header

Upvotes: 1

Mr. BeatMasta
Mr. BeatMasta

Reputation: 1312

your user-agent, aka browser, sends an XHR header which you can catch from php like this:

$_SERVER['HTTP_X_REQUESTED_WITH']

Upvotes: -2

Related Questions