为 Ajax 请求提供不同的内容

2019-02-13 09:58:21

在使用JavaScript返回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请求，输出<head>及开始的<boby>标签
?>
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- title, meta, link elements -->
</head>
<body>
<!-- page heading, form, etc. -->
<?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($data);
}
else {
    //输出完整的HTML文档
}
?>

这样使用JavaScript的用户需要传输的数据也少了，只须用JavaScript构建HTML就可以了。