Ajax - руководство для растерявшихся: Часть 1. Обзор инструментальных средств и технических приемов Ajax

Разнообразные ресурсы и инструментальные средства для быстрого начала работы

Технология программирования Ajax (Asynchronous JavaScript + XML) постепенно завоевывает доминирующие позиции в среде разработки Web-приложений. Разработкой Ajax-приложений ежедневно начинают заниматься новые разработчики, имеющие самый разный уровень профессиональной подготовки. В первой части этой большой серии статей приводится краткий обзор ресурсов по Ajax-разработке от команды опытных Ajax-разработчиков IBM®. Авторы описывают свой собственный путь освоения данной технологии, предоставляя практическую информацию, позволяющую сразу же начать эффективное использование Ajax.

Гэл Шакор, старший инженер, Systems Documentation, Inc. (SDI)

Гэл Шакор (Gal Shachor) работает старшим инженером IBM и исследователем в IBM Haifa Research Lab, где занимается различными вопросами, связанными с программным обеспечением промежуточного уровня и полнофункциональными Internet-приложениями.



Иов Рубин, инженер-программист, Systems Documentation, Inc. (SDI)

Иов Рубин (Yoav Rubin) получил степень бакалавра по информационным системам на факультете Computer Science в Technion, Israel Institute of Technology и последние семь лет работает инженером-программистом в IBM Haifa Research Lab, главным образом в области инструментальных средств разработки приложений и обработки сложных событий. Интересуется преимущественно технологиями Java и Web, упрощенным программированием и практичностью использования.



Лондон Шмулик, исследователь, Systems Documentation, Inc. (SDI)

Шмулик Лондон (Shmulik London) работает исследователем в IBM Haifa Research Lab. В настоящее время его профессионально интересуют модели программных компонентов и Web 2.0.



Шмуэль Каллнер, инженер-программист, Systems Documentation, Inc. (SDI)

Шмуэль Каллнер (Shmuel Kallner) получил степень бакалавра по информационным системам в Yeshiva College, New York, NY. Последние 26 лет работал инженером-программистом в различных отделениях IBM, главным образом в IBM Haifa Research Lab. Занимался базами данных, приложениями архитектуры клиент-сервер и серверами Java-телефонии. Интересуется в основном технологиями Java и Web, упрощенным программированием и практичностью использования.



05.09.2008

Ajax - это технология клиентских Web-приложений, объединяющая JavaScript, Cascading Style Sheets (CSS), HTML, объект XMLHttpRequest и Document Object Model (DOM) (ссылки на дополнительную информацию по данным стандартам приведены в разделе "Ресурсы"). Выполняющиеся в браузере Ajax-приложения взаимодействуют с Web-сервером в асинхронном режиме и обновляют только отдельные фрагменты страницы. Используя преимущества технологии Ajax, можно предоставлять полнофункциональный, основанный на браузере пользовательский интерфейс.

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

Центр ресурсов developerWorks Ajax
Просмотрите Ajax Resource Center - универсальный центр информации по программной модели Ajax, содержащий статьи, учебные руководства, дискуссионные форумы, блоги, wiki, события и новости. Здесь вы найдете всю информацию о событиях в данной области.

Садимся в фургон Ajax

Ajax меняет способ работы с Web-сайтом с модели "страница по щелчку" на интерактивную модель традиционных настольных приложений. Пользователи могут избежать перезагрузок страницы и не ждать появления следующей порции содержимого. Вы, вероятно, думаете: легко сказать, но как реализовать? Для ответа на этот вопрос понадобятся некоторые знания технологий, стоящих за Ajax.

