jquery ajax + php 操作之为Ajax请求提供不同的内容_H5之家

jQuery教程(20)-jquery ajax + php 操作之为Ajax请求提供不同的内容

文章标签： jquery,jquery-ajax

2015-1-15 22:11:07 14 人阅读

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

<?php $ajax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'; if (!$ajax): //不是Ajax请求，输出及开始的<boby>标签 ?> <!DOCTYPE HTML> <html lang="en"> <head>  </head> <body>  <?php    endif; //对Ajax及非Ajax显示相同内容 if (!$ajax): //关闭针对非Ajax请求的<div>、<boby>和<html>标签 ?> </body> </html> <?php endif; ?>
          现在，我们就有了一个真正渐进增强的例子。没有JavaScript的用户也可以看到可用的表单及有样式的结果，而那些能使用JavaScript的用户则可以得到更好的体验。
          这种在服务器端提供不同内容的技术甚至支持区别更大的情况。例如，可以对Ajax请求返回 JSON数据，而对其他请求返回HTML:
<?php $ajax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'; //设置$entries数组 if ($ajax) { header('Content-type: application/json'); echo json_encode($entries); } else { //输出完整的HTML文档 }这样传输的数据就少多了，但在客户端必须构建HTML，就像在代码清单6-9中所做的那样。

原文地址：
该文章由萌萌的IT人整理发布,转载须标明出处。