Должен ли я загружать всю html-страницу с помощью AJAX?

Мой дизайнер подумал, что было бы неплохо создать переход между разными страницами. По сути, только часть содержимого перезагружается (верхний и нижний колонтитулы остаются нетронутыми), и только контент div должен иметь переходный эффект (выцветание или какой-то вид). Чтобы создать такой эффект, на самом деле не проблема, чтобы сделать google (analytics) счастливым...

Решения, которые мне не нравились и почему:

  • Загрузите только контент div с помощью ajax: google не увидит никакого содержимого, то есть сайт никогда не будет найден, или только те части, которые извлекаются ajax, которые вообще не полные страницы
  • показать переходный эффект, а затем после этого "перенаправить" пользователя на назначенную страницу (захватить событие щелчка элементов): эффект почти такой же, как просто ссылка на другую страницу, например. пользователь все равно увидит перезагружаемую страницу.

Я подумал о одном возможном решении: Когда посетитель нажимает на ссылку, захватывает событие, загружает цель с помощью ajax, показывает переходный эффект, а затем просто переписывает весь документ с содержимым, полученным с помощью запроса ajax.

По крайней мере, это будет работать и имеет некоторые преимущества; перезагрузка страницы будет выглядеть без проблем, независимо от того, насколько медленным является ваше интернет-соединение, google на самом деле не будет возражать, поскольку содержимое ajax является самой полной страницей html и может быть сканировано как есть, даже не-javascript-браузеры (мобильные телефоны и другие.) не возражаете, они просто перезагружают страницу.

Моя нерешительность для реализации этого метода заключается в том, что я перезагружу всю страницу с помощью ajax. Мне интересно, если это то, что должен делать ajax, если это замедлит работу. Больше всего, есть лучшее решение, например. мое первое "плохое" решение, но немного другое, поэтому google ему понравится (аналитика тоже)?

Спасибо за ваши мысли об этом!

ОТВЕТЫ

Ответ 1

Короткий ответ: я бы не рекомендовал загружать целую страницу таким образом.

Длинный ответ: Не рекомендуется. хотя это возможно, на самом деле это не намерение XHR/Ajax. По сути, вы делаете репликацию собственного поведения браузера. Некоторые из проблем, с которыми вы столкнетесь:

  • Поддержка Back/Forward кнопка. Вам понадобится схема URI # для решения.
  • Браузер должен анализировать всю страницу через AJAX. Это замедлит работу. Например. если вы загружаете блок HTML в браузера, затем замените DOM на это, только тогда будут любые скрипты, CSS или изображения, содержащиеся в них, начинаются загрузка.
  • Память - браузер не меняет страницы. Над времени (в зависимости от браузера), я бы ожидайте увеличения использования памяти.
  • Доступность. Считыватели экрана необходимо будет уведомлять каждый раз содержимое страницы обновляется. Мог бы не беспокойтесь за вас, но стоит упоминая.
  • Caching. браузер не будет знать, какую страницу кэшировать (за пределами начальной нагрузки).
  • Разделение проблем - ваш взгляд по существу, части серверной части для визуализации содержимое страницы вместе со статическим HTML для рамки страницы и наконец, JS объединил сервер с частью браузера. Это позволит с течением времени проблематичным и сложным.
  • Интеграция с другими компонентами - вы уже видите проблемы с Гугл Аналитика. Вы можете столкнуться проблемы с другими компонентами к моменту времени, когда DOM построены.

Стоит ли это для эффекта перехода страницы - это ваш звонок, но я надеюсь, что ответил на ваш вопрос.

Ответ 2

  • у вас может быть AJAX и SEO: предложение Google.

  • Я думаю, вы можете узнать что-то из дизайна Gmail.

Ответ 3

Это может быть немного странно, но у меня есть идея для этого.

Подготовьте свои страницы для загрузки с параметром GET "ifarme".

  • Когда есть "iframe" , загрузите его с помощью некоторого javascript, чтобы запустить родительский show_iframe_content()
  • Когда нет iframe, просто загружайте страницу со скрытым элементом iframe, называемым "preloader"

Ваша цель - убедиться, что каждая из ваших ссылок открыта в "preloader" с дополнительным параметром "iframe" get, и когда загрузка iframe заканчивается, и она вызывает show_iframe_content(), вы копируете контент в вашей родительской странице.

Вот так: Ссылка нажата → переход к фазе загрузки → iframe загружен → show_iframe_content() вызван → содержимое iframe, скопированное обратно в родительский → переход к нормальной фазе

Все хорошо, так как, если искатель посещает ваши страницы, он будет делать это без параметра "iframe" get, поэтому он может проходить через все ваши страницы, как обычно, но когда вы используете его в браузере, вы делаете свои ссылки на магию выше.

Это всего лишь эскиз, но я уверен, что это можно сделать правильно.

EDIT: На самом деле вы можете сделать это с помощью простого ajax, без iframe, вам нужно изменить страницу после ее загрузки в браузере, чтобы загрузить связанный контент с помощью ajax. Также сканеры должны видеть ссылки.

Пример script:

$.fn.initLinks = function() {
    $("a",this).click(function() {
        var url = $(this).attr("href");
        // transition to loading phase ...
        // Ajax post parameter tells the site lo load only the content without header/footer
        $.post(href,"ajax=1",function(data) {
            $("#content").html(data).initLinks();
            // transition to normal phase ...
        });
        return false;
    });
};

$(function() {
   $("body").initLinks();
});