Избегайте перезагрузки контента без использования фреймов / фреймов

Question

Есть много причин, по которым нужно избегать <iframe> с (и вообще кадров), но каковы лучшие альтернативы?(Цель здесь состоит в том, чтобы избежать полной перезагрузки страницы).

Например, Facebook, кажется, держит свою верхнюю панель и боковое меню в такте (по большей части), а перезагрузка полной страницы невероятно редка.

Поиск объяснений с небольшим представлением о том, что использовать в качестве поисковых терминов, дал мне немного понимания, поэтому я подумал, что лучше задать этот вопрос здесь.Это все Аякс, или есть что-то большее?

Answer 1

AJAX

Более традиционный подход - "AJAX".В двух словах, ваш javascript-код может запрашивать определенный контент с сервера за раз (каждые x секунд) или когда происходит пользовательское событие (например, нажатие кнопки).

Очень базовая реализация в jQuery будет выглядеть примерно так:

function updateShouts () {// Предполагается, что у нас есть #shoutbox $ ('# shoutbox'). Load ('latestShouts.php');} setInterval ("updateShouts ()", 10000);

Это будет обновлять div с идентификатором "shoutbox" каждые 10 секунд, независимо от того, какой контент извлекается из файла lastShouts.php.

Более продвинутая реализациябудет включать в себя получение только данных (не представление) в формате, таком как JSON или XML, а затем обновление существующих значений HTML с полученными данными.

WebSockets

Совсем недавно браузеры начали поддерживать то, что называется WebSockets .WebSockets позволяет вам поддерживать двунаправленное соединение между браузером и сервером и позволяет серверу передавать информацию в браузер без запроса браузера.

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

Надеюсь, это поможет ..

Приветствия!

Answer 2

Внедрение частичного контента с использованием ajax - ваш лучший и самый простой способ - я тоже рекомендую jquery.