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...