Ajax - это набор следующих Web-технологий и стандартов, позволяющих использовать машину клиента не только для вывода информации, но и для выполнения (за кулисами процесса) существенной доли логики приложения:

  • Hypertext Markup Language (HTML): определяет содержимое, которое в конечном итоге предоставляется пользователю.
  • Cascading Style Sheets (CSS): определяет стиль (или оформление) предоставляемого содержимого.
  • Document Object Model (DOM): API, используемое браузером для отображения предоставляемого содержимого в JavaScript-сценарии. Сценарии могут затем использовать DOM для динамического изменения содержимого на глазах у пользователя.
  • Объект XmlHttpRequest: обеспечивает асинхронное взаимодействие между браузером и сервером (активизируется из JavaScript-сценариев).
  • JavaScript: язык программирования, использующийся внутри браузера и объединяющий все остальные компоненты Ajax. Сценарии могут следить за происходящими внутри браузера событиями (такими как нажатие кнопки), реагировать на них, обращаясь к серверу при помощи XmlHttpRequests, и изменять дерево DOM-объектов, основываясь на возвращенных из браузера данных.

Все эти технологии выполняются внутри Web-браузера пользователя, который выступает в роли платформы, выполняющей Ajax-программы.

При использовании Ajax важно понимать, что формирующие его технологии хотя и основаны на стандартах, однако в некоторой степени зависят от браузера; иначе говоря, одно и то же приложение может вести себя по-разному в разных браузерах. Однако, поскольку, во-первых, невозможно ограничить пользователей, рекомендуя конкретный браузер, а, во-вторых, неразумно игнорировать клиентов, использующих браузеры с неполной поддержкой CSS или DOM, создатель приложения должен понимать различия между браузерами.

Чтобы стать эффективным Ajax-разработчиком, необходимо:

  • Знать технологии, лежащие в основе Ajax-разработки.
  • Знать доступные исполняющие платформы и Web-браузеры.
  • Использовать IDE, поддерживающее различные языки, используемые при разработке Ajax-приложений.
  • Иметь отладчики и средства тестирования, доступные для различных сред и языков.

Источники информации

Одним из лучших учебных руководств по Ajax являются серии статей "Освоение Ajax" на developerWorks, написанные Бретом МакЛафлином (Brett McLaughlin). В них дается обзор различных связанных с Ajax технологий, причем предполагается наличие минимальных знаний в Ajax-программировании. Если вы хотите получше разобраться в Web-архитектуре, познакомьтесь с протоколом Representational State Transfer (REST). Для начала подойдет статья "Как создать протокол REST" (см. раздел "Ресурсы").

Завершив изучение серии "Освоение Ajax" и приступив к собственной разработке, вы столкнетесь с необходимостью получения справочной информации. W3Schools (см. раздел "Ресурсы") предоставляет интерактивную справочную информацию по базовым Ajax-технологиям (JavaScript, CSS, HTML, DOM, XML и т.д.).

Если вы используете браузер Mozilla Firefox, то можете применить дополнительные инструментальные панели (sidebars) DevEdge (см. раздел "Ресурсы"). Эти панели содержат указатели на стандарты, определяющие конкретные Ajax-технологии, позволяя обращаться к ним как к справочным руководствам.

Наконец, если вы хотите держать руку на пульсе Ajax-сообщества, подпишитесь на блог Ajaxian (см. раздел "Ресурсы").

Браузер в качестве среды исполнения

Web-браузер является не только средой Ajax-разработки, но и отладочной средой. В своем большинстве браузеры могут быть расширены такими отладочными вспомогательными инструментами как средства просмотра дерева DOM-объектов или отладчики. В следующем разделе приведен обзор популярных браузеров:

  • Microsoft® Internet Explorer (IE)
  • Firefox
  • Safari

Internet Explorer

IE остается браузером, которым пользуется большинство пользователей. IE6 - это старый браузер, занимающий очень обширную рыночную нишу. В IE6 многие функциональные возможности CSS и DOM не поддерживаются или представлены в зачаточном виде. Разработчики, использующие IE6, могут столкнуться с некоторыми из следующих известных проблем:

  • Медленный JavaScript-интерпретатор и несовместимые реализации стандартов.
  • Отсутствие поддержки прозрачных PNG-изображений.
  • DOM-события: Событие может иметь одно название в Firefox и другое в IE. Порядок вызова некоторых событий различен; может существовать различный набор атрибутов для аналогичных объектов event в IE и Firefox. Более подробная информация по данной проблеме приведена в статье "Перенос приложений из Internet Explorer в Mozilla" (см. раздел "Ресурсы").
  • Не реализованы такие CSS-атрибуты как минимальная/максимальная высота, переключатели (selectors) и т.д.

