Is it an AJAX Request or a Normal Request?

In modern web application development, many a times you would want to know if the incoming HTTP Request is an AJAX request or just a Normal request. Have you come across this requirement? I have, and the solution that I found turned out to be pretty straight-forward and I will be sharing it with you here.

Whenever an AJAX request is sent to the server, a special header named X-Requested-With with a value of XMLHttpRequest is attached to the request. So, a simple check to see whether the X-Requested-With header has a value of XMLHttpRequest solves the challenge. An example will give you more clarity. Take a look at the examples of isAjax() methods in two famous server-side programming languages – Java and PHP.


public static boolean isAjax(request) {
   return "XMLHttpRequest"


function isAjax() {
   return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) 
            ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'));

From the code above, it should be clear that if the method returns true, then you received an AJAX request. If the method returns false, you received a Normal HTTP Request.

Now you know how to find out if it is an AJAX request or not. But how is it useful? What do you do with it?

Have you heard of the term Unobtrusive javascript. Come on, It is a buzzword these days. There is a lot to writing Unobtrusive javascript code, but one of its features – Progressive Enhancement – stands out from the rest. Again, let me explain this with an example.

Let us assume that you have designed a beautiful looking web page with tabbed navigation. Being a hard-core AJAX fan and an efficiency aficionado you don’t like to bring back a full page with the headers and the footers and the sidebars when your user clicks on a Tab. Instead you would love to bring back only the content area for the tab via AJAX and innerHTML it into its respective place. Correct? The good programmer inside you has also told that you should not hard-code the URL for the AJAX call in your javascript. Instead, your tab should be designed as an anchor whose href attribute points to the URL for the content. So far so good? Now, when the user clicks on the Tab, you collect the URL from its href attribute and fire an AJAX call to the server. The server obediently accepts the request and sends back the content just for the active tab.

   <li><a href="/" rel="#tab1">Tab 1</a></li>
   <li><a href="/" rel="#tab2">Tab 2</a></li>
   <li><a href="/" rel="#tab3">Tab 3</a></li>

   <div id="tab1">Content for Tab1</div>
   <div id="tab2"> Content for Tab2 </div>
   <div id="tab3"> Content for Tab3 </div>

You would like to believe that all is well and good… Unfortuntately this is where the challenge of Progressive Enhancement begins. How do you plan to support browsers with JavaScript disabled. Yes, there are quite a few people who still do that for the fear of script related worms. How do you plan to support automated bots? Don’t you want the Google bots and the Yahoo bots to index all your pages with full content? Do you know what these users will see? They will see a half-baked page with just the active tab’s content and no styles – not even the header, footer or the sidebar. I am sure you don’t want this to happen. That is when the isAjax() method comes useful.

Whatever you did on the client side – HTML, CSS and javascript – is great and perfect. You separated the behavior from style and markup. So, you don’t have to touch it. You just need to do a small bit of work on the server-side.

In our case, when JavaScript is disabled, the browser will take over and execute its default behaviour of firing a Normal request to the URL specified in the href attribute. When JavaScript is enabled, JavaScript will take over and will fire an AJAX request to the same URL. In both cases the same server-side resource (like in Java or PHP) will receive the request. Now that you have decided to support Progressive Enhancement, you will have to check if the incoming request is an AJAX request or a Normal request using the isAjax() method shown earlier. In case of an AJAX request, you will send back only the content area of the tab thereby providing an efficient version of your application to JavaScript enabled users. In case of a Normal request, you will send back an entire page including the tab’s content, thereby providing a less efficient yet fully functional version of your application to JavaScript disabled users.

// Pseudo Code
if(isAjax(request) {
   return "Content area for the tab";
} else {
   return "Full page including tab content";

Now you can feel proud that you are not one of those who just talk about Unobtrusive JavaScript but you are one of those who have implemented it. I sincerely hope this article was useful. Feel free to drop in a comment with suggestions and/or feedback.

Update 1:

Based on the input provided by a buddy called Sabob from dzone, X-Requested-With is set only by AJAX libraries like jQuery, Mootools, Prototype etc. If you are coding AJAX by hand, then you will have to explicitly set this header while sending a request. More importantly you should somehow abstract it using good OO principles so that you don’t have to explicitly code this line every time you send an AJAX request.

Ganeshji Marwaha

I spend my days as the Director of Technology for Mobility practice and help my clients design enterprise and consumer mobile strategies. Mobile Payments, Digital Wallet and Tokenization technologies are my areas of specialization

  • Pingback: News Is it an AJAX Request or a Normal Request? | Ganesh | Web 2.0 Designer()

  • Ben

    From experience this proves slightly unreliable in some contexts

    It’s just easier to pass a query string parameter like so

    http:/domain/mypage?ajax=true or http:/domain/mypage?json=true

  • Ganeshji Marwaha

    @Ben: Can you kindly point out what contexts do you think this method proves unreliable. I am asking this because the solution you proposed, although fool-proof is not quite centralized. From my experience, I have never experienced any problems with this with any of the browsers.

  • Pingback: ancient monuments » AJAX Developer Resource Center()

  • Pingback: ancient monuments » AJAX Developer Resource Center()

  • very nice thank you very much

  • Here is something I was looking for my application Thanks 🙂

  • Normal request to the URL specified in the href attribute.

  • Really good one and helped me lot. Thanks

  • Good one…

  • I just discovered your website on yahoo and see that you’ve obtained some wonderful thoughts in this post. I particularly appreciate the way you’ve been capable to stick so really much believed small pellet mill into a relatively short submit (comparitively) which creates it an thoughtful post on your subject.

  • I have been searching for such types of post thanks for sharing this post

  • How did you make this template? I got a blog as well and my template looks kinda bad so people don’t stay on my blog very long :/.

  • Thanks for the post, Your last update of JS-Framework adding the header parameter is must because if we ignore it wont work in native ajax calls..

  • Hey, Really great work,I would like to join your blog anyway so please continue sharing with us,

  • I found your blog while searching online about this criteria, Now I found enough resources by your tips,

  • r4

    This really answered my problem, thank you!… I think happy should be shared for everyone. I adore your site very much.

  • what a helpful post this is. Thanks for posting such an informative article. Buy Aldara is a really very effective medice, but people should aslo buy darvocet n100 for pain relief.

  • Adhithya

    IE doesnt seem to set X_REQUESTED_WITH even when called using jQuery. Any ideas/solutions?