Detecting Ajax Events on the Server

Mar 06 2010

read 14 comments

When working with an Ajax-enhanced website, it's generally a good idea to provide a regular request fallback for any core functionality of the site. When you work to ensure that a fallback is in place, you will be faced with determining when a particular request is an Ajax request or just a normal page request. In most situations, it's considered a best practice to build your site without Ajax first, adding the Ajax functionality afterward so the fallbacks are in place from the beginning.

Fortunately, jQuery makes it super easy to differentiate the Ajax requests from normal page views.

X-Requested-With Header

If you were to browse the jQuery source, you would see that jQuery adds a special HTTP header to (almost) every Ajax request it makes with $.ajax(), $.get(), $.getJSON(), $.post() and .load() methods.

PLAIN TEXT

JavaScript:

if ( !remote ) {
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
}

Keep in mind, though, that the header is not sent with $.getScript() or any JSONP request made with $.ajax() or $.getJSON(), since they aren't technically Ajax requests.

Detection on the Server

By checking for this header, you can easily determine on the server if the request was initiated by jQuery. Each server-side language and web server combination will give you different ways of accessing this header, but let's look at a few.

In PHP, you can use this function to determine the type of request:

PLAIN TEXT

PHP:

function is_xhr() {
  return @ $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] === 'XMLHttpRequest';
}
 
if( is_xhr() ){
  // respond to Ajax request
} else {
  // respond to normal request
}

Sinatra and Ruby on Rails have special shortcuts already built in:

PLAIN TEXT

RUBY:

if request.xhr?
  # respond to Ajax request
else
  # respond to normal request
end

Since other libraries outside of jQuery also set the X-Requested-With header, many server languages have special support for reading it. Check the documentation for your favorite server language to see if it has any convenience methods for detecting an Ajax request.

A Small Example

Ok, let's apply this knowledge to add Ajax to a simple email signup form. Here is our existing HTML:

PLAIN TEXT

HTML:

<form id="email_form" action="email.php" method="POST">
  <p>
    <label for="email">Email Address: </label><br />
 
    <input type="text" name="email" id="email" value="" />
  </p>
  <p>
    <input type="submit" value="Subscribe" />
  </p>
</form>

And here is the existing email.php (Note: on a normal error you might redirect back to show a message, or render the form again. This is for example only):

PLAIN TEXT

PHP:

<?php
   $email = trim( @$_POST['email'] );
 
   // Call our special email subscribe function
   $success  = subscribe( $email );
?>
<!DOCTYPE html>
<html>
  <head>
 
     <title>Email Signup</title>
     <style type="text/css">
        .success { color: green }
        .error   { color: red }
     </style>
  </head>
  <body>
 
    <?php if( $success ): ?>
      <div class="success">Your Signup Is Successful! Thank you!</div>
    <?php else: ?>
      <div class="error">Something went wrong. 
            Please click your browser's back button and try again.</div>
    <?php endif; ?>
 
  </body>
</html>

The previous two pages work together to provide a simple signup functionality, without JS or Ajax involvement.

Now let's add the Ajax. We’ll add the following to the form page:

PLAIN TEXT

JavaScript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
<script type="text/javascript" charset="utf-8">
  jQuery(document).ready(function($) {
    
    $("#email_form")
        .after("<div id='notice'></div>")
        .submit(function(e){
      // Cancel the normal submission of the form
      e.preventDefault();
 
      var email = $("#email").val();
 
      // perform validation; not shown
 
      // Make our request and expect JSON in return
      $.post( 'email.php', { email: email }, function(data){
        if( data.success ){
          $("#notice").html("<div id='success'>Your Signup Is Successful! Thank you!</div>");
        } else {
          $("#notice").html("<div id='error'>There was an error. Please make sure your email is valid and try again.</div>");
        }
      }, 'json');
    });
  });
</script>

Finally, we replace the initial PHP code block in our email.php file to take advantage of the Ajax submission:

PLAIN TEXT

PHP:

<?php
  function is_xhr() {
    return @ $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] === 'XMLHttpRequest';
  }
 
  $email = trim( $_POST['email'] );
 
  // Call our special email subscribe function
  $success  = subscribe( $email );
 
  if( is_xhr() ){
    // Not explicitly needed, but we like being accurate, right?:
    header('Content-type: application/json');
    if( $success ){
      echo json_encode( array( 'success' => true ) );
    }  else {
      echo json_encode( array( 'error' => true ) );
    }
    exit(); // We don't need to render anything else
  }
 
  // ... the rest of our original PHP page

Conclusion

That's it! A few lines of code, and your server side code can now render different content depending on how the request was generated. Now that you know how to detect jQuery Ajax events, you no longer need to resort to passing ajax: true as data on your requests or calling a separate file altogether.