Несмотря на эти проблемы, нужно всегда помнить о том, что большинство пользователей использует именно этот браузер. Можно также попробовать использовать различные библиотеки, например, /IE7/ (см. раздел "Ресурсы"), исправляющие некоторые из недостатков IE6.

IE7 предоставляет множество визуальных улучшений по сравнению с IE6, например поддержку закладок. Для разработчиков более важны скрытые улучшения. IE7 обеспечивает более высокую производительность JavaScript-интерпретатора и исправляет многие недостатки IE6 (например, в CSS) так, чтобы большинство совместимых со стандартами Ajax-приложений могло выполняться лишь с незначительными изменениями.

Средства отладки в IE

С IE можно использовать следующие инструментальные средства отладки приложений:

  • IE Developer Toolbar: предоставляет возможность более гибко управлять средой IE (кэш, куки), исследовать дерево объектов DOM, просматривать и изменять стиль элементов. Это полезная программа при анализе сгенерированной приложением страницы (программа IE Developer Toolbar доступна для загрузки с сайта Microsoft; ссылка приведена в разделе "Ресурсы").
  • Microsoft Script Debugger: поставляется с Microsoft Office (можно также загрузить с сайта Microsoft, см. раздел "Ресурсы") и позволяет помещать точки прерывания в ваш JavaScript-код, просматривать переменные и выполнять обычные отладочные процедуры. Обратите внимание на то, что перед отладкой рекомендуется запрещать кэш через IE Developer Toolbar, в противном случае вы будете отлаживать кэшированные версии вашего кода.

Браузеры семейства IE

Можно использовать Trident, программный механизм браузера IE, для создания "новых" браузеров, таких как maxthon. Слово "новый" взято в кавычки, потому что с точки зрения разработчика ключевые свойства браузера остаются старыми (например, его поддержка Ajax). (Ссылки на более подробную информацию по механизму Trident приведены в разделе "Ресурсы").

Предупреждение: браузеры изменяются
Браузер - объект постоянных дополнений. Пользователи могут загрузить и установить блокировщики всплывающих окон, менеджеры закладок, темы пользовательского интерфейса и другие подключаемые модули. Многие из модулей могут повлиять на поведение Ajax-программ непредсказуемым образом, а такое поведение бывает очень сложно воспроизвести и, следовательно, отладить. Простым примером является ситуация, когда пользователь настроил блокировщик всплывающих окон на блокирование новых окон браузера, открывающихся из приложения. На первый взгляд этот подключаемый модуль кажется безвредным, однако он может повлиять на приложение не очевидным образом, например, захватывая содержимое окна браузера и скрывая части приложения.

Mozilla Firefox

Хотя к этому времени было выпущено несколько версий Firefox, в данной статье рассматривается только Firefox 2.0. Firefox очень широко используется разработчиками и продвинутыми пользователями, является браузером номер один для UNIX®-подобных операционных систем, имеет открытый исходный код и считается вторым по популярности после IE.

Firefox имеет быстрый JavaScript-интерпретатор и очень хорошую реализацию различных Web-стандартов. Из-за его дружественности к Ajax мы настоятельно рекомендуем использовать Firefox для большей части Ajax-разработки. Как правило, многие Ajax-разработчики начинают разработку приложения в Firefox, а затем переносят приложение на другие браузеры.

Средства отладки в Firefox

