Javascript $（）.load（）而不是加载整个页面，但需要在所有页面上保留菜单

我想用jQuery/AJAX

$（）.load（）函数重新加载我网站的内容区域。但我的问题是，无论您的输入URL如何，都需要在所有页面上显示
页眉
和
页脚

我的网站是使用模板构建的，所以我的第一个想法是删除唯一内容上方和下方的布局输出，因为我会阻止ie.菜单显示两次。但我意识到，如果用户不是通过第一个页面（比如index.php）进入我的站点，他将永远不会看到页眉或页脚，而只是一个未设置样式的文本页面

我的问题是，你将如何解决这个问题？允许使用JavaScript（+jQuery）和HTML5。
page.php:

<div id="header"></di>
<div id="mainContent"></div>
<div id="footer"></div>

或：

有关更多信息，请参阅jQuery文档中的一节，该节介绍了您正在寻找的技术称为Hijax，在Hijax中，您截取来自AJAX请求的响应，并仅提取要在呈现页面上替换的DOM部分

一般的想法是，实际的URL本身仍然会返回完整的页面内容，因此如果请求来自新访问者，整个DOM将被加载，但是如果请求来自用户单击页面上指定了CSS选择器的hijaxed链接，然后仅替换由选择器标识的页面部分

看一看。实际的站点本身是使用插件构建的，如果您查看网络选项卡并查看Chrome或Firebug工具中的inspector，您可以看到内容已被替换，而无需替换菜单、标题或其他未被替换的元素。
看起来您可以有两个不同的选项。如果用户正在访问您的站点，但没有进入第一个页面，那么您可以检查页面加载后是否显示页眉和页脚。如果未找到，则应创建初始站点布局。您甚至可以决定以这种方式构建第一个页面（index.php），以便以相同的方式处理每个页面

$(document).ready(function() {
    // If an element of id "header" isn't found in the DOM
    if (!$("#header").length() > 0) {
        // Generate the header and insert it as the first element of the DOM
    }
    if (!$("#footer").length() > 0) {
        // Generate the footer and append it to the last element of the DOM
    }
});

毫无疑问，您也可以考虑其他解决方案；您可能在每个页面上都有一个include，只有通过GET而不是AJAX请求请求页面时，该页面才会被包含。
您的后端使用什么语言？PHP？冷饮？AJAX加载的美妙之处在于，无论一个人登录到哪个页面，他们都会在AJAX调用之前得到您放在那里的内容，因此您的页眉、页脚、菜单等都已经在那里了。如下所述，您可以将AJAX响应加载到页面上的任何一个容器中。如果您使用AJAX在有人单击菜单时导入内容，那么您只需用AJAX响应中的新内容替换容器中的html即可；如果您找到了正确的答案，您应该选择适合您的解决方案的答案。否则，请更新您的问题，如果有任何更改，我会这样做，对不起。我没有时间进一步研究答案，我试图使用jmort253，但出现了一些错误（我将对此发表评论）。不幸的是，我的工作过滤掉了与服务器的连接，因此我在这里时没有机会做任何事情。在这里使用
$.load（）
更干净、更合理-正如mgraph在回答中所暗示的，只能加载页面的一部分。同意，这就是为什么我编辑了他的答案，添加了一个到
load
文档的链接，并进行了投票。对于web应用程序，这是100%的方法。然而，Hijax技术的优点是后退按钮仍然有效。如果你正在构建一个网站，我怀疑你可能仍然希望“后退”按钮正常工作，这样行为就不会丢失。我尝试了这种方法，但鉴于所有页面都包含所有3个div，似乎要加载两次#mainContent。我想我需要抓取#mainContent的内容，但不确定如何才能做到。谢谢，它似乎在工作，但一些Java脚本没有得到正确加载。稍后我将不得不看一看这个问题。我接受了您的解决方案，因为它以最简单的方式工作，但是在加载时将脚本加载到div中时，我遇到了很大的麻烦。
$.get('page.php', function (data) {
    data = $(data).find('#mainContent').html();
    $("#content").empty().append(data);
});

$(document).ready(function() {
    // If an element of id "header" isn't found in the DOM
    if (!$("#header").length() > 0) {
        // Generate the header and insert it as the first element of the DOM
    }
    if (!$("#footer").length() > 0) {
        // Generate the footer and append it to the last element of the DOM
    }
});