Delivering different content for Ajax requests
When returning HTML data, we have shown how the document fragments appear unstyled if we actually let the browser go to the page rather than use JavaScript. To provide a better experience than this to users without JavaScript, we can conditionally load a complete document with the <html>, <head>, and <body> elements and all that they contain. To do so, we can take advantage of a request header that jQuery sends along with every Ajax request. In our server-side code (PHP in this case), we just need to look for the X-Requested-With header. If it is set and has a value of XMLHttpRequest, we only deliver the fragment; otherwise, we deliver the full document. A basic implementation in PHP might look like this:
<?php
$ajax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
$_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';
if (!$ajax):
// Show <head> and start of <body> for non-Ajax
?>
<!DOCTYPE...