Firefox имеет мощный расширяемый механизм, используемый сообществом при создании большого набора вспомогательных средств для Web-разработки. Однако Firebug (см. раздел "Ресурсы") - самое важное из них (более подробная информация по возможностям Firebug приведена в статье "Отладка Ajax-приложений в Firebug"). Firebug является универсальным расширением, позволяющим:

  • Выполнять отладку JavaScript-кода с точками прерывания, мониторингом переменных и пошаговым прохождением по коду.
  • Анализировать сетевой трафик.
  • Анализировать и подстраивать дерево объектов DOM и CSS различных элементов.

Мощь и гибкость Firebug 1.0 задали ориентиры в Ajax-разработке, а также служат вескими причинами считать Firefox наиболее предпочтительным браузером для разработки.

Браузеры семейства Firefox

Mozilla Gecko (см. раздел "Ресурсы"), программный механизм Firefox, используется в нескольких браузерах (например, Camino). Эти браузеры имеют те же свойства, что и Firefox, если версии Gecko совпадают.

Safari

Safari - это браузер, поставляемый с MacOSX (версия 3 работает также и в Windows®). Хотя он заметно быстрее Firefox и IE7, в Safari отсутствует поддержка стандартов (хотя последние сборки WebKit имеют улучшения; в следующем разделе приведена более подробная информация по WebKit). Отметим также, что сообщество разработчиков Safari заметно меньше, чем сообщество приверженцев Firefox и IE. В результате в Web меньше информации по Safari, а многие библиотеки не достаточно хорошо протестированы.

Средства отладки в Safari

Механизм браузера Safari разработан в рамках проекта с открытым исходным кодом под названием WebKit (см. раздел "Ресурсы"). Для отладки приложения в Safari мы рекомендуем использовать сборку WebKit. Сборка включает:

  • "Голый" браузер с CSS и DOM-анализатором.
  • Drosera: Отладчик JavaScript. Drosera позволяет отлаживать приложения, но по сравнению с Firebug его возможности ограничены.

Если вы настойчивы в своем желании тестировать приложения в Safari, необходимо включить меню Safari Debug, которое позволяет анализировать дерево DOM, CSS, кэш и т.п.

Браузеры, совместимые с Safari

WebKit используется в нескольких браузерах, самым распространенным из которых является OmniWeb.

IDE и инструментальные средства для Ajax

При разработке новых Ajax-приложений вы увидите преимущества использования IDE, поддерживающей все связанные с Ajax технологии и предоставляющей быструю и приятную среду разработки, а также пользовательский интерфейс. Некоторыми из функциональных возможностей, которые надо принимать во внимание при выборе Ajax IDE, являются:

  • Основанное на синтаксисе редактирование (для HTML, CSS, JavaScript и DOM) с такими функциями как автозавершение, цветовое выделение синтаксиса, индикация ошибок и т.д.
  • Наличие документации по различным технологиям.
  • Интегрированный JavaScript-отладчик.
  • Мониторинг сети.
  • Диагностика DOM.
  • Интеграция в общую среду.

Хотя возможен вариант покупки IDE, полностью функциональную Ajax IDE с открытыми исходными кодами предоставляет Eclipse, а также соответствующие подключаемые модули, которые загружаются бесплатно. В данном разделе рассматриваются следующие основанные на Eclipse среды Ajax IDE (вместе с подключаемыми модулями):

  • Eclipse with the Web toolkit
  • Eclipse ATF
  • Aptana

В данном разделе также рассматривается пакет модульного тестирования JsUnit.

Eclipse с Web toolkit

Если вы являетесь Java™-разработчиком, и у вас на сервере есть Java, Eclipse Web toolkit, возможно, самый простой и легкий способ начать Ajax-разработку. Добавление Web tools к Eclipse (см. раздел "Ресурсы") предоставит вам базовую рабочую среду для разработки Web-артефактов и обеспечит редакторами для файлов HTML, CSS и JavaScript.

Обратите внимание на то, что интегрированная среда Eclipse Web tools не ограничивается только Ajax-разработкой, а поддерживает также разработку Web-приложений, выполняющихся, главным образом, на стороне сервера. Предоставляется основная функциональность, такая как подсветка синтаксиса и завершение кода. Возможности отладки и управления объектами DOM, специфичные для задач Ajax-разработки, не предоставляются.

