Detecting Ajax Events on the Server
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.
-
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:
-
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:
-
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:
-
<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):
-
<?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>Your Signup Is Successful! Thank you!</div>
-
<?php else: ?>
-
<div>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:
-
<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
-
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:
-
<?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 ){
-
} else {
-
}
-
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.
2. Right-Click then Copy
3. Paste the HTML code into your webpage
Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.
Nice Posts man doing a great Job…