Создание собственных AJAX-приложений

Термин AJAX, исходно придуманный Jesse James Garrett из Adaptive Path в эссе «AJAX: A New Approach To Web Applications», является аббревиатурой для "Asynchronous JavaScript And XML". Это несколько труднопроизносимо, зато просто описывает технику, использующую JavaScript для обновления содержимого страницы с Web-сервера без перезагрузки страницы целиком. Это отличается от традиционного подхода к обновлению Web-страниц, требующего от браузера полной перезагрузки страницы для отображения любых изменений в ее содержимом.

Похожие методики того или иного вида (часто осуществляемые с помощью искусного хакерства) уже довольно давно существуют. Но расширение поддержки в браузерах класса XMLHttpRequest, громкая аббревиатура Ajax и появление ряда высококачественных примеров типа Google Maps, Gmail, Backpack и Flickr позволило разным видам высоко интерактивных Web-приложений завоевать популярность среди разработчиков.

По мере распространения термина AJAX его определение расширилось, чтобы более широко отражать исполняемые в браузерах приложения, ведущие себя более динамично, чем старомодные Web-приложения. Новое поколение AJAX Web-приложений шире использует интерактивность – редактирование текста по месту, drag-and-drop, CSS-анимацию и переходы при изменении пользовательского интерфейса.

Эта статья является отрывком из моей книги Build Your Own AJAX Web Applications. В представленных здесь главах мы обсудим основы AJAX и увидим, как он работает, прежде чем погрузиться в глубины XMLHttpRequest. После этого мы займемся созданием нашего первого настоящего AJAX-приложения.

Это задумано как путеводитель, так что я надеюсь, что вы готовы к приключениям.

Глава 1. AJAX – обзор.

Web-приложения AJAX

AJAX может быть отличным решением для многих Web-проектов – он может позволить Web-приложениям перейти в наступление и занять территории, до сих пор почти полностью оккупированные настольными приложениями.

В то же время важно помнить, что AJAX – это не разновидность магического порошка, которым можно посыпать приложение, чтобы оно стало быстрым и хорошим. Как и любую другую технику разработки, AJAX несложно использовать неправильно, и единственное, что может быть хуже ужасных, отсталых и устаревших Web-приложений – ужасные, плохо работающие Web-приложения AJAX.

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

Часто AJAX-приложения описывают как «похожие на настольные приложения в браузере». Это почти точное описание – AJAX Web-приложения имеют существенно меньшее время отклика, чем традиционные старые Web-приложения, и могут обеспечить уровень интерактивности, аналогичный настольным приложениям.

Но AJAX Web-приложения – это по-прежнему распределенные приложения, ведущие себя не так, как настольные приложения, имеющие доступ к локальным хранилищам данных. Часть вашей работы как AJAX-разработчика – это создание легких в использовании приложений с хорошим временем отклика, несмотря на связь между приложением и удаленным сервером. К счастью, AJAX предоставляет набор прекрасных средств именно для этого.

Злые старые времена

Одной из первых задач Web-разработки, зашедших дальше показа простых статических Web-страниц, была техника динамического создания страниц на Web-сервере с использованием данных из удаленного хранилища данных.

В «плохие старые времена» Web-разработки единственным способом создания такого динамичного, получаемого из БД контента, было сконструировать всю страницу на сервере, используя либо CGI-скрипт (чаще всего написанный на Перл), либо некий серверный компонент, способный интерпретировать скриптовый язык (например, Microsoft ASP). Даже малейшее изменение этой страницы неизбежно влекло за собой полный цикл обмена между сервером и браузером – только после этого новый контент мог быть показан клиенту.

В те дни обычной моделью пользовательского интерфейса Web-приложения была Web-форма, которую пользователь должен был заполнить и отослать на сервер. Сервер обрабатывал эту форму и, чтобы показать результат, посылал обратно целую страницу. Так, например, выполнение многошагового Web-визарда требовало от пользователя отправки формы – что порождало круг обмена между сервером и браузером – на каждом шаге.

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

Доисторический AJAX