Eclipse ATF

Можно установить и, таким образом, скомбинировать Eclipse Ajax Toolkit Framework (ATF) (см. раздел "Ресурсы") с Eclipse Web toolkit, реализовав мощную среду, поддерживающую все необходимые аспекты Ajax-разработки. ATF предлагает следующие функции:

  • DOM-браузер и CSS-редактор времени исполнения.
  • Отладчик JavaScript (используя программу Mozilla XUL runner).
  • Мониторинг сетевого трафика.
  • Простую интеграцию с библиотеками для общих библиотек через библиотечные профили.
  • Интеграцию с JSLint (см. раздел "Ресурсы") для выполнения проверки корректности JavaScript.

Ценной функциональной возможностью данного инструментального средства является способность запускать, тестировать и анализировать приложение в интегрированной программе XUL runner.

Aptana

Aptana (см. раздел "Ресурсы") - это очень полезная основанная на Eclipse среда с открытым исходным кодом, которую можно загрузить бесплатно. В отличие от ATF, возможности которого специально нацелены на Ajax-разработку, Aptana представляет собой IDE для разработки приложений Web 2.0. Aptana использует Ruby Development Toolkit (RDT), обеспечивая интеграцию Ruby-Eclipse.

Вы можете загрузить Aptana либо как полную Eclipse-среду (что очень сильно все упрощает по сравнению с вариантом ATF), либо как набор подключаемых модулей, добавляемых в предварительно установленную среду Eclipse.

Интегрированная среда Aptana предлагает несколько полезных функциональных возможностей, таких как:

  • Высококачественное руководство пользователя и справочная документация по технологии.
  • Завершенная среда редактирования для Ajax-артефактов с анализом JavaScript-кода, DOM-интеграцией и информацией по совместимости с браузерами.
  • Отладочные возможности (используя внешний браузер Firefox).
  • Базовая интеграция Ajax-библиотек.
  • Система проверки корректности кода, выделяющая потенциальные ошибки.
  • Возможность редактировать файлы в любом месте файловой системы, а также удаленно по протоколу FTP.

Возможно, вы обнаружите, что Aptana - это решение, которое удовлетворяет все ваши потребности и является более простым в установке и изучении, чем ATF.

JsUnit

JsUnit (см. раздел "Ресурсы") - это основанная на JavaScript интегрированная среда модульного тестирования, которая была создана путем переноса JUnit (широко используемой библиотеки модульного тестирования для Java) на JavaScript. JsUnit поддерживает описание тестов для JavaScript-функций и выполнение их внутри среды браузера. Если вы ищете способ выполнять совместимые модульные тесты разработанного кода, JsUnit может быть полезной интегрированной средой.

Интегрированные среды Ajax

В последнее время появилось много интегрированных сред Ajax-разработки, созданных с целью облегчения потенциально утомительных задач. В данном разделе рассматривается несколько интегрированных сред Ajax с открытыми исходными кодами, которые могут облегчить разработку путем:

  • Предоставления набора виджетов, служащих строительными блоками для полнофункциональных пользовательских Web-интерфейсов (UI).
  • Упрощения асинхронного взаимодействия данных и протоколов обмена.
  • Преодоления несовместимости браузеров.
  • Предоставления полезных JavaScript-методов, упрощающих многие общие задачи Ajax-разработки, такие как управление объектами DOM, регистрация событий и др.

Поскольку обзор огромного числа доступных Ajax-сред выходит за рамки данной статьи, мы выбрали только Prototype, script.aculo.us, Dojo и Rico. Более подробный список доступных интегрированных Ajax-сред приведен в "Ajaxian.com 2006 survey" (ссылка приведена в разделе "Ресурсы").

Prototype

