86 lines
6.8 KiB
Markdown
86 lines
6.8 KiB
Markdown
# Введение в AJAX и COMET
|
||
|
||
В этой главе мы "обзорно", на уровне возможностей и примеров рассмотрим технологию AJAX. Пока что с минимумом технических деталей.
|
||
|
||
Она будет полезна для понимания, что такое AJAX и с чем его едят.
|
||
[cut]
|
||
|
||
|
||
## Что такое AJAX?
|
||
|
||
AJAX (аббревиатура от "<strong>A</strong>synchronous <strong>J</strong>avascript <strong>A</strong>nd <strong>X</strong>ml") -- технология обращения к серверу без перезагрузки страницы.
|
||
|
||
За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.
|
||
|
||
Несмотря на то, что в названии технологии присутствует буква `X` (от слова XML), использовать XML вовсе не обязательно. Под AJAX подразумевают любое общение с сервером без перезагрузки страницы, организованное при помощи JavaScript.
|
||
|
||
## Что я могу сделать с помощью AJAX?
|
||
|
||
<dl>
|
||
<dt>Элементы интерфейса</dt>
|
||
<dd>В первую очередь AJAX полезен для форм и кнопок, связанных с элементарными действиями: добавить в корзину, подписаться, и т.п.
|
||
|
||
Сейчас -- в порядке вещей, что такие действия на сайтах осуществляются без перезагрузки страницы.
|
||
</dd>
|
||
<dt>Динамическая подгрузка данных</dt>
|
||
<dd>Например, дерево, которое при раскрытии узла запрашивает данные у сервера.</dd>
|
||
<dt>Живой поиск</dt>
|
||
<dd>*Живой поиск* -- классический пример использования AJAX, взятый на вооружение современными поисковыми системами.
|
||
|
||
Пользователь начинает печатать поисковую фразу, а JavaScript предлагает возможные варианты, получая список самых вероятных дополнений с сервера.
|
||
|
||
<img src="suggest.png" onclick="alert('этот пример - картинка, см. http://google.com');">
|
||
|
||
Код, который это обеспечивает, работает следующим образом.
|
||
<ol>
|
||
<li>Код активируется примерно при каждом нажатии клавиши, но не чаще чем раз в 100мс (примерно).</li>
|
||
</ul>
|
||
</li>
|
||
<li>Создается скрытый DIV и заполняется ответом сервера:
|
||
<ul>
|
||
<li>Текущий результат подсвечен, можно перемещаться и выбирать</li>
|
||
<li>При нажатии правой стрелки или при клике -- поиск в подрезультатах</li>
|
||
</ul>
|
||
</li>
|
||
<li>Результаты запросов кешируются, повторных обращений к серверу не происходит.</li>
|
||
</ul>
|
||
</li>
|
||
<li>В Google не только предлагаются варианты, но система тут же инициирует и сам поиск, т.е. не нужно даже нажимать [key Enter].</li>
|
||
</ol>
|
||
</dd>
|
||
</dl>
|
||
|
||
**Технически, с помощью AJAX можно обмениваться любыми данными с сервером.**
|
||
|
||
Обычно используются форматы:
|
||
<ul>
|
||
<li>JSON -- для отправки и получения структурированных данных, объектов.</li>
|
||
<li>XML -- если сервер почему-то работает в формате XML, то можно использовать и его, есть средства.</li>
|
||
<li>HTML/текст -- можно и просто загрузить с сервера код HTML или текст для показа на странице.</li>
|
||
<li>Бинарные данные, файлы -- гораздо реже, в современных браузерах есть удобные средства для них.</li>
|
||
</ul>
|
||
|
||
## Что такое COMET?
|
||
|
||
[COMET](http://ru.wikipedia.org/wiki/Comet_(%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5)) -- общий термин, описывающий различные техники получения данных по инициативе сервера.
|
||
|
||
Можно сказать, что AJAX -- это "отправил запрос -- получил результат", а COMET -- это "непрерывный канал, по которому приходят данные".
|
||
|
||
Примеры COMET-приложений:
|
||
|
||
<ul>
|
||
<li>Чат -- человек сидит и смотрит, что пишут другие. При этом новые сообщения приходят "сами по себе", он не должен нажимать на кнопку для обновления окна чата.</li>
|
||
<li>Аукцион -- человек смотрит на экран и видит, как обновляется текущая ставка за товар.</li>
|
||
<li>Интерфейс редактирования -- когда один редактор начинает изменять документ, другие видят информацию об этом. Возможно и совместное редактирование, когда редакторы видят изменения друг друга.</li>
|
||
</ul>
|
||
|
||
На текущий момент технология COMET удобно реализуется во всех браузерах.
|
||
|
||
## Об этом разделе
|
||
|
||
Здесь мы будем говорить об AJAX и COMET на низком уровне, на уровне веб-стандартов и их использования.
|
||
|
||
Существуют библиотеки и фреймворки, добавляющие удобства, например [Socket.io](http://socket.io), [CometD](http://cometd.org/) и другие.
|
||
|
||
В принципе, можно начать их использовать и не зная, что внутри. Но, скорее всего, вам всё равно понадобится отлаживать ошибки, смотреть детали коммуникации, выбирать наилучшее решение для конкретной задачи, и здесь обязательно разбираться, как это всё работает.
|
||
|