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 to users without JavaScript, however, we can conditionally load a complete document with <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
, then we only deliver the fragment; otherwise, we deliver the full document. A basic implementation in PHP might look like the following code snippet:
<?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...
