Detect AJAX Requests using the x-requested-with header and xmlhttprequest

This is a small snippet of code I came across today, it allows a script to display different content based on how it was requested. This method allows your scripts to remain in a single file, handing both AJAX and normal requests – it avoids ending up with lots of small PHP files in your AJAX folder, that deals with ajax requests.Another use would be a page that has 2 web forms, one AJAX and one normal. You could keep the code for this page in a single file. This method is also useful for security purposes, as it would ensure that requests to your AJAX scripts are via AJAX only. It also has uses for writing unobtrusive JavaScript – maybe ensuring that an AJAX enabled web form would work when javascript is disbaled.

For example, the below code would display different code depending on if the request for the page was made via AJAX or directly via a browser.

if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //This is an AJAX request, do AJAX specific stuff
}
else {
    //This is not an AJAX request E.g. display normal page content.
}

In some code I was working on today, I saw a neater way of achieving the above, this would be included in your common config file:

define('IS_AJAX_REQUEST', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');

if(IS_AJAX_REQUEST) {
    //This is an AJAX request, do AJAX specific stuff
}
else {
    //This is not an AJAX request E.g. display normal page content.
}

There’s an HTTP variable set called HTTP_X_REQUESTED_WITH, which will is set to ‘XMLHttpRequest‘ if the request method is via AJAX. This is method is untested with JavaScript frameworks other than JQuery, so may not work (but I don’t see any reason at all why it wouldn’t!).

It’s also worth noting that not all web servers include this variable and sometimes omit this specific $_SERVER paramter. Use vardump($_SERVER) to check that the HTTP_X_REQUESTED_WITH is present.

15 thoughts on “Detect AJAX Requests using the x-requested-with header and xmlhttprequest

  1. Karupa

    I struggling to see real of use of this.

    I think it better practice using if ($_POST) {} instead.

    You article makes this increased complicated for me.

    Reply
  2. Rob Post author

    The article above edescribes how to detect requests coming from an AJAX action directly. I could submit a form using POST or via AJAX. The header I suggest allows you to isolate each type of request seperately.

    Reply
  3. Jay Gilford

    Nice website and a cool trick :)
    One thing I did notice is you have an apostrophe in this line
    if(‘IS_AJAX_REQUEST) {
    which shouldn’t be there

    Regards

    Jay

    Reply
  4. Stephen

    I was injecting a hidden POST value to identify AJAX requests, but this is much better. I noticed the X-Requested-With header while using Firebug today.

    Dear readers: I highly recommend using that second snippet to simplify your “dual-mode” scripts. Place the define line in your “bootstrap” file or in some other include that runs during every request. Then use the “if” block to switch between “rendering” modes. (JSON vs HTML)

    If your readers need help finding a real-world use for this, send them to http://sholsinger.com/archive/2009/08/gracefully-degrading-ajax-php-jquery/ where I have written about using this type of method for a simple–gracefully degrading–newsletter sign-up form.

    Reply
  5. kn33ch41

    @Rob

    The second condition takes care of that. If the variable passed to strtolower() is empty it certainly will not equal xmlhttprequest, which means the whole statement will return false. I know you’re doing it that way to avoid throwing a notice, but this would then be a good time to use the @-operator.

    strtolower(@$_SERVER[‘HTTP_X_REQUESTED_WITH’]) == ‘xmlhttprequest’

    Reply
  6. Endeavor

    I made a beautiful AJAX and Jquery script. Tested on chrome, firefox, opera and everythings fine.

    But when I open it on IE9, my heart have stopped! I tried a lot of html request and nothing…
    Fortunately, I found your post. Very useful!

    Now my script is fine and working on every browser :]

    Reply
  7. Pingback: A First Look at the HTML5 History API | DigitalMofo

  8. Pingback: A First Look at the HTML5 History API | Tutorial WPAP

  9. Pingback: A First Look at the HTML5 History API | Find Follow Tweet Design Companies

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>