Загрузка веб-страниц с помощью AJAX

Question

Можно ли загрузить полноценные веб-страницы с помощью AJAX и как мне это сделать?

Я думаю, что могу создать отдельные страницы, как обычно, а затем каким-то образом использовать AJAX, чтобы получить эту страницу и представить ее там, где в данный момент находится пользователь. Это правильное предположение?

По сути, я стремлюсь сделать сайт более динамичным, поэтому, когда пользователь щелкает опцию, он прокручивается вниз и раскрывает запрошенную информацию без заметного перенаправления страницы.

Любой совет был бы великолепен.

Спасибо.

Answer 1

Метод JQuery .load (url) загружает HTML прямо в элемент.Поэтому, если вы изменили каждый тег на элемент .load () в элементе верхнего уровня, вы можете сделать это.Это было бы немного похоже на использование фреймов, но нацеливание на DIV вместо фрейма.

Конечно, это сломало бы много вещей, таких как кнопка "назад", обработка форм и т. Д., Если вы не приложите много усилий.

Итак, как и доктор, который, когда ему сказали «Больно, когда я делаю это», ответил: «Ну, тогда не делай этого», ответ, вероятно, «не делай этого».

Answer 2

Один из возможных способов - извлечь HTML-код и записать его в div

.

Answer 3

Я знаю, что это старый пост, но это хороший маленький скрипт, который может сделать эту работу. Он может добавить загрузку содержимого 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 будет добавлено событие click, которое обновит хеш URL окна. Окно прослушивает изменение хеша и будет использовать значение хеша, чтобы сделать запрос AJAX для перезагрузки html $ body.

Преимущество

• Будет работать навигация по истории (назад и вперед):
• Один и тот же сайт будет работать с браузерами, поддерживающими JavaScript, и браузерами, которые не поддерживают;
• Если вы скопируете за URL, скрипт загрузит правильную страницу;
• Поскольку мы используем функцию делегата, любые ссылки, добавленные через результат загрузки ajax, также будут иметь событие click, добавленное к ним

Неудобство

• Вы больше не можете использовать якоря на своем сайте

Для получения дополнительной информации и примера см .: http://css -tricks.com / video-screencasts / 85-Best-Practices-dynamic-content /

Answer 4

Да, это возможно.Вы можете создать страницу / сайт из чистого JavaScript, извлекая все элементы из веб-службы или аналогичного обработчика.Это просто кошмар, и вы сталкиваетесь с различными проблемами в зависимости от ваших потребностей.Я сделал это как упражнение в изучении jQuery, AJAX и нескольких других вещей.Я нашел форму представления стало сложно.Хотя данные публикуются в веб-сервисе с помощью AJAX, управление состоянием страницы стало очень запутанным, и это стало кошмарным только по мере роста потребностей сайта.

Я также обнаружил, что для достижения этой целиВы должны сделать выбор, чтобы обновить весь интерфейс во время переходов или только изменяемый раздел.Обновление всего интерфейса является обременительным, и для «быстрых» пользователей AJAX может не успевать.Это также вызывает коллизии запросов веб-службы.Если на вашей странице обновляются 4 отдельных раздела, нередки случаи, когда запрос веб-службы «теряется» в середине, оставляя раздел без обновления.

Таким образом, ответ на ваш вопрос «да»,Внимательно прочитав ваш вопрос, я бы оставил ваши запросы на отдельных страницах без особой функциональности.Чем проще его хранить, тем проще его поддерживать и использовать.