Лучшая производительность + JQuery Ajax + Div Refresh

Question

Есть ли у кого-нибудь хорошее предложение о том, как jQuery Ajax лучше обновить DIV?

Вот что я пытаюсь достичь:

1. Оптимизация производительности подчеркивается.
2. Слева будет навигация, как Google + / Facebook, справа будет панель контента (DIV).
3. Когда пользователь нажимает на каждую навигацию, панель содержимого обновляется соответствующим образом без обновления всей страницы.

Answer 1

Используйте различные методы на сервере, которые генерируют каждый раздел контента.Таким образом, вы можете просто вызвать этот метод, чтобы получить конкретный контент, а не вызывать универсальный метод и извлекать только тот контент, который вам нужен.Если у вас есть разные методы для получения каждого элемента контента, вы можете использовать ссылку на этот метод в качестве ссылки и использовать метод jQuery load для извлечения контента через AJAX и обновления области контента.

В следующем примере предполагается, что каждая из ваших навигационных ссылок имеет класс nav-link, а область содержимого имеет идентификатор 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>

Answer 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();
    });
});

Answer 3

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

Answer 4

Имеется одна страница, которая включает в себя меню, и отдельные страницы для всех страниц, которые вы хотите отобразить (без меню).В пункте меню нажмите, отправьте запрос AJAX, чтобы получить соответствующую страницу (будет возвращен полный HTML-код страницы), и просто установите его в качестве HTML-кода вашего div.Просто следите за дублированием идентификаторов элементов и имен, и это может вызвать проблемы с JavaScript, если вы не будете осторожны.