Javascript 使用AJAX加载网页

有没有可能用AJAX加载完整的网页？我该怎么做

我想我可以像平常一样创建单独的页面，然后以某种方式使用AJAX来获取该页面，并将其呈现在用户当前所在的位置。这是正确的假设吗

基本上，我的目标是创建一个更具动态性的站点，因此当用户单击某个选项时，它将向下滚动并显示所请求的信息，而不会出现明显的页面重定向

任何建议都很好

---

谢谢

一种可能的方法是获取HTML，然后将其写入div中。load（url）方法将HTML直接加载到元素中。因此，如果您将顶级元素上的每个标记都更改为.load（），则可以这样做。这有点像使用帧，但目标是DIV而不是帧

当然，它会破坏很多东西，比如后退按钮、表单处理等，除非你投入大量的工作

---

因此，就像医生在被告知“我这样做会很痛”时回答“那么就不要那样做”，答案可能是“不要那样做”。

是的，这是可能的。您可以从纯JavaScript创建一个页面/站点，从web服务或类似处理程序获取所有元素。然而，维护它是一场噩梦，根据您的需要，您会遇到各种各样的问题。我这样做是为了练习学习jQuery、AJAX和其他一些东西。我发现提交表格变得很棘手。当数据通过AJAX发布到web服务时，页面状态的管理变得非常复杂，而且随着网站需求的增长，它只会变得可怕

我还发现，为了实现这一点，您必须选择在转换期间刷新整个界面，或者只刷新正在更改的部分。刷新整个界面很麻烦，对于“快速”用户来说，AJAX可能无法跟上。它还会导致web服务请求发生冲突。如果您的页面有4个单独的部分被更新，那么Web服务请求在中间被“丢失”就不常见了。

---

所以你的问题的答案是“是”。仔细阅读您的问题，我会将您的请求范围保留为单个显示页面，而不提供太多功能。保存得越简单，维护和使用就越容易。

我知道这是一篇老文章，但这是一个很好的小脚本，可以完成这项工作。它可以将ajax内容加载添加到现有的非ajax站点。需要jQuery

剧本

//您的导航栏，可以是“文档”或正文
变量$navigation=$（“.side”）；
//将被替换的主要内容
var body=“.page”；
变量$body=$（body）；
$navigation.delegate（“a”，“click”，function（））{
window.location.hash=$（this.attr（“href”）；
返回false；
});
$（窗口）.bind（'hashchange'，function（）{
var newHash=window.location.hash.substring（1）；
if（newHash）{
$body.fadeOut（200，函数（）{
$body.hide（）.load（newHash+“”+body，function（））{
$body.fadeIn（200，函数（）{
});
});
});
};
});
$（window.trigger（'hashchange'）；

细节 $navigation下的所有链接都将添加一个click事件，该事件将更新窗口url哈希。窗口正在侦听哈希更改，并将使用哈希值发出AJAX请求以重新加载$body html

优势

• 历史记录（向后和向前）导航将起作用：
• 同一个站点将与支持JavaScript的浏览器和不支持JavaScript的浏览器协同工作
• 如果复制超过url，脚本将加载正确的页面
• 因为我们使用的是委托函数，所以通过ajax加载结果添加的任何链接也会添加click事件

缺点

• 您不能再在站点上使用锚

---

有关更多信息和示例，请参见：

可能但不可取-无论如何，如果重写整个页面，您将无法利用任何真正的好处。不过，您的用例听起来似乎不需要这样做，只需修改页面的一个小节，即AJAX的SOP。我可能也会这样做。请提供进一步的解释，或者为我这样的N00B提供一个示例。是的，可用性问题是我试图记住的事情之一。很好，你指出了后退按钮。根据你的目标受众，还需要记住其他问题：没有启用JavaScript的用户，以及（作为第一批的子集）没有使用JavaScript的搜索引擎爬虫。为这篇文章干杯，这看起来很有趣。

<script type="text/javascript">
//Your navigation bar, can be "document" or body
var $navigation = $(".side");

//Your main content that will be replaces
var body = ".page";
var $body = $(body);

$navigation.delegate("a", "click", function() {
    window.location.hash = $(this).attr("href");
    return false;
});

$(window).bind('hashchange', function() {
    var newHash = window.location.hash.substring(1);
    if(newHash) {
        $body.fadeOut(200, function() {
            $body.hide().load(newHash + " " + body, function() {
                $body.fadeIn(200, function() {
                });
            });
        });
    };
});

$(window).trigger('hashchange');
</script>