Prototype (см. раздел "Ресурсы") - это JavaScript-библиотека, реализующая мощные функции для упрощения Ajax-программирования. Не считаясь сама по себе интегрированной Ajax-средой, она лежит в основе нескольких других интегрированных сред, таких как script.aculo.us, Moo.fx2, Rico и др. Prototype поддерживает:

  • Базовое управление объектами DOM.
  • Ajax-вызовы.
  • Несколько вспомогательных функций.
  • Работу с полями ввода и формами.

Prototype, разработанная Сэмом Стивенсоном (Sam Stephenson), использует стиль программирования Ruby и в настоящее время является проектом с открытыми исходными кодами под лицензией Massachusetts Institute of Technology (MIT) (см. раздел "Ресурсы").

Пример сценария Prototype

Ниже рассмотрен пример того, как использование Prototype может упростить Ajax-программирование. Допустим, требуется создать страницу с разделом, который будет периодически обновляться и отображать самые последние новости. Устанавливается таймер на вызов метода updateNews() один раз в минуту. В методе updateNews() используется Prototype Ajax.Updater для инициирования асинхронного запроса содержимого последних новостей. После получения результата он вставляется как HTML-содержимое элемента div most-recent-news. В листинге 1 приведен один пример многих мощных функций, предоставляемых Prototype.

Листинг 1. Пример Prototype-сценария
<html>
   <head>
      <script src="js/prototype.js" type="text/javascript"></script>
      <script type="text/javascript">
          function updateNews() {
              new Ajax.Updater(
                  {success: 'most-recent-news'},
                  'http://myserver/news/recent-news'
	        );
              setTimeout("updateNews()",60000);
          }
      </script>
    </head>
    <body onload="updateNews()">
        <h1>Recent News</h1>
        <div id="most-recent-news"></div>
    </body>
</html>

Без использования Prototype этот пример сценария потребовал бы намного большего объема кодирования.

Script.aculo.us

Script.aculo.us (см. раздел "Ресурсы") - это проект с открытыми исходными кодами под лицензией MIT. Он основан на Prototype и поставляется с Ruby on Rails. Script.aculo.us является популярной интегрированной средой для разработки полнофункциональных Web-UI Rails-приложений, но его также можно использовать с любыми другими технологиями на стороне сервера. Хотя Script.aculo.us считается довольно облегченной интегрированной средой, он имеет развитые анимационные, а также следующие функциональные возможности:

  • Упрощенное управление объектами DOM с использованием основанного на JavaScript DOM-компоновщика.
  • Поддержка операций "перетаскивания" (drag-and-drop).
  • Несколько элементов управления и виджетов, таких как автозавершение, слайдер (slider) и редактирование по месту (in-place editing).

В листинге 2 приведен пример использования мощных анимационных эффектов Script.aculo.us, когда строка текста при нажатии на нее постепенно исчезает из поля зрения.

Листинг 2. Анимационные эффекты Script.aculo.us
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
...
<div onclick="new Effect.Fade(this)">
    Click here to see me fade out!
</div></html>

Dojo Toolkit

Dojo Toolkit (см. раздел "Ресурсы") - завершенная интегрированная Ajax-среда, решающая широкий диапазон задач. Dojo обеспечивает:

  • Кросс-браузерную библиотеку stdlib для JavaScript.
  • Управление объектами DOM.
  • Систему пакетирования для уменьшения времени и размера загрузки.
  • Богатый и расширяемый набор виджетов.
  • Поддержку "перетаскивания".
  • Поддержку анимации.
  • Очень богатую библиотеку интеграции на стороне сервера.

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

Dojo разрабатывается как проект с открытыми исходными кодами организацией Dojo Foundation и предоставляется под лицензией Academic Free License (см. раздел "Ресурсы"). Как очень активный проект Dojo поддерживается большими корпорациями, такими как IBM, Sun Microsystems, AOL и другими.

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

Рисунок 1. Пример Dojo-интерфейса
Рисунок 1. Пример Dojo-интерфейса

Интегрированная среда Rico

