Xpoint
   [напомнить пароль]

Получение данных от сервера без перезагрузки страницы

Оглавление

Введение

Различные способы обращения к серверу без перезагрузки страницы принято называть общим термином "Remote Scripting". Здесь будут собраны и описаны преимущества и недостатки нескольких наиболее распространенных подходов.

IFRAME: Загрузка данных в скрытый фрейм

Описание

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

<iframe name="buffer" src="about:blank"  
  style="width:0px; height:0px; overflow:hidden; border:none;"></iframe>

Использовать display:none для скрытия фрейма нельзя — Опера не позволит обратиться к такому фрейму. (Альтернативное работающее решение — position:absolute; visibility:hidden; width:0px; height:0px;.)
Запрос и получение данных при этом происходят асинхронным образом, чаще всего при помощи callback-функции, определяемой в контексте основной страницы:

// ф-я будет вызвана при получении данных от сервера
function frameCallback(data) {
  // какие-то действия с полученными данными
}

Когда скрипту нужно получить какие-то данные с сервера, он даёт команду на загрузку страницы в этот iframe:

window.frames['buffer'].location = url; // url — GET-запрос к серверу

Можно также использовать сабмит невидимой формы с target="buffer". Это позволит передавать данные на сервер методом POST.

Сервер в ответ должен сформировать и вернуть страницу с JavaScript кодом, который вызовет callback-функцию:

<html>
<script>
parent.frameCallback("received data");
</script>
</html>

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

  • Очевидность реализации: просто IFRAME-первое, что приходит в голову.
  • Возможность отправлять в IFRAME данные произвольно формы (в том числе — динамически созданной), что решает проблемы с кодировками данных (все перекодирования выполняет браузер).

Недостатки

  • Засорение history браузера.
  • Проблемы с кроссбраузерностью: каждый браузер имеет свои собственные и крайне нестабильные особенности при работе с IFRAME.
  • Большие расходы памяти (фактически, каждый IFRAME — это отдельный маленький браузер).
  • Сложности в Opera: можно обратиться только к содержимому того IFRAME, при создании которого был указан атрибут src, совпадающий с именем текущего сайта.

XMLHttpRequest и ActiveX Microsoft.XMLHTTP

Dynamic HTML and XML: The XMLHttpRequest Object
Expanded XML Support in Internet Explorer 5

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

  • Компоненты используются по их прямому назначению.
  • Большая экономия памяти по сравнению с IFRAME.

Недостатки

  • Решения специфичны для IE и Mozilla/Firefox (в IE вообще не работает с выключенными ActiveX), в Opera поддержка есть только начиная с версии 8.

SCRIPT: Загрузка данных через динамически создаваемый тэг SCRIPT

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

  • Хорошая кроссбраузерность. Идентичный код и метод в разных браузерах (в том числе — работает в Opera).
  • Экономия памяти по сравнению с IFRAME.
    • Не портится history.
    • Метод не опирается на особенности браузеров и работает в IE5.0+, Mozilla 1.7+, Firefox 1.0+ и Opera 7.3+ (здесь «+» означает «в этой и более новых версиях»). Кроме того, не использует ни ActiveX, ни IFRAME.

Недостатки

  • Невозможно отправить на сервер очень много данных (ограничение на длину QUERY_STRING).
  • Необходимо в серверном скрипте работать с Unicode (в PHP для этого есть расширение iconv).
  • Браузеры по-разному работают с динамически созданными SCRIPT-тегами, поэтому кроссбраузерное решение содержит ряд хаков.

JsHttpRequest: Все вышесказанное в одной удобной библиотеке

http://dklab.ru/lib/JsHttpRequest/ — статья о библиотеке на официальном сайте.
http://forum.dklab.ru/js/jshttprequest/ — форум поддержки.

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

  • Полностью совместимый с XMLHttpRequest интерфейс.
  • Кроссбраузерность.
  • Наличие упрощенного интерфейса.
  • Возможность динамической закачки файлов на сервер.
  • Автовыбор оптимального метода загрузки (XMLHttpRequest, script или form) в зависимости от параметров запроса.

Недостатки

  • их отсутствие (-;

Примеры использования Remote Scripting

Google Suggest Dissected — статья про то, как устроен Google Suggest.
Mapping Google — статья про то как устроен Google maps.

Powered by POEM™ Engine Copyright © 2002-2005