Scripts Used on This Site

comment feed

14 comments

Aaron Mc Adam

March 7, 2010 at 12:32 am

Hey, thanks for this! I've been passing "{ ajax : true }" whilst developing my project app. This will save me a bit of hassle :)

Reply
- Julia
  
  February 1, 2012 at 1:49 pm
  
  If you’re ardealy sold on the idea of promises, you might consider using this library I ported from Tyler Close’s Waterken project in conjunction with the Google Caja team. It’s a very well-designed promise API that’s getting some traction in the CommonJS community. I also understand there might ardealy be efforts within Mozilla to build the Node API within Spidermonkey instead of V8. There’s also GPSEE, a CommonJS implementation, which Wes Garland mentioned he was getting to work with the Node API’s as well.
  
  Reply
Jon

March 10, 2010 at 7:14 am

Likewise, I've also been passing a boolean. I'll change that now!

Reply
Doug Neiner

March 10, 2010 at 6:48 pm

Well @Jon and @Aaron I am glad the article helped you out! Its the little things like this that go a long way in keeping code clean and readable.

Reply
Mark Kumar

March 11, 2010 at 4:27 pm

Thank you soo much for sharing this. I'm new to jQuery and Ajax. So, I have been looking to something like this tutorial and your is very informative and to the point. Thanks for sharing. I will definitely use this on my site: http://www.kumarphotography.com.

Mark Kumar

Reply
denisdeng

March 16, 2010 at 11:15 am

I have make an exzample:http://www.denisdeng.com/exzample/ajax-detect/email.html.

Reply
bernard

March 25, 2010 at 3:35 pm

I do not really like how the PHP and JS duplicate themselves creating success or failure html messages. Say, you need to update the message, or the markup. You need to do that twice. I understand you want to keep the examples simple, but I'm missing here a note, that this is not the best approach (pointing people who want to learn eg. to Resig's templating). After all, this blog is about learning good practices :)

Reply
Mauro De Giorgi

April 9, 2010 at 11:59 am
Django has a similar feature: is_ajax(), that is a method of HttpRequest.
For example in a view:
```
def my_view(request):
   if request.is_ajax():
      # respond to Ajax request
   else:
      # respond to normal request
```
Great article!

Reply
AskApache

April 19, 2010 at 12:24 am

This is great, thanks for posting such a nice article. Actually, it looks like the whole site is filled with jquery gold.. awesome!

Reply
Paul Thrasher

April 23, 2010 at 6:45 pm
Using @ to suppress errors is slow and probably the wrong thing to use in this context. Might wanna use isset() instead:
```
function is_xhr() {
  return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';
}
```
Reply
- fritzthecat
  
  August 26, 2010 at 8:56 am
  
  Well typed, I was just about to write the same thing!
  
  On a similar note,
  $email = trim( $_POST['email'] );
  could be changed to
  $email = isset( $_POST['email'] )? trim( $_POST['email'] ): '';
  
  Reply
es

May 20, 2010 at 11:54 am

The jQuery form plugin doesn't send XMLHttpRequest header when an upload is posted because of using an iframe for file upload.

Reply
Gabriel Hernandez

July 1, 2010 at 11:24 am

Hi there,
Thanks a lot for your post. I've noticed a problem and perhaps you know the solution??? IE7 is not setting the variable $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] so when I look for that variable in PHP, in IE7 it cannot be found!!. The XHR request status is set to 200 -success-, but the variable 'HTTP_X_REQUESTED_WITH' has not been set!. this is only when using IE 7.

Any help is appreciated!.

Reply

AHHP

May 13, 2012 at 10:40 am

I prefer this:


$isXHR = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && 
    strtolower($_SERVER['HTTP_X_REQUESTED_WITH'])==='xmlhttprequest';

4 Pings

服务器端判断jQuery的Ajax请求 - 美拓blog

March 7, 2010 at 9:44 am

[...] 仅仅几行代码，搞定了。原文链接 Detecting Ajax Events on the Server [...]
Detecting Ajax Events on the Server - Eureka Seven

March 24, 2010 at 4:38 am

[...] via highlight_lines Tags: Ajax, JavaScript, jQuery, Memo Comments RSS feed [...]
jQuery « Strictly Tech Talk

April 5, 2011 at 4:27 am

[...] im very impressed, especially when people talk about how easy XMLHTTPREQUEST processing and shortcuts can be, and how easy it is to apply across [...]
How To Build A Real-Time Commenting System

March 2, 2013 at 9:16 am

[...] AJAX request and maintain our basic functionality if it isn’t (for more information on this see Detected AJAX events on the Server). We also define two handlers; postSuccess for handling the comment being successfully stored and [...]

Learning jQuery