Rico - это интегрированная Ajax-среда с открытыми исходными кодами, предоставляемая под лицензией Apache 2.0 (ссылки на Web-сайт Rico и на описание лицензии Apache 2.0 приведены в разделе "Ресурсы"). Она содержит значительную функциональность в относительно небольшом объеме. Некоторыми из самых важных функциональных возможностей Rico являются:

  • Расширенное управление объектами DOM с использованием шаблонов.
  • Разнообразные виджеты, например, accordion, LiveGrid и ниспадающий список.
  • Поддержка "перетаскивания".
  • Простая анимация.
  • Вспомогательные программы по сглаживанию углов, управлению цветами и другими элементами внешнего вида.
  • Простая интеграция на стороне сервера.

Хотя Rico имеет меньше функций, чем интегрированная среда Dojo, компактный размер Rico может быть преимуществом, если доступные функции удовлетворяют требования вашей UI-разработки. В частности, виджет Rico LiveGrid может очень упростить традиционную задачу создания динамических таблиц.

Путь новичка - начните работать прямо сейчас

Если вы готовы прыгнуть в фургон Ajax-разработки, следующая последовательность действий укажет вам алгоритм для начала работы. (Примечание: В этой последовательности действий в качестве IDE используется Aptana, а в качестве интегрированной Ajax-среды используется Dojo, однако вы можете изменить конфигурацию в соответствии с вашими требованиями.)

  • Загрузите Mozilla Firefox 2.0 и установите подключаемый модуль Firebug.
  • Загрузите и установите Aptana.
  • Прочтите учебное руководство "Освоение Ajax", напишите примеры кода в Aptana. Используйте Firebug для отладки примеров.
  • Загрузите Dojo Toolkit и прочтите учебное руководство по Dojo "Hello World" (см. раздел "Ресурсы").

Резюме и дальнейшие действия

На данный момент вы, вероятно, имеете более чем достаточно информации для размышления об инструментальных средствах для Ajax, а если следовали упомянутой здесь последовательности действий для новичков, то у вас уже есть небольшой практический опыт создания Ajax-приложений. Так что же дальше? Углубленное чтение материалов по Ajax-технологиям, выбор и изучение интегрированной Ajax-среды поможет вам сформировать базовые знания. Имеется большое количество материалов по HTML, JavaScript и CSS (ссылки на учебные руководства W3School, являющиеся прекрасными материалами для начала работы, приведены в разделе "Ресурсы"). Желательно также посетить сайт Ajax Patterns (см. раздел "Ресурсы"). И ничто не поможет вам поскорее начать работу, если вы ее не начнете - напишите приложение самостоятельно.

В следующей статье данной серии мы применим приобретенные знания на практике, разработав простое, основанное на Dojo приложение для чтения блогов. Вы еще не в фургоне Ajax? Скоро будете. Оставайтесь на связи!

Ресурсы

Научиться

Получить продукты и технологии

  • Загрузите IE Developer Toolbar и Microsoft Script Debugger с Microsoft Download Center.(EN)
  • Добавление Eclipse Web tools позволит организовать базовую рабочую среду для разработки Web-артефактов и предоставит редакторы для файлов HTML, CSS и JavaScript.(EN)
  • Дополнительная информация и ссылки для загрузки Eclipse Ajax Toolkit Framework (ATF).(EN)
  • Aptana - полезная Eclipse-среда с открытыми исходными кодами, которую можно загрузить бесплатно.(EN)
  • JsUnit - основанная на JavaScript интегрированная среда модульного тестирования, созданная путем переноса JUnit (распространенной библиотеки модульного тестирования для Java) на JavaScript.(EN)
  • JSLint - JavaScript-программа для поиска проблем в JavaScript-коде.(EN)
  • Prototype - JavaScript-библиотека мощных функций, упрощающих Ajax-программирование.(EN)

Обсудить

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура, XML, Open source
ArticleID=335780
ArticleTitle=Ajax - руководство для растерявшихся: Часть 1. Обзор инструментальных средств и технических приемов Ajax
publish-date=09052008