![[logo]](/site/images/logo.jpg){kind=logo}
Получение данных от сервера без перезагрузки страницы
Оглавление
Введение
Различные способы обращения к серверу без перезагрузки страницы принято называть общим термином "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.