6.4　为 Ajax 请求提供不同的内容

在返回HTML数据的情况下，我们知道如果只让浏览器自己打开页面而不使用JavaScript，那么没有样式的文档片段会很难看。为了给没有JavaScript用户提供比这里更好的体验，可以有条件的加载包含<html>、<head>和<body>以及其他所有内容的完整的页面。为些，就要利用jQuery 随同 Ajax 请求一起发送的请求头部。在服务器端代码（这里是 PHP ）中，我们需要检查 X-Requested- With头部。如果存在这个头部而且它的值为XMLHttpRequest，那么就会只发送文档片段；否则，就发送完整的文档。下面是这个想法的基本实现。

  1. <?php
  2. $ajax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
  3.     $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';
  5. if (!$ajax):
  6. //不是Ajax请求，输出<head>及开始的<boby>标签
  7. ?>
  8.   <!DOCTYPE HTML>
  9.   <html lang="en">
  10.   <head>
  11.     <!-- title, meta, link elements -->
  12.   </head>
  13.   <body>
  14.   <!-- page heading, form, etc. -->
  15. <?php
  17. endif;
  18. //对Ajax及非Ajax显示相同内容
  21. if (!$ajax):
  22. //关闭针对非Ajax请求的<div>、<boby>和<html>标签
  23. ?>
  25. </body>
  26. </html>
  28. <?php endif; ?>

现在，我们就有了一个真正渐进增强的例子。没有JavaScript的用户也可以看到可用的表单及有样式的结果，而那些能使用JavaScript的用户则可以得到更好的体验。

这种在服务器端提供不同内容的技术甚至支持区别更大的情况。例如，可以对Ajax请求返回JSON数据，而对其他请求返回HTML：

  1. <?php
  2. $ajax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
  3. $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';
  5. //设置$entries数组
  7. if ($ajax) {
  8.   header('Content-type: application/json');
  9.   echo json_encode($entries);
  10. }
  11. else {
  12.   //输出完整的HTML文档
  13. }

这样传输的数据就少多了，但在客户端必须构建HTML，就像在代码清单6-9中所做的那样。