Протокол передачи гипертекста (Hypertext Transfer Protocol, HTTP) определяет, как веб-броузеры должны запрашивать документы, как они должны передавать информацию веб-серверам и как веб-серверы должны отвечать на эти запросы и передачи. Очевидно, что веб-броузеры очень много работают с протоколом HTTP. Тем не менее, как правило, сценарии не работают с протоколом HTTP, когда пользователь щелкает на ссылке, отправляет форму или вводит URL в адресной строке.
Однако JavaScript-код способен работать с протоколом HTTP. HTTP-запросы могут инициироваться, когда сценарий устанавливает значение свойства
location
объекта
Window
или вызывает метод
submit
объекта
Form
. В обоих случаях броузер загружает в окно новую страницу. Такого рода взаимодействие с протоколом HTTP может быть вполне оправданным в веб-страницах, состоящих из нескольких фреймов, но в этой главе мы будем говорить совсем о другом. Здесь мы рассмотрим такое взаимодействие JavaScript-кода с веб-сервером, при котором веб-броузер не перезагружает содержимое окна или фрейма.
Термин Ajax описывает архитектуру веб-приложений, отличительной чертой которых является работа с протоколом HTTP. [48]
Ключевой особенностью Ajax-приложения является использование протокола HTTP для инициации обмена данными с веб-сервером без необходимости перезагружать страницу. Возможность избежать перезагрузки страницы (что было привычным на первых этапах развития Всемирной паутины) позволяет создавать веб-приложения, близкие по своему поведению к обычным приложениям. Веб-приложение может использовать технологии Ajax для передачи на сервер результатов взаимодействия с пользователем или для ускорения запуска приложения, отображая сначала простую страницу и подгружая дополнительные данные и компоненты страницы по мере необходимости.
48
Ajax - это аббревиатура от Asynchronous JavaScript and XML (асинхронный JavaScript и XML). Этот термин предложил Джесси Джеймс Гаррет (Jesse James Garrett) и впервые использовал его в своей статье «Ajax: A New Approach to Web Applications» в феврале 2005 года (От переводчика: перевод этой статьи на русский язык можно найти по адресуги/articles,fwl60.). В течение многих лет термин «Ajax» был громким словом, которое употребляли к месту и не к месту, а сейчас это всего лишь удобный термин, обозначающий архитектуру веб-приложения, опирающегося в своей работе на НТТР-запросы.
Термин Comet описывает похожую архитектуру веб-приложений, также использующих протокол HTTP. [49]
В некотором смысле архитектура Comet является обратной по отношению к Ajax: в архитектуре Comet не клиент, а сервер инициирует взаимодействие, асинхронно отсылая сообщения клиенту. Если веб-приложению потребуется отвечать на сообщения, отправляемые сервером, оно сможет использовать приемы Ajax для отправки или запроса данных. В архитектуре Ajax клиент «вытягивает» данные с сервера. В архитектуре Comet сервер «навязывает» данные клиенту. Иногда архитектуру Comet называют «Server Push», «Ajax Push» и «HTTP Streaming».
49
Имя Comet было предложено Алексом Расселом (Alex Russell) в статье «Comet: Low Latency Data for the Browser» . Вероятно, выбирая такое имя, Алекс Рассел хотел обыграть термин Ajax: дело в том, что в США Comet и Ajax являются названиями чистящих средств.
Есть множество способов реализации архитектур Ajax и Comet, и эти базовые реализации иногда называют транспортами. Элемент
<img>,
например, имеет свойство
src
. Когда сценарий записывает в это свойство URL-адрес, инициируется HTTP-запрос GET и выполняется загрузка содержимого с этого URL-адреса. Таким образом, сценарий может отправлять информацию веб-серверу, добавляя ее в виде строки запроса в URL-адрес изображения и устанавливая свойство src элемента
<img>.
В ответ на этот запрос веб-сервер должен вернуть некоторое изображение, которое, например, может быть невидимым: прозрачным и размером 1x1 пиксел. [50]
50
Такие изображения иногда называют веб-жучками (web bugs). Они пользуются дурной славой из-за проблем с безопасностью, когда используются для обмена информацией со сторонним сервером, не тем, откуда была загружена страница. Одно из типичных применений веб-жучков - подсчет числа посещений и анализа трафика веб-сервера.
Элемент
<img>
– не самый лучший транспорт Ajax, потому что обмен данными ведется только в одном направлении: клиент может передать данные серверу, но ответом сервера всегда будет изображение, извлечь информацию из которого на стороне клиента очень непросто. Элемент
<iframe>
обладает большей гибкостью. При использовании элемента
<iframe>
в качестве транспорта Ajax сценарий сначала добавляет в URL-адрес информацию, предназначенную для веб-сервера, а затем записывает этот URL-адрес в свойство
src
тега
<ifгате>.
Сервер создает HTML-документ, содержащий ответ на запрос, и отправляет его обратно веб-броузеру, который выводит ответ в теге
<iframe>
. При этом элемент
<iframe>
необязательно должен быть видимым для пользователя - он может быть сокрыт, например, средствами таблиц стилей CSS. Сценарий может проанализировать ответ сервера, выполнив обход документа в элементе
<iframe>
. Обратите внимание, что взаимодействие с документом ограничивается политикой общего происхождения, о которой рассказывается в разделе 13.6.2.
Даже изменение свойства
src
элемента
<script>
может использоваться для инициирования HTTP-запроса GET. Использование элементов
<script>
для работы с протоколом HTTP выглядит особенно привлекательно, потому что они не являются субъектами политики общего происхождения и могут использоваться для взаимодействий с разными серверами. Обычно при использовании транспорта Ajax на основе элемента
<script>
ответ сервера имеет вид данных в формате JSON (раздел 6.9), которые автоматически «декодируются», когда содержимое элемента
<script>
выполняется интерпретатором JavaScript. Из-за использования формата данных JSON этот транспорт Ajax получил название «JSONP».