使用AJAX加载网页

时间:2011-01-28 11:33:45

标签: javascript jquery ajax

是否可以使用AJAX加载完整的网页,我该怎么做呢?

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

基本上我的目标是建立一个更加动态的网站,所以当用户点击一个选项时,它会向下滚动并显示所请求的信息,而不会有明显的页面重定向。

任何建议都会很棒。

感谢。

4 个答案:

答案 0 :(得分:3)

Jquery的.load(url)方法将HTML直接加载到元素中。因此,如果您更改了每个< a>标记为您的顶级元素上的.load(),您可以执行此操作。这有点像使用帧,但是以DIV而不是帧为目标。

当然,除非你投入大量的工作,否则会破坏很多东西,比如后退按钮,表格处理等等。

所以,就像那位被告知“当我这样做时感到疼痛”的医生回答说“好吧不要那么做”,答案可能是“不要这样做”。

答案 1 :(得分:1)

一种可能的方法是获取HTML然后将其写入div

答案 2 :(得分:0)

是的,这是可能的。您可以从纯JavaScript中创建页面/站点,从Web服务或类似处理程序中获取所有元素。尽管如此,这仍然是一个噩梦,你会遇到各种各样的问题,这取决于你的需求。我这样做是为了学习jQuery,AJAX和其他一些东西。我发现表单提交变得棘手。当数据通过AJAX发布到Web服务时,管理页面状态变得非常复杂,随着网站需求的增长,它只会变得噩梦般。

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

所以你的问题的答案是肯定的。仔细阅读您的问题,我会将您的请求范围保持在单独的显示页面上而没有太多功能。保留它越简单,维护和使用就越容易。

答案 3 :(得分:0)

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

脚本

<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>

详细

$ navigation下的所有链接都会添加一个点击事件,用于更新窗口网址哈希。该窗口正在侦听哈希值更改,并将使用哈希值来发出一个AJAX请求来重新加载$ ​​body html。

优势

  • 历史(后退和前进)导航将起作用:
  • 同一网站适用于支持JavaScript的浏览器和不支持JavaScript的浏览器;
  • 如果您复制过去的网址,则脚本会加载正确的网页;
  • 因为我们正在使用委托功能,所有通过ajax加载结果添加的链接也会添加click事件

缺点

  • 您无法再在自己的网站上使用锚点

有关详细信息和示例,请参阅:http://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/