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