Ранние Web-разработчики немедленно начали изыскивать уловки, чтобы расширить возможности простой основанной на формах модели, так как старались создавать более «отзывчивые» и интерактивные Web-приложения. Эти уловки, как правило, грубые и одноразовые, были первыми шагами разработчиков к той интерактивности, которую мы сегодня видим в AJAX-приложениях. Но, хотя эти трюки и давали зачастую работоспособные решения, результирующий код отнюдь не представлял собой приятного зрелища.

Вложенные фреймы

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

Такая техника порождала ужасный неподдерживаемый код, изобилующий страницами с именами типа EmployeeEditWizardMiddleLowerRight.asp.

Скрытый iframe

Появление iframe в браузерах типа Internet Explorer 4 несколько улучшило положение. Возможность полностью спрятать iframe привела к появлению следующего приема: разработчики обращались с HTTP-запросами к серверу, используя скрытый iframe, а затем вставляли контент в страницу, используя JavaScript и DHTML. Это предоставило значительную часть функциональности, доступной при использованной современного AJAX, включая возможность отправлять данные форм, не перезагружая страницу – трюк, проделываемый путем отправки формы в скрытый iframe. Результат возвращался сервером в iframe, где к нему мог обратиться JavaScript страницы.

Большим недостатком этого подхода (кроме того, что это был хак) была раздражающая необходимость гонять данные туда и обратно между основным документом и iframe.

Удаленный скриптинг (Remote Scripting)

Еще одна ранняя аяксоподобная технология, обычно называемая Remote Scripting, использовала задание атрибута src тега <script> для загрузки страниц, содержащих динамически генерируемый JavaScript.

Преимуществом такого подхода было то, что он гораздо понятнее, чем хак со скрытым iframe, так как сгенерированный на сервере JavaScript загружался прямо в основной документ. Однако эта технология позволяла применять только простые GET-запросы.

Чем хорош AJAX

Именно поэтому AJAX-разработка и является таким грандиозным прорывом в Web-разработке: Вместо необходимости пересылать все на сервер одним большим куском, а затем ждать, пока сервер пришлет обратно новую страницу для отрисовки, Web-разработчики могут общаться с сервером малыми порциями и выборочно обновлять части страницы на основании ответов сервера на эти запросы. Отсюда в сокращение AJAX попало слово «асинхронный».

Возможно, понять идею асинхронной системы проще, если обратиться к ее противоположности – синхронной системе. В синхронной системе все происходит по порядку. Если бы автогонки были синхронной системой, они были бы очень скучной затеей. Автомобиль, стартовавший первым, первым пересек бы финишную черту, за ним – тот, что стартовал вторым, и так далее. Не было бы никаких обгонов, и в случае аварии все движение было бы остановлено до тех пор, пока механики не исправят поломку.

Традиционные Web-приложения используют синхронную систему: приходится ждать, когда сервер пришлет первую страницу, прежде чем получить возможность запросить вторую, как показано на рисунке 1.

Асинхронная автогонка – гораздо более волнующее зрелище. Первую машину могут обогнать на первом же повороте, а автомобиль, стартующий последним, может срезать путь по полю, и придти к финишу третьим. В AJAX-приложениях HTTP-запросы из браузера ведут себя именно так. Именно возможность выполнять много мелких запросов к серверу по мере надобности делает AJAX-разработку столь привлекательной. На рисунке 2 показано AJAX-приложение, выполняющее асинхронный запрос к Web-серверу.

В результате мы получаем приложение с лучшим откликом, так как пользователям приходится меньше ждать обработки запросов, и не приходится ждать получения и отрисовки браузером целой новой Web-страницы, чтобы увидеть результаты.

Технологии AJAX

Заключение

XMLHttpRequest – это сердце AJAX. Он дает скриптам браузера возможность выполнять собственные запросы и получать информацию с сервера. Простая AJAX-библиотека, созданная нами, позволяет понять, как работает XMLHttpRequest, и это понимание поможет вам при проблемах в создаваемом вами AJAX-коде (при использовании собственной AJAX-библиотеки, или одной из многочисленных готовых библиотек и утилит). Пример приложения, созданного нами, позволил только намочить ноги в луже AJAX – теперь пора заходить глубже и учиться плавать.

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

Технология Клиент-Сервер 2007'1