最佳性能 + jQuery Ajax + Div 刷新答案

【问题标题】：Best Performance + jQuery Ajax + Div Refresh最佳性能 + jQuery Ajax + Div 刷新
【发布时间】：2011-08-23 23:22:29
【问题描述】：

有没有人对 jQuery Ajax 刷新 DIV 的最佳选择有好的建议？

以下是我想要实现的目标：

强调性能优化。
左侧会有导航，就像 Google+/Facebook 一样，右侧会有内容窗格 (DIV)。
当用户点击每个导航时，内容窗格会相应刷新，而不刷新整个页面。

【问题讨论】：

标签： jquery ajax

【解决方案1】：

在生成每个内容部分的服务器上使用不同的方法。这样，您可以简单地调用该方法来获取特定内容，而不是调用通用方法并仅提取您需要的内容。一旦有了不同的方法来获取每个内容项，就可以使用该方法的 href 作为链接，并使用 jQuery load 方法通过 AJAX 检索内容并更新内容区域。

以下示例假定您的每个导航链接都具有 nav-link 类，并且内容区域具有 id content。它还假定您已包含 jQuery.js。

 <div class="menu">
     <ul>
        <li><a href="/foo" class="nav-link">Foo</a></li>
         ...
     </ul>
</div>
<div id="content">
    ... initial content...
</div>

<script type="text/javascript">
 $(function() {
     $('.nav-link').click( function() {
        var href = $(this).attr('href');
        $('#content').load( href, function() {
            // you can do something here after the content is loaded if needed
        });
        return false; // don't actually follow the link
     });
 });
</script>

【讨论】：

很高兴知道。我读到出于性能原因，最好使用 function(e){... 然后使用 e.preventDefault() 而不是 return false 因为 return false 也会触发 e.stopPropagation ，这会使函数变慢一些。所以 return false 被称为“不好的做法”，但它当然有效；）

【解决方案2】：

使用 ajax 调用，您的大部分开销将来自 XHR 请求本身。尽管您可以将必要的对象缓存在变量中以尽可能提高性能。假设你的 HTML 是这样的：

<ul id="nav">
    <li><a href="content1.html">Link 1</a></li>
    <li><a href="content2.html">Link 2</a></li>
</ul>

<div id="contentpane"></div>

然后你可以使用下面的 JS

$(document).ready(function() {
    // Load our DOM objects into vars
    links = $('#nav a');
    contentPane = $('#contentpane');

    // On click load content into pane using ajax
    links.click(function(e){
        contentPane.load( $(this).attr('href') );
        e.preventDefault();
    });
});

【讨论】：

【解决方案3】：

$.ajax({
  url: <YOUR_POST_URL>,
  success: function(data) {
    $('#divId').html(data);
  }
});

【讨论】：

【解决方案4】：

有一个包含菜单的页面，并为您想要显示的所有页面（不包含菜单）设置单独的页面。单击菜单项时，发送 AJAX 请求以获取适当的页面（将返回整页 html）并将其设置为 div 的 html。请注意重复的元素 ID/名称，如果您不小心，这可能会导致 javascript 问题。

【讨论】：