AJAX. Тонкости Web Setup Project


Оглавление (нажмите, чтобы открыть):

AJAX с помощью jQuery: Руководство для начинающих

Автор/переводчик: Сергей Фастунов

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

Разработка кода для JavaScript для реализации AJAX с нуля является весьма трудоемким и нудным процессом. Однако множество библиотек JavaScript, включая jQuery, имеют отличную высокоуровневую реализацию AJAX в виде набора методов и функций, которые облегчают и ускоряют построение веб сайтов.

В данной серии уроков мы рассмотрим основы построения запросов AJAX с помощью jQuery. Будут раскрыты следующие темы:

  • Что такое технология AJAX? Как она работает? В чем ее преимущества?
  • Как выполнить различные типы запросов AJAX с помощью jQuery?
  • Отправка данных на сервер с помощью запросов AJAX.
  • Обработка и выделение данных из ответов AJAX с сервера.
  • Как настроить обработку AJAX в jQuery и изменить установки по умолчанию?

Примечание: Уроки сконцентрированы на части JavaScript клиентской стороны. Но разработка серверной части также достаточно проста. Для более полной информации следует изучить материалы по языкам программирования серверной стороны, например PHP.

Ajax PRO Desktop: приложение для настоящих PRO

Мы продолжаем создавать профессиональное ПО с человеческим лицом и сегодня представляем Ajax PRO Desktop — новое приложение, которое упростит обслуживание систем Ajax для инсталляторов и инженеров охранных пультов. Теперь с помощью компьютера и Ajax PRO Desktop можно быстро конфигурировать системы, выполнять по запросу клиента отладку датчиков, управлять доступами и просматривать статус охраняемых объектов.
Новое приложение предназначено для macOS, 32 и 64-разрядных версий операционной системы Windows 7/8/10. Мы максимально оптимизировали работу Ajax PRO Desktop, чтобы приложение работало быстро даже на компьютерах со скромными характеристиками.

Платформа Windows OS 7, 8, 10, macOS
CPU Intel / AMD 1,2 ГГц
GPU 3D accelerator
RAM 2 ГБ
ROM 400 Мб

Задачи нового приложения

Удобство . Инженеры охранных пультов и инсталляторы получают в свое распоряжение инструмент для наблюдения за клиентскими хабами и оперативного внесения настроек по запросу клиента.

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

Доступность . Приложение Ajax PRO получило интерфейс, к которому уже успели привыкнуть. Мы с точностью перенесли в Ajax PRO Desktop все функции и возможности мобильного приложения Ajax PRO, чтобы сохранить опыт взаимодействия.

Эволюционность . Ajax PRO Desktop, как и мобильное приложение, будет получать обновления и новые функции. Мы постепенно будем наращивать его возможности.

Что умеет Ajax PRO Desktop

Быстрый поиск . Найти нужный хаб из тысяч можно за секунды: достаточно ввести ID устройства или название объекта.

Детальная информация про объект . В приложении отображается все устройства, которые установлены на объекте, и их статус.

Настройка хаба и датчиков . Изменения параметров устройств происходит дистанционно.

Просмотр событий . В ленте уведомлений отображаются оповещения о событиях, тревогах и действиях пользователей.

Поддержка новых функций . Ajax PRO Desktop позволяет активировать режим групп, настраивать и удалять их.

Управление доступом . В приложении можно легко добавить инсталлятора, который должен ехать на объект для установки или тестирования датчиков.

Часть 1. Настройка среды Ajax с использованием сценария

Разделите уровни вашего приложения для создания понятного и элегантного Web-приложения

Серия контента:

Этот контент является частью # из серии # статей: Полный цикл разработки Ajax-приложений

Этот контент является частью серии: Полный цикл разработки Ajax-приложений

Следите за выходом новых статей этой серии.

Ajax — это часть технологии Web 2.0, привлекающей в настоящее время большое внимание архитекторов, разработчиков и менеджеров продуктов с одной стороны и пользователей Web-приложений с другой стороны. Методика Ajax-программирования включает в себя знаменитую коллекцию надежных технологий, таких как XHTML, JavaScript, CSS и XML Http Request (XHR). Популярные методики доступа к сервисам и обмена данными, такие как Representational State Transfer (REST) и JavaScript Object Notation (JSON), также естественно подходят технологии Ajax. Эта проверенная мощь на стороне клиента может быть скомбинирована с такими технологиями с открытыми исходными кодами как PHP, Python и Ruby, чтобы расширить Ajax на разработку приложений среднего уровня. На уровне данных в эту смесь добавляется база данных с открытыми исходными кодами MySQL.

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

Типичное Web-приложение масштаба предприятия имеет дело с факторами, приводящими к высокой трудоемкости его разработки. Изучая основные строительные блоки выбранных предложений с открытыми исходными кодами, мы не будем учитывать в нашем сценарии такие критичные для корпоративного класса функциональные возможности как защищенность, масштабируемость и доступность — вы должны изучить их, используя другие источники. Все рассуждения в данной статье применимы только к конкретному классу Ajax-приложения, описанному в нашем сценарии. В частности, в данной серии статей предоставляется подробная информация о создании базы данных MySQL, проектировании и разработке логики промежуточного уровня и уровня данных в исполняющей среде PHP, а также о создании реального одностраничного клиентского Ajax-интерфейса, использующего JavaScript. В данную серию статей включены фрагменты исходного кода и показаны все необходимые действия по разработке и тестированию Ajax-приложения в Eclipse и последующему его развертыванию в Firefox (клиентский уровень), Zend PHP (промежуточный уровень) и MySQL (уровень базы данных). Такое всеобъемлющее обсуждение, объединяющее в приложении технологии XHTML, CSS, JavaScript, XHR, DOM, REST, SOAP, JSON, XML, PHP, MySQL и Eclipse, продемонстрирует множество функциональных возможностей, встроенных в упомянутые выше платформы с открытым исходным кодом. В двух словах, данная серия статей знакомит с подходом, приводящим к понятному и элегантному дизайну Web-приложения, предоставляющему отличное разделение уровней приложения.

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

  • Клиентский уровень
  • Промежуточный уровень
  • Уровень данных

На клиентском уровне используются технологии XHTML, CSS, JavaScript и XML Http Request (XHR). Из нескольких упомянутых выше чудесных технологий промежуточного уровня с открытыми исходными кодами в данной серии выбран PHP по причине его простоты и широкого распространения. На уровне данных используется база данных MySQL. Кроме того, в данной серии статей используются такие популярные технологии Web-сервисов как REST, SOAP, JSON и XML. Вы будете использовать все эти технологии в контексте всеобъемлющего сценария.

Установите и настройте исполняющую среду и среду разработки, нужную для создания Ajax-приложения, выполнив действия, описанные в следующих разделах. Затем, вместо обычного приложения Hello World, для разнообразия вы проанализируете и осмыслите не тривиальный сценарий из сферы банковской деятельности. Этот сценарий пояснит использование всех упомянутых технологических компонентов в контексте вымышленного банка, его базы данных, основанного на браузере портала для клиентов банка и реального финансового Web-сервиса сторонней фирмы.

Необходимое программное обеспечение

До разработки и развертывания банковского сценария, состоящего из трех уровней приложений, необходимо сделать выбор следующих составляющих:

  • Web-браузер
  • Сервер базы данных
  • Web-сервер
  • Сервер промежуточного уровня
  • IDE для разработки кода промежуточного уровня
  • IDE для разработки кода клиентского уровня

Из множества доступных предложений с открытым исходным кодом, удовлетворяющих потребности на каждом уровне, для использования в данной серии статей выбраны следующие:

Web-браузер: Mozilla Firefox 2.0.0.4 или выше. Среди множества преимуществ Firefox можно отметить удобство использования, защищенность и настраиваемость при помощи сотен подключаемых приложений. Вы также будете использовать Firebug, подключаемый модуль отладчика приложений для Firefox.

Сервер базы данных: MySQL 5.0.41 или выше. Он работает в режиме клиент/сервер и во встроенном режиме. Написан полностью на C и C++. Доступен в двух редакциях: Enterprise server и Community server. Community server является бесплатным м подходит для банковского сценария данной статьи.

Web-сервер: Apache Web-сервер 2.2.2 является хорошо настраиваемым и расширяемым через модули сторонних разработчиков.

Сервер промежуточного уровня: Zend Core 2.0.1 или выше. Этот бесплатный сервер с открытыми исходными кодами поддерживает PHP 5. Очень хорошо поддерживается сообществом. Работает с Web-сервером Apache и поддерживает такие базы данных как MySQL, IBM DB2® и Oracle. Zend Core for IBM специально настроен на работу с IBM DB2. На рисунке 1 приведено описание Zend Core.

IDE (Integrated Development Environment) промежуточного уровня: Eclipse PDT 0.7 RC3 или выше. PDT — это интегрированная среда PHP Development Tools для платформы Eclipse, включающая все компоненты, необходимые для разработки PHP-приложений. В этом IDE поддерживается также PHP-отладка. Zend, IBM и другие компании перевели эту среду в область технологий с открытым исходным кодом. На момент написания данной статьи это был совсем новый бренд, и он очень хорошо (и своевременно) подошел для разработки логики промежуточного уровня нашего банковского сценария.

IDE клиентского уровня: Aptana Web IDE 0.2.8.14433 или выше. Это бесплатная, кросс-платформенная, основанная на JavaScript среда разработки с открытым исходным кодом для создания Ajax-приложений. Она поддерживает JavaScript, HTML и CSS. Также имеется поддержка отладки JavaScript-сценариев и встроенная поддержка нескольких интегрированных Ajax-сред. Главным образом основана на Eclipse.

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

Рисунок 1. Описание Zend Core

Установка Mozilla Firefox

Выполните следующие действия для установки Mozilla Firefox:

  1. Создайте временный каталог c:\temp\dw-ajax, в котором можете сохранить все установочные файлы для различных программных пакетов.
  2. Загрузите Mozilla Firefox версии 2.0.0.4 или выше с URL Mozilla, приведенного в разделе «Ресурсы», и сохраните его в c:\temp\dw-ajax.
  3. Установите Mozilla Firefox 2.0.0.4, выполнив файл, загруженный на шаге 2:
    1. В мастере установки Mozilla нажмите кнопку Next.
    2. Подтвердите соглашение по лицензированию и нажмите кнопку Next.
    3. Выберите вариант Custom и нажмите кнопку Next.
    4. Проверьте, что отмечены оба варианта: DOM Inspector и Quality Feedback Agent. Нажмите кнопку Next.
    5. Примите папку установки по умолчанию и нажмите кнопку Next.
    6. Первые два варианта (On my Desktop и In my Start Menu Programs Folder) не должны быть отмечены.
    7. После завершения установки отметьте флажок Launch Mozilla Firefox now.
    8. Нажмите кнопку Finish.
    9. При появлении запроса об установке Mozilla Firefox браузером по умолчанию выберите Yes.
    10. Запустите браузер Firefox и перейдите по URL Mozilla Firefox, приведенному в разделе «Ресурсы».
    11. Нажмите кнопку Add-ons вверху страницы.
    12. В поле для поиска на Web-сайте Firefox введите Firebug и нажмите кнопку Search.
    13. В результатах поиска нажмите ссылку Firebug.
    14. Нажмите кнопку Install now; в появившемся диалоговом окне нажмите кнопку Install now.
    15. Нажмите кнопку Restart Firefox.
    16. В Firefox выберите Tools->Firebug->Open Firebug.
    17. Если вы увидите сообщение внизу окна браузера, утверждающее, что Firebug не разрешен, нажмите Enable Firebug.
    18. Закройте браузер Firefox.

Установка MySQL

Выполните следующие действия для установки сервера базы данных MySQL:

  1. Перейдите по URL MySQL, приведенному в разделе «Ресурсы».
  2. Нажмите MySQL Community Server (вы должны переместиться непосредственно на рекомендуемую GA версию).
  3. Загрузите Windows (x86) Zip/Setup.EXE для версии 5.0.41 или выше и сохраните в каталоге c:\temp\dw-ajax (этот .zip-файл содержит только один файл, являющийся исполняемым установочным файлом для MySQL).
  4. Разархивируйте исполняемый установочный файл MySQL из .zip-файла и сохраните его в каталоге c:\temp\dw-ajax.
  5. Запустите исполняемый файл (Setup.exe), разархивированный на шаге 4:
    1. Нажмите кнопку Next.
    2. Выберите тип установки Complete и нажмите кнопку Next.
    3. Нажмите кнопку Install.
    4. Выберите Skip Sign-Up и нажмите кнопку Next.
    5. Отметьте флажок Configure the MySQL Server now и нажмите кнопку Finish. Откроется мастер MySQL Server Instance Configuration Wizard.
    6. Нажмите кнопку Next.
    7. Выберите Detailed Configuration и нажмите кнопку Next.
    8. Выберите Developer Machine и нажмите кнопку Next.
    9. Выберите Select Multifunctional Database и нажмите кнопку Next.
    10. Для InnoDB Tablespace Settings выберите параметры по умолчанию и нажмите кнопку Next.
    11. Выберите Decision Support (DSS)/OLAP и нажмите кнопку Next.
    12. Отметьте оба флажка: Enable TCP/IP Networking и Enable Strict Mode. Нажмите кнопку Next.
    13. Выберите Standard Character Set и нажмите кнопку Next.
    14. Отметьте оба флажка: Install As Windows Service и Include Bin Directory in Windows PATH. Нажмите кнопку Next.
    15. Введите новый пароль пользователя root как webtech и нажмите кнопку Next.
    16. Нажмите кнопку Execute.
    17. Нажмите кнопку Finish.


Установка Web-сервера Apache и PHP-сервера Zend Core

Zend Technologies Ltd. предлагает Zend Core бесплатно. В него входит Web-сервер Apache. Выполните следующие действия для установки Web-сервера Apache и PHP-сервера Zend Core.

Для бесплатной загрузки Zend Core вы должны быть зарегистрированы на Web-сайте Zend. Если вы еще не зарегистрированы, перейдите по URL Zend Core, приведенному в разделе «Ресурсы», и зарегистрируйтесь.

  1. После регистрации на Web-сайте Zend перейдите по URL Zend Core, приведенному в разделе «Ресурсы», и введите свои регистрационные данные для входа на страницу загрузки.
  2. Отметьте флажок Agree to EULA и нажмите кнопку Submit.
  3. В разделе Zend Core Generic загрузите Zend Core Windows x86 (Version v2.0.1 или выше) и сохраните этот .zip-файл в вашем каталоге c:\temp\dw-ajax (этот .zip-файл содержит только один файл, который является исполняемым установочным файлом для Zend Core).
  4. Разархивируйте исполняемый установочный файл Zend Core из .zip-файла и сохраните в вашем каталоге c:\temp\dw-ajax.
  5. Выполните ZendCore-v2.0.1-Windows-x86.exe (или более новую версию):
    1. Нажмите кнопку Next.
    2. Подтвердите лицензионное соглашение и нажмите кнопку Next.
    3. Выберите тип установки Complete и нажмите кнопку Next.
    4. Выберите Skip Sign-Up и нажмите кнопку Next.
    5. Оставьте конечное месторасположение установленным по умолчанию и нажмите кнопку Next.
    6. Выберите Install bundled Apache 2.2.2 и нажмите кнопку Next.
    7. Оставьте порт по умолчанию 80 и нажмите кнопку Next.
    8. Оставьте ассоциации с расширениями файлов установленными по умолчанию и нажмите кнопку Next.
    9. Введите пароль консоли администратора webtech и нажмите кнопку Next.
    10. Установите Zend Network Registration в значение No и нажмите кнопку Next.
    11. Нажмите кнопку Install для начала установки Zend Core и дождитесь ее завершения. После копирования файлов Zend Core программа установки устанавливает распространяемую (redistributable) версию Microsoft Visual C++ на вашей машине. После этого программа установки Zend Core завершается, отображая сообщение с Zend Core Administration URL в диалоговом окне.
    12. Нажмите кнопку OK, чтобы закрыть окно.
    13. Нажмите кнопку Finish, чтобы закрыть последнее диалоговое окно.
    14. Перейдите в каталог c:\Program Files\Zend\Apache2\bin на вашем компьютере и дважды щелкните левой кнопкой мыши на программе ApacheMonitor. В панели задач в системном трее появится пиктограмма Apache Monitor. Эту пиктограмму можно использовать для запуска и останова серверов Apache и Zend.
  6. Настройте Zend Core:
    1. В Windows Start Menu выберите Programs->Zend Core->Zend Core Administration Console.
    2. Введите пароль webtech .
    3. Перейдите в закладку Configuration (см. рисунок 2).
    4. Перейдите в закладку Extensions.
    5. Найдите curl — cURL в списке и щелкните кнопкой мыши над красным кругом области Enable/Disable, для того чтобы красный круг стал зеленым.
    6. Найдите mysqli — MySQL improved в списке и щелкните кнопкой мыши над красным кругом области Enable/Disable, для того чтобы красный круг стал зеленым.
    7. Нажмите кнопку Save Settings в правом верхнем углу страницы.
    8. Нажмите кнопку Logout.
  7. Нажмите пиктограмму Apache в системном трее на панели задач и выберите Apache2 HTTP Server->Restart.
Рисунок 2. Экран настройки Zend Core

Установка PHP Development Tool (PDT) для Eclipse

На момент написания данной статьи PDT имеет статус release candidate и еще не был выпущен в виде полностью отлаженного подключаемого модуля для платформы Eclipse. Для установки и настройки Eclipse PDT выполните следующие действия (PDT доступен на обоих Web-сайтах: Eclipse и Zend; Web-сайт Zend предлагает точно такую же версию, что и Web-сайт Eclipse, дополненную отладочными средствами PHP-кода для Zend):

  1. Перейдите на страницу загрузки Eclipse PDT на сайте zend.com, ссылка на которую приведена в разделе «Ресурсы».
    1. Загрузите версию 0.7 RC3 или выше и сохраните .zip-файл со всем необходимым в каталоге c:\temp\dw-ajax (например: pdt-0.7.0.S20070401-RC3_debugger-0.1.7-all-in-one-win32.zip или выше).
    2. Если вы устанавливаете версию PDT, отличную от pdt-0.7.0.S20070401-RC3, подкорректируйте соответствующим образом приведенные ниже инструкции и название каталога Zend-отладчика в содержимом листинга 1.
  2. Разархивируйте Zip-файл Eclipse PDT в c:\ (например: unzip.exe pdt-0.7.0.S20070401-RC3_debugger-0.1.7-all-in-one-win32.zip -d c:\ ; при этом должен создатся каталог c:\eclipse, содержащий файлы PDT).
  3. Создайте каталог workspace для Eclipse (например: md c:\eclipse\workspace ).
  4. Настройте PDT на работу с библиотеками MySQL:
    1. Перейдите на Web-сайт MySQL PHP connector, ссылка на который приведена в разделе «Ресурсы».
    2. Нажмите ссылку для расширения mysqli (PHP 5.2.0).
    3. Загрузите .zip-файл (например: php_5.2.0_mysqli_5.0.27-win32.zip ) и сохраните его в каталоге c:\temp\dw-ajax.
  5. Разархивируйте .zip-файл в каталог c:\eclipse\plugins\org.zend.php.debug.debugger.win32.x86_0.1.7\resources\php5 ( Unzip.exe php_5.2.0_mysqli_5.0.27-win32.zip -d C:\eclipse\plugins\org.zend.php.debug.debugger.win32.x86_0.1.7\resources\php5 ).
  6. Откорректируйте файл C:\eclipse\plugins\org.zend.php.debug.debugger.win32.x86_0.1.7\resources\php5\php.ini. Замените все его содержимое содержимым листинга 1. Выполните следующие необходимые изменения и сохраните файл:
    1. После замены содержимого вашего файла php.ini объедините первые две строки ниже секции [Zend] следующим образом: extension_dir=C:\eclipse\plugins\org.zend.php.debug.debugger.win32.x86_0.1.7\resources\php5 .
    2. При необходимости укажите корректное название каталога Zend-отладчика для вашей установки Eclipse.
  7. Перейдите в каталог c:\eclipse и запустите Eclipse, выполнив команду eclipse.exe .
  8. В диалоговом окне Workspace Launcher измените workspace на c:\eclipse\workspace и нажмите кнопку OK.
  9. Закройте закладку Welcome в Eclipse IDE.
  10. В Eclipse IDE выберите Window->Open Perspective->Other, выберите PHP и нажмите кнопку OK.
  11. В левом нижнем фрейме IDE выберите вид PHP Functions. Убедитесь в том, что можете просматривать список встроенных функций PHP-библиотеки.
  12. В Eclipse нажмите Window->Preferences:
    1. Разверните и выберите PHP->Debug.
    2. Отметьте флажок First Line и нажмите кнопку Apply.
    3. На этой же странице PHP Debug выберите PHP Servers . , появляющийся в секции Debug Options.
    4. В списке выберите Default PHP Web Server и нажмите кнопку Edit.
    5. Отметьте флажок Publish Projects to this Server.
    6. В поле Directory перейдите в c:\Program Files\Zend\Apache2\htdocs и нажмите кнопку OK (см. рисунок 3).
    7. Нажмите кнопку OK.
    8. Снова нажмите кнопку OK, чтобы закрыть диалоговое окно Preferences.
  13. Выберите Window->Web Browser->Firefox.
Листинг 1. Содержимое файла php.ini
Рисунок 3. Конфигурация Eclipse PDT

Установка Web IDE Aptana

Установка Web IDE Aptana заключается просто в добавлении подключаемого модуля в Eclipse PDT, который вы установили ранее. На момент написания данной статьи Web IDE Aptana имела версию 0.2.8.14433. Для установки самой последней версии Web IDE Aptana для Ajax-разработки выполните следующие действия:

  1. В меню Help Eclipse выберите Software Updates->Find and Install. , чтобы открыть всплывающее окно Install/Update.
    1. Во всплывающем окне Install/Update выберите вариант Search for new features to install и нажмите кнопку Next.
    2. Чтобы настроить новый удаленный сайт на поиск обновлений, нажмите кнопку New Remote Site. . Откроется всплывающее окно New Update Site.
    3. Во всплывающем окне New Update Site введите Aptana в текстовое поле Site Name.
    4. В текстовое поле URL введите URL сайта обновлений Aptana http://update.aptana.com/install/3.2/ и нажмите кнопку OK.
    5. Нажмите кнопку Finish, чтобы открыть окно Updates.
    6. В окне Updates отметьте флажок Aptana update и нажмите кнопку Next.
    7. Отметьте флажок для подтверждения условий лицензионного соглашения и нажмите кнопку Next.
    8. Нажмите кнопку Finish.
    9. Если появится диалоговое окно с Feature Verification, выберите вариант Install All.
    10. Если появится запрос на перезапуск Eclipse, нажмите кнопку Yes.
  2. В Eclipse IDE выберите Window->Open Perspective->Other, затем выберите Aptana и нажмите кнопку OK. Если активизировалась перспектива Aptana, установка выполнилась успешно.

Если все было сделано так, как описано, вы должны иметь полностью работающую среду Eclipse IDE, которую можно использовать для разработки, тестирования и отладки артефактов приложения банковского сценария, таких как XHTML, JavaScript, XHR, код PHP и MySQL. Ваша Eclipse IDE настроена также на работу с PHP-сервером Zend Core. Эта гремучая смесь Eclipse и Zend Core готова удовлетворить все ваши требования по разработке и развертыванию Ajax-приложений. Теперь давайте рассмотрим нетривиальный сценарий, который вы разработаете и развернете в этой мощной среде.

Мастер Йода рекомендует:  Быстрое изучение Bash 30 легких команд для новичков

Ajax-PHP-сценарий

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

  • Клиентский уровень
  • Промежуточный уровень
  • Уровень данных

На клиентском уровне сценарий использует работающие в браузере элементы управления, разрешаемые через XHTML-элементы интерфейса пользователя вместе с XHR и JSON. На промежуточном уровне он использует PHP-технологии, такие как SimpleXML, Services_JSON, процессор HTTP-запросов и PHP SOAP-клиент. На уровне данных он использует SQL и ODBC.

Этот сценарий может также быть сегментирован в соответствии с применяемыми технологическими компонентами:

  • Браузер.
  • PHP-сервер.
  • PHP-клиент Web-сервиса.
  • Сервер базы данных.
  • Основанный на технологии .NET Web-сервис стороннего разработчика, размещаемый в Интернете.

Как можно заметить, сценарий вписывается в основные и важные аспекты Ajax-среды. Среди множества возможных доступных технических решений вы будете выбирать конкретную реализацию, которая максимизирует ваш потенциал изучения как можно большего количества материала из данного сценария. Общей целью проектирования не является усложнение сценария предоставлением пестрых экранов на клиентском уровне. Должное внимание уделяется их упрощению для лучшего освоения вами деталей разработки и развертывания различных артефактов сценария в контексте Eclipse IDE (PDT и Aptana) и Zend Core. Кроме того, сценарий демонстрирует способность к взаимодействию, включая доступ PHP-клиента Web-сервиса к реальному Web-сервису, основанному на технологии .NET и размещенному в Интернете. Как говорилось ранее, концентрируясь только на базовых строительных блоках выбранных систем с открытым исходным кодом, данный сценарий не имеет дела с вопросами защиты, масштабируемости и доступности — вы должны будете потратить некоторое время на их изучение по другим источникам.

Рисунок 4. Банковский сценарий

Детали сценария

Обращайтесь к рисунку 4 по мере работы со следующими разделами для освоения деталей сценария. Данный сценарий выдвигает на первый план реализацию нескольких обычных функций кассира банка, реализованных на Ajax и в PHP-среде. В данном разделе анализируются различные модули, совместно формирующие данный сценарий.

База данных банка (MySQL) — Данные

Информация о клиентах банка хранится в таблице базы данных. Вы создадите таблицу в базе данных MySQL. Это компактный по размеру, достаточно мощный сервер (community edition). Для целей данного упражнения вся информация о клиентах сразу заносится в таблицу базы данных. После этого сохраненные данные о клиентах могут быть извлечены и обновлены через ODBC-драйвер, поставляемый с Zend Core. Тип доступа к базе данных, то есть чтение или запись, будет определяться в зависимости от природы функции кассира банка.

Функции логики банковских операций (PHP-код) — Модель

Самое время подумать о базовой логике банковских операций для реализации функций кассира банка. В данном сценарии вы должны обеспечить поддержку следующих функций кассира банка:

  • Получить информацию о счетах всех клиентов банка.
  • Зачислить деньги на конкретный счет.
  • Списать деньги с конкретного счета.
  • Получить сводный отчет по конкретному счету.


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

Интерфейс пользователя Bank Portal (Ajax) — Представление

А теперь обратите внимание на реализацию пользовательского интерфейса для кассиров банка, инициирующих четыре базовые функции. Доступ к логике базовых банковских функций, заключенной в PHP-код, может осуществляться из «толстого» или «тонкого» клиента. В данном сценарии реализуется одностраничный интерфейс пользователя браузера с использованием технологии Ajax для кассиров банка.

Когда на промежуточном уровне используется PHP, нормальной практикой является формирование необходимого XHTML, CSS и JavaScript-кода в PHP-коде. Это означает, что код портала банка будет передаваться только во время загрузки клиентской программы. Все элементы пользовательского интерфейса будут кодироваться на XHTML и CSS, а логика на стороне клиента — на JavaScript. Все эти артефакты (XHTML, CSS и JavaScript) вместе будут содержать все элементы пользовательского интерфейса, необходимые для портала банка в данном сценарии. Это значит, что Web-сервер Apache должен передать в браузер содержимое, относящееся к пользовательскому интерфейсу клиента, только один раз. Такая одноразовая передача кода в браузер выполняется при посещении кассиром банка URL данного приложения. Впоследствии клиентское приложение портала банка контактирует с сервером только для обмена данными, а не для обмена содержимым представления, таким как XHTML, CSS и JavaScript.

Это отличается от обычной практики — парадигмы Нажми и Жди, когда браузер контактирует с сервером промежуточного уровня для загрузки содержимого представления при каждом действии пользователя. Одной из выдающихся функциональных возможностей одностраничных Ajax-приложений является отсутствие последующих извлечений страницы с сервера после начальной загрузки содержимого представления, происходящего во время запуска приложения. С этого момента одностраничное клиентское Ajax-приложение контактирует с логикой сервера промежуточного уровня только для обмена необходимыми для приложения данными. Это приводит к компактной логике промежуточного уровня, концентрирующейся полностью на бизнес-логике, а не на генерировании дополнительной нагрузки при передаче содержимого представления в браузеры. Такой подход прекрасно отделяет прикладные уровни, что приводит к понятному и элегантному дизайну Web-приложения.

Модуль логики банковских операций (PHP-код) — Контроллер

Обсудив пользовательский интерфейс браузера, пора подумать о том, как будут выполняться по сети банковские операции, выбранные кассиром банка. В данном сценарии вы передаете выбранную кассиром команду Bank Action вместе с необходимыми входными данными в модуль, написанный на PHP, который выступает как брокер/посредник между браузером и базовой банковской логикой, скрытой в PHP-модуле (как было описано в предыдущем разделе). PHP-модуль Bank Actions предназначен для поддержки активизации сервисных функций промежуточного уровня в REST-стиле. PHP-модуль Bank Actions принимает команду Action кассира банка и инициирует вызов функции в PHP-модуле Bank Logic для получения требуемых результатов. Для доступа к базе данных и предоставления результатов активизируется соответствующая банковская логика. После возврата управления из модуля Bank Logic модуль Bank Actions передает результаты обратно в браузер в виде данных в формате JSON. Таким образом, PHP-модуль Bank Actions выступает как диспетчер запросов кассира банка для вызова соответствующей функции модуля Bank Logic, обрабатывающей эти запросы.

XML-клиент Web-сервиса (SOAP-доступ из PHP в .NET) — Помощник

Кроме работы брокером/посредником PHP-модуль Bank Actions выступает также как PHP SOAP-клиент Web-сервисов для получения текущего курса акций, хранящихся в портфеле данного клиента. Это хорошая возможность научиться генерировать клиентов Web-сервисов на PHP. В данном сценарии PHP-модуль Bank Actions инициирует вызов (SOAP XML) реального удаленного Web-сервиса, размещенного в Интернете. Этот Web-сервис является Web-сервисом, основанным на технологии .NET, что позволяет вам получить опыт работы с функциональными возможностями PHP по взаимодействию. Вы также познакомитесь с синтаксическим анализом XML при помощи PHP SimpleXML API.

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

Главные задачи сценария

Во второй и третьей частях данной серии статей вы выполните приведенные ниже задания, доведя сценарий до состояния, когда будет можно его запустить, продемонстрировать работу и изучить используемые технологии его разработки в Eclipse IDE и развертывания в Zend Core:

  • Задание 1: Создать таблицу базы данных для хранения счетов клиентов банка.
  • Задание 2: Создать PHP-модуль, выполняющий нужную бизнес-логику и формирующий обращения к базе данных.
  • Задание 3: Создать XHTML и CSS-артефакты для предоставления одностраничного пользовательского Web-интерфейса, использующего технологию Ajax.
  • Задание 4: Создать JavaScript-модуль, который будет хранить всю клиентскую логику и логику асинхронного взаимодействия для обмена данными с сервером.
  • Задание 5: Создать PHP-модуль, который будет содержать код SOAP-клиента Web-сервиса для удаленного Web-сервиса, предоставляющего курсы акций.
  • Задание 6: Создать PHP-модуль, выступающий как REST-сервис, работая интерфейсом вызовов бизнес-логики для двух других PHP-файлов.
  • Задание 7: Объединить все артефакты, развернуть и запустить Ajax-решение, созданное для банковского сценария.

Заключение

Простота и низкая стоимость являются причиной распространения революционной Web-платформы среди миллионов пользователей по всему миру. В частности, инструментальные средства с открытым исходным кодом Eclipse и Zend Core совместно предлагают огромные возможности для организаций, рассматривающих возможность миграции на платформы с открытым исходным кодом с проприетарных платформ, таких как среда .NET. Для подобного рода пользователей эти предложения предоставляют отличную основу с нулевой стоимостью для экспериментирования, не затрагивая существующую инфраструктуру. Следите за выходом второй части данной серии статей, чтобы приступить к реальной и интересной Ajax-PHP-разработке. А пока познакомьтесь поближе с возможностями подключаемых модулей Eclipse PDT, Aptana и исполняющей системой Zend Core.

Технология AJAX: будущее веб-приложений уже наступило

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

Долгое время такая «магия» была недоступна программистам, для подгрузки данных с сервера применялись исключительно технологии, связанные с перезагрузкой страниц с изменением параметров запросов.

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

Простой пример. Возьмем пару строк ХТМЛ-кода:

И добавим в них jQuery-код (технология, основанная на AJAX):

В результате этого опыта вы можете наблюдать, как ХТМЛ-документ подгружается в определённый ID «на лету», без перезагрузки.

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

Классическая система построения веб-приложений подразумевает введение пользователем адреса страницы с набором параметров, передаваемых методами GET (Набор параметров после «знака вопроса» в адресной строке) или POST. Браузер обращается к серверу с этим запросом, получает ответ и расшифровывает его. Если это ХТМЛ-документ, он отображает его на экране. Таким образом, каждое действие пользователя приводит к полной загрузке всего кода страницы с сервера.

При помощи AJAX мы можем немного упростить схему: к серверу отправляются запросы, ответами на которые будут не целые веб-страницы, а их фрагменты или стандартизированные коды, которые веб-приложение конвертирует в наглядный вид при помощи скриптов на клиентской стороне. К примеру, у нас есть форма, где данные отображаются в таблице. С помощью аякс-запроса можно получить данные с сервера в виде XML-пакета, а джава-скрипт на странице «разберет» этот код и превратит в табличный вид.

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

Правила хорошего тона при использовании AJAX

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

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

Использование Microsoft Ajax Minifier с проектом веб-настройки и контролем источника

I’ve just started investigating the Microsoft Ajax Minifer 4.0 for use with a Visual Studio 2008 Web Application I work on. It’s proven easy enough to hook it into the .csproj file so it produced .min.js files for all scripts, however I’m stumped as to how to integrate this with the Web Setup project & Source Control.

По сути, я хочу, чтобы результирующие файлы .min.js, включенные в проект Web Setup, не включили их в Source Control, потому что:

  1. Чтобы проверить их до того, как выполняемая сборка станет больной (майнинг не может их модифицировать, если они не были извлечены).
  2. Поскольку они создаются как «артефакт сборки», просто кажется, что неверно , чтобы они были сохранены под контролем источника.

The only option I’ve managed to come across so far is to explicitly include the .min.js files as part of the Setup project by right clicking on the Web Setup project and choosing «Add > File», and then having the relevant folder hierarchy duplicated in «File System on Target Machine» so that I can force the file to the correct location. This is neither elegant or simple/robust as:

  1. Мне нужно вручную вручную добавить каждый миниатюрный файл JS в проект Web Setup
  2. Сохранять копию соответствующей структуры каталогов как в проекте веб-приложения, так и в проекте веб-настройки
  3. Не забудьте добавить новые мини-версии js-файлов в проект Web Setup

Технология AJAX для создания современных веб-сайтов

Содержание статьи

В покере есть такая начальная комбинация карт — туз и валет. Ее называют «AJAX». Если она выпадает при раздаче, то шансы на выигрыш очень велики. Существует одноименная компьютерная технология, которая обещает стать козырной картой в колоде любого сайта.

Теория

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

  • язык разметки гипертекста HTML, а лучше XHTML;
  • каскадные таблицы стилей CSS;
  • объектную модель DOM;
  • язык программирования на стороне клиента, обычно
    JavaScript;
  • объект XMLHttpRequest для обмена данными с сервером;
  • XML для формирования данных, либо другой формат, например
    JSON.

Если в вышеперечисленном списке встретились незнакомые слова, то не стоит отчаиваться — я поясню их, когда это понадобится.

Общая схема работы

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

Общая схема работы веб-страницы на AJAX

XMLHttpRequest

Для того чтобы написать наше первое приложение – интерактивную страничку на AJAX, нам надо научиться пользоваться объектом XMLHttpRequest. Что может быть проще, чем создать объект нужного класса? Но вспомним главную беду веб-программистов: у всех пользователей разные браузеры. Microsoft Internet Explorer поддерживает XMLHttpRequest в виде ActiveX-объекта Microsoft.XMLHTTP, остальные же браузеры считают его нативным, и проблем возникнуть не должно. Теперь алгоритм создания объекта XMLHttpRequest прояснен. Сначала определяем браузер, потом создаем объект нужным нам образом:

function createHttpRequest() <
var httpRequest;
var browser = navigator.appName;

if (browser == «Microsoft Internet Explorer») <
httpRequest = new ActiveXObject(«Microsoft.XMLHTTP»);
> else <
httpRequest = new XMLHttpRequest();
>


Что умеет делать этот объект? Самой главной функциональностью для нас будет возможность отправлять запросы на сервер и обрабатывать ответы в асинхронном режиме. Нам придется использовать метод установки параметров соединения open и метод отправки запроса send. Также мы задействуем свойство onreadystatechange для установки обработчика получения ответа на запрос. Полный список свойств и методов XMLHttpRequest можно посмотреть в таблицах «Методы класса XMLHttpRequest» и «Свойства класса XMLHttpRequest».

Методы класса XMLHttpRequest

отменяет текущий запрос;

возвращает полный список
HTTP-заголовков в виде строки;

возвращает значение
указанного заголовка;

open( method, URL, async, userName, password )

определяет метод, URL и
другие опциональные параметры запроса;
параметр async определяет, происходит ли
работа в асинхронном режиме;

отправляет запрос на
сервер;

setRequestHeader( label, value )

добавляет HTTP-заголовок к
запросу.

Свойства класса XMLHttpRequest

обработчик события, которое происходит при каждой смене состояния объекта;

возвращает текущее состояние объекта (0 — неинициализирован, 1 — открыт, 2 – отправка данных, 3 – получение данных и 4 – данные загружены);

текст ответа на запрос;

текст ответа на запрос в виде
XML, который затем может быть распарсен посредством
DOM;

возвращает HTTP-статус в виде числа (404 – «Not Found», 200 – «OK» и т.д.)

возвращает статус в виде строки («Not Found», «OK» и т.д.)

Теперь, я думаю, ты достаточно осведомлен и готов писать метод отправки запроса. В качестве параметров мы будем передавать ему адрес, на который идет запрос (я назвал этот параметр «file», так как использовал относительные адреса), идентификатор HTML-элемента — _resultId, в котором будем отображать результат, и обработчик ответа на данный запрос — getRequestProc. Реализация проста, как арбуз: определяем параметры соединения, устанавливаем обработчик и посылаем запрос с пустым телом на сервер.

function sendRequest(file, _resultId, getRequestProc) <
result > document.getElementBy ;
httpRequest.open(‘get’, file);
httpRequest.onreadystatechange = getRequestProc;
httpRequest.send(null);
>

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

function getRequest() <
if (httpRequest.readyState == 4) <
document.getElementBy > >
>

Теперь добавим переменных и упакуем все в один файл
ajax.js:

var httpRequest = createHttpRequest();
var result ;

Скажи миру: «Привет»

Раз библиотека готова, можно попробовать ее использовать. Вначале скажем миру «Привет», а затем модернизируем приложение для работы с динамическими табами (вкладками).

Введение в Ajax для веб-приложений Java

В этом документе содержится введение в Ajax и описываются некоторые из функций в IDE NetBeans, позволяющий сделать программирование более быстрым и более эффективным процессом при работе с технологиями, связанными с Ajax. На примере низкоуровневых функциональных возможностей Ajax продемонстрирована разработка простого приложения с функцией автозаполнения текстового поля. В документе использованы материалы статьи Грега Мюррея (Greg Murray) и демонстрационное приложение из руководства Использование Ajax при помощи технологии Java.

Ajax – это аббревиатура, означающая «Асинхронный JavaScript и XML» (Asynchronous JavaScript and XML). Основное назначение Ajax состоит в предоставлении веб-приложению возможности эффективной обработки взаимодействия между пользователем и веб-страницей, при этом значительно снижаются требования к обновлению или полной перезагрузке страницы при каждом взаимодействии с пользователем. Такой подход предоставляет широкие возможности при использовании браузера (аналогичные возможностям настольного приложения или веб-приложения на основе подключаемого модуля). Обработка взаимодействия Ajax осуществляется асинхронно в фоновом режиме. Благодаря этому пользователь может продолжать работу со страницей. Взаимодействие Ajax инициируется посредством кода JavaScript. После выполнения взаимодействия Ajax код JavaScript обновляет исходный текст HTML для страницы. Изменения вносятся немедленно без необходимости обновления страницы. Взаимодействия Ajax могут использоваться для выполнения таких задач, как проверка правильности формата вводимых записей на основе серверной логики (непосредственно во время их ввода пользователем), извлечение подробных данных из сервера, динамическое обновление данных на странице и передача элементов форм страницы.

Содержание

Для работы с этим учебным курсом требуются программное обеспечение и ресурсы, перечисленные ниже.

Программное обеспечение или материал Требуемая версия
IDE NetBeans, Java EE bundle 7.3, 7.4, 8.0
Комплект для разработчика на языке Java (JDK) 7 или 8
Сервер GlassFish
или
Сервер Tomcat
Open Source Edition 3.1.x или 4.x

, версия 7.x или 8.x

Примечания

  • Установка Java EE в IDE позволяет при необходимости установить сервер GlassFish и контейнер сервлетов Apache Tomcat.
  • При этом предполагается, что читатель обладает практическими знаниями в области различных используемых технологий (т.е. HTML, CSS, JavaScript, Java и JSP). В этом документе приведен обзор функциональных возможностей, предоставляемых кодом, однако он не содержит каких-либо пояснений относительно кода на более детальном уровне.
  • Если необходимо сравнить проект с работающим решением, можно загрузить демонстрационное приложение.

Обзор приложения

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

Реализация функции автозавершения в поле поиска может служить примером возможностей, предоставляемых Ajax. Ajax использует объект XMLHttpRequest для асинхронной передачи запросов и ответов между клиентом и сервером. На следующем рисунке представлена блок-схема операций связи, происходящих между клиентом и сервером.

Для описания потока операций на блок-схеме можно использовать следующие действия.

  1. Пользователь инициирует событие, например, отпускает клавишу при наборе имени. Это приводит к вызову функции JavaScript, которая инициализирует объект XMLHttpRequest .
  2. Объект XMLHttpRequest настроен с учетом параметра запроса, который включает идентификатор элемента управления, инициировавшего событие, а также произвольное значение, введенное пользователем. Затем объект XMLHttpRequest выполняет асинхронный запрос к веб-серверу.
  3. На веб-сервере осуществляется обработка этого запроса с использованием соответствующего объекта, например сервлета или прослушивающего процесса. Из хранилища данных извлекаются необходимые данные и подготавливается ответ, содержащий данные в форме документа XML.
  4. Наконец, объект XMLHttpRequest получает данные XML с использованием функции ответного вызова, выполняет их обработку и обновляет модель DOM (Document Object Model, объектная модель документов) HTML для отображения страницы, содержащей новые данные.

В данном учебном курсе описан способ создания варианта автозаполнения путем выполнения потока операций процесса, показанного на рисунке выше. Сначала на стороне клиента создаются файлы для страницы представления данных и функции, необходимые для генерации объекта XMLHttpRequest . Затем выполняется настройка на стороне сервера, заключающаяся в создании хранилища данных и бизнес-логики с использованием технологий на основе Java. Наконец, на стороне клиента реализуется функция обратного вызова callback() и другие функциональные возможности JavaScript, необходимые для обновления DOM HTML.

Программирование на стороне клиента: часть 1

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

  1. Выберите команду «Файл» > «Новый проект». В области «Категории» выберите «Java Web». В области «Projects» (Проекты) выберите «Web Application» (Веб-приложение) и нажмите кнопку «Next» (Далее).
  2. На экране «Имя и расположение» введите MyAjaxApp в поле «Имя проекта». Поле «Project Location» позволяет указать местоположение проекта. Для всех остальных параметров примите значения по умолчанию и нажмите кнопку «Далее».
  3. На панели «Сервер и параметры настройки» выберите сервер, на котором требуется выполнить развертывание приложения. В списке представлены только те серверы, которые зарегистрированы в среде IDE.
  4. Подтвердите остальные значения по умолчанию и нажмите кнопку «Готово». Проект создается в файловой системе и открывается в среде IDE.

При создании веб-проектов на основе Java автоматически создается сценарий сборки Ant, отвечающий за компиляцию проекта, что позволяет немедленно развернуть и запустить его на сервере, зарегистрированном в среде IDE.

В редакторе исходного кода среды IDE создается и открывается страница ввода по умолчанию. В зависимости от целевого сервера эта страница ввода будет иметь вид index.jsp или index.html .

Мастер Йода рекомендует:  Гламурная ретушь

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

В окне «Проекты» щелкните правой кнопкой мыши узел проекта и выберите команду «Выполнить».

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

Работа с редактором HTML

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

Одним из преимуществ использования среды IDE является то, что используемый редактор обеспечивает возможность применения функции автозавершения кода, что позволяет опытным пользователям значительно увеличить свою производительность при написании кода. Редактор исходного кода среды IDE обеспечивает адаптацию к применяемой технологии благодаря чему при нажатии сочетания клавиш автозавершения кода CTRL+ПРОБЕЛ (при работе со страницей HTML) пользователю предлагаются варианты тегов HTML и атрибутов. Далее мы увидим, что то же самое справедливо и для других технологий, например, CSS и JavaScript.

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

Для отображения крупных значков (как в примере) необходимо щелкнуть палитру правой кнопкой мыши и выбрать пункт «Отображать крупные значки».

на «Автоматическое завершение с использованием AJAX» Для страницы-указателя создание какого-либо кода на стороне сервера не требуется, так что можно удалить строки, созданные по умолчанию. Теперь должна появиться страница-указатель, аналогичная представленной ниже.
Для описания назначения текстового поля следует добавить соответствующий пояснительный текст. Непосредственно под тегами

можно скопировать и вставить следующий текст:
Добавьте к странице форму HTML. Для этого можно использовать элементы, содержащиеся в палитре среды IDE. Если палитра не открыта, выберите в главном меню «Окно» > «Палитра». Затем перейдите к узлу «Формы HTML», выберите элемент «Форма» и перетащите его на страницу под только что добавленные теги

. Появится диалоговое окно «Вставить форму». Введите следующее:


  • Действие: autocomplete
  • Method: GET;
  • Имя: autofillform

Нажмите кнопку «ОК». Теги HTML

  • В первый столбец первой строки таблицы введите следующий текст (изменения выделены полужирным шрифтом):
  • Во второй столбец первой строки вместо перетаскивания поля «Ввод текста» из палитры введите указанный ниже код (изменения выделены полужирным шрифтом): При вводе кода можно использовать встроенную в среду IDE функцию автозавершения кода. Например, введите , а затем нажмите CTRL+ПРОБЕЛ. Список предлагаемых вариантов выбора отображается под курсором, а в расположенном выше поле появляется описание выбранного элемента. Для получения возможных вариантов выбора при написании кода достаточно в любой момент нажать в редакторе исходного кода сочетание клавиш CTRL+ПРОБЕЛ. Кроме того, при наличии единственного возможного варианта выбора нажатие CTRL+ПРОБЕЛ приведет к автоматическому завершению кода с использованием элемента с этим именем.
  • Атрибут onkeyup , введенный выше, указывает на функцию JavaScript с именем doCompletion() . Эта функция вызывается при каждом нажатии клавиши в текстовом поле формы и соответствует вызову JavaScript на приведенной выше блок-схеме Ajax.

    Работа с редактором JavaScript

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

    Возможность автозавершения кода JavaScript автоматически предоставляется при кодировании в файлах .js , а также внутри тегов

    Для быстрого перехода между страницами, открытыми в редакторе исходного кода, можно воспользоваться сочетанием клавиш CTRL+TAB.

  • Вставьте вызов init() после открывающего тега . Это обеспечит выполнение вызова init() при каждой загрузке страницы.
  • Роль doCompletion() состоит в следующем:

    • создание URL-адреса к местоположению, содержащему данные, которые могут использоваться на стороне сервера;
    • инициализация объекта XMLHttpRequest ;
    • запрос объекта XMLHttpRequest для передачи асинхронного запроса в сервер.

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

    Следует отметить, что объект XMLHttpRequest фактически создается с помощью функции initRequest() , которая вызывается функцией doCompletion() . Эта функция позволяет выполнять проверку возможности распознавания браузером запроса XMLHttpRequest , и – в случае положительного ответа – создавать объект XMLHttpRequest . В противном случае, с ее помощью выполняется проверка на ActiveXObject ( XMLHttpRequest для Internet Explorer 6), и если результат идентификации является положительным, создается ActiveXObject .

    При создании объекта необходимо определить три параметра XMLHttpRequest : URL-адрес, метод HTTP ( GET или POST ) и допустимость использования асинхронного взаимодействия. В вышеупомянутом примере эти параметры определяются следующим образом:

    • URL-адрес autocomplete и текст, введенный пользователем в поле complete-field :
    • GET означает, что взаимодействия HTTP используют метод GET ;
    • true означает, что взаимодействие является асинхронным:

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

    Затем следует определить функцию callback() . Взаимодействие HTTP инициируется при вызове XMLHttpRequest.send() . Это действие соответствует запросу HTTP, который передается на веб-сервер (см. представленную выше блок-схему ).

    Программирование на стороне сервера

    В среде IDE предусмотрена полная поддержка серверного веб-программирования. Наряду с базовой поддержкой редактором многих популярных языков программирования и написания сценариев, поддерживаются также веб-службы, такие как SOAP, REST, SaaS, а также платформы, ориентированные на MVC, например JSF, Spring и Struts. Несколько подключаемых модулей NetBeans доступны в портале подключаемых модулей NetBeans для платформ под управлением Ajax, включая GWT и Struts2.

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

    Создание хранилища данных

    Для данного простого приложения создается класс с именем ComposerData , в котором данные о композиторах содержатся в хранилище HashMap . В HashMap можно сохранять пары связанных элементов в парах ключевых значений. Кроме того, следует создать класс Composer , который инициирует извлечение сервлетом данных из записей, содержащихся в хранилище HashMap .

    1. Щелкните правой кнопкой мыши узел проекта в окне «Проекты» и выберите команду «Создать» > «Класс Java».
    2. Дайте классу имя ComposerData и введите com.ajax в поле «Пакет». При этом создается новый пакет, в который будет включен этот класс, а также другие классы, которые будут созданы позже.
    3. Нажмите кнопку «Завершить». Последует создание и открытие класса в редакторе исходного кода.
    4. В редакторе исходного кода вставьте следующий код:

    Вы увидите, что в левом поле редактора выводится предупреждение о том, что не удается найти класс Composer. Выполните следующие шаги для создания класса Composer .

    1. Щелкните правой кнопкой мыши узел проекта в окне «Проекты» и выберите команду «Создать» > «Класс Java».
    2. Дайте классу имя Composer и выберите com.ajax в раскрывающемся списке поля «Package». Нажмите кнопку «Завершить».

    После нажатия кнопки ‘Готово’ в IDE создается класс, а файл открывается в редакторе исходного кода.

  • В редакторе исходного кода вставьте следующий код:
  • После создания класса Composer, если посмотреть на класс ComposerData в редакторе, вы увидите, что предупреждения больше не отображаются. Если в ComposerData по-прежнему отображаются аннотации с предупреждениями, можно попытаться устранить ошибку путем добавления отсутствующих операторов импорта.

    Создание сервлета

    Создайте сервлет для обработки URL-адреса autocomplete , получаемого при входящем запросе.

    1. Щелкните правой кнопкой мыши узел проекта в окне ‘Проекты’ и выберите ‘Создать’ > ‘Сервлет’, чтобы открыть мастер создания сервлетов. (Выберите ‘Другой’ и выберите ‘Сервлет’ в меню ‘Веб-категория’, если сервлет не отображается по умолчанию во всплывающем меню).
    2. Дайте сервлету имя AutoCompleteServlet и выберите com.ajax в раскрывающемся списке поля «Package». Нажмите кнопку ‘Далее’.
    3. На панели ‘Настройка развертывания сервлета’ измените шаблон адреса URL /autocomplete таким образом, чтобы он соответствовал адресу URL, заданному ранее в объекте XMLHttpRequest .

    Использование этой панели позволяет пропустить этап добавления дополнительных сведений вручную к дескриптору развертывания.

  • При желании выберите «Добавить информацию о сервлете в дескриптор развертывания». После выполнения этих действий созданный проект получится таким же, как загруженный пример. В последней версии среды IDE сервлет по умолчанию регистрируется аннотацией @WebServlet вместо регистрации в дескрипторе развертывания. Тем не менее, проект будет работать, если использовать аннотацию @WebServlet вместо дескриптора развертывания.
  • Нажмите кнопку «Завершить». Сервлет будет создан и открыт в редакторе исходного кода.
  • Единственными методами, которые следует переопределить, являются метод doGet() для определения обработки сервлетом запроса autocomplete GET и метод init() , который должен инициировать ServletContext для того, чтобы сервлет имел доступ к другим классам приложения после его запуска.

    Существует возможность переопределения методов из родительских классов с помощью контекстного меню «Вставить код» в среде IDE. Реализуйте init() , выполнив следующие шаги.

    1. Поместите курсор в нижней части объявления класса AutoCompleteServlet в редакторе исходного кода. Нажмите ALT+INS (CTRL+I в Mac ОS) для открытия контекстного меню «Создать код».
    2. Выберите команду «Переопределить метод». В появившемся диалоговом окне отображаются все родительские классы сервлета AutoCompleteServlet . Разверните узел GenericServlet и выберите init(Servlet Config config) .
    3. Нажмите кнопку «ОК». Метод init() добавится в редактор исходного кода.
    4. Добавьте переменную для объекта ServletContext и измените метод init() (изменения выделены полужирным шрифтом):
    5. Добавьте оператор импорта для объекта ServletContext . Это можно сделать, выбрав значок лампочки, который отображается на экране в левом поле редактора исходного кода.

    Метод doGet() должен преобразовать URL-адрес запроса, извлечь данные из хранилища данных и подготовить ответ в формате XML. Следует отметить, что объявление метода было сгенерировано при создании класса. Для просмотра, возможно, потребуется расширить методы HttpServlet, щелкнув значок развертывания в левом поле ( ).

    1. Добавьте к классу следующие объявления переменных в нижней части объявления класса AutocompleteServlet : При этом создается хранилище HashMap , включающее все данные о композиторах, которое затем используется методом doGet() .
    2. Выполните прокрутку вниз до метода doGet() и реализуйте его следующим образом:

    Итак, на этом примере создания сервлета можно убедиться, что написание кода на стороне сервера для обработки с использованием Ajax не требует каких-либо новых знаний. Для случаев, когда требуется обмен документами XML, тип содержимого ответа должен иметь значение text/xml . Кроме того, Ajax позволяет осуществлять обмен простыми текстами или даже фрагментами JavaScript, которые могут анализироваться или выполняться с использованием функции обратного вызова на стороне клиента. Обратите внимание на то, что некоторые браузеры могут кэшировать результаты, следовательно, может потребоваться установка заголовка HTTP «Cache-Control» на no-cache .

    В этом примере сервлет генерирует документ XML, в котором содержатся все композиторы, имя или фамилия которых начинается с введенных пользователем символов. Этот документ соответствует данным XML, описанным в приведенной выше блок-схеме . Ниже приведен пример документа XML, который возвращается в объект XMLHttpRequest :


    После завершения кода приложения можно воспользоваться функцией HTTP Monitor среды IDE для просмотра возвращенных данных XML.

    Программирование на стороне клиента: часть 2

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

    Добавление функциональных возможностей обратного вызова

    Асинхронный вызов функции обратного вызова выполняется на определенных этапах взаимодействия HTTP – при изменении свойства readyState объекта XMLHttpRequest . В разрабатываемом приложении в качестве функции обратного вызова используется callback() . Следует помнить о том, что callback в doCompletion() была определена как свойство XMLHttpRequest.onreadystatechange для функции. Теперь можно реализовать функцию обратного вызова следующим образом.

    1. Откройте javascript.js в редакторе исходного кода и введите следующий код.

    Значение «4» состояния readyState означает успешное выполнение взаимодействия HTTP. Интерфейс API для XMLHttpRequest.readState указывает на наличие 5 возможных значений, которые могут быть использованы при настройке. Это:

    Значение readyState Определение состояния объекта
    не инициализировано
    1 загрузка
    2 загружено
    3 интерактивный режим
    4 выполнено

    Обратите внимание, что функция parseMessages() вызывается, только если XMLHttpRequest.readyState находится в состоянии «4», а status – определение кода состояния HTTP запроса – имеет значение «200», что указывает на успешное выполнение. Метод parseMessages() будет определен далее в разделе Обновление модели DOM HTML.

    Обновление модели DOM HTML

    Функция parseMessages() позволяет выполнять обработку входящих данных XML. При этом, в указанной функции используются несколько вспомогательных функций, например appendComposer() , getElementY() и clearTable() . Кроме того, необходимо ввести новые элементы для страницы-указателя, например, вторую таблицу HTML, которая служит в качестве поля автозавершения, и идентификаторы для элементов, обеспечивающие возможность вызова в javascript.js . Наконец, следует создать новые переменные, соответствующие идентификаторам элементов на странице индекса, инициализировать их в предварительно реализованной функции init() и добавить функциональность, которая требуется при каждой загрузке страницы индекса.

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

    1. Откройте страницу индекса в редакторе исходного кода и введите указанный ниже код во вторую строку предварительно созданной таблицы HTML. Вторая строка таблицы содержит еще одну таблицу HTML. Эта таблица представляет поле автозавершения, используемое для автоматического ввода полных имен композиторов.
    2. Откройте javascript.js в редакторе исходного кода и добавьте к первому фрагменту файла три следующих переменных:
    3. Добавьте следующие строки (выделенные полужирным шрифтом) к функции init() . Одной из целей init() является предоставление доступа к элементам страницы индекса для других функций, используемых в целях изменения DOM страницы индекса.
    4. Добавьте appendComposer() в javascript.js . Эта функция позволяет создавать новую строку таблицы и вставлять в нее ссылку на композитора с использованием данных, передаваемых в функцию посредством соответствующих трех параметров, а затем вставлять эту строку в элемент complete-table страницы-указателя.
    5. Добавьте getElementY() в javascript.js . Указанная функция применяется для определения вертикальной позиции исходного элемента. Это является необходимым, поскольку фактическое расположение элемента при его отображении часто зависит от типа и версии браузера. Следует отметить, что при отображении на экране элемент complete-table , содержащий имена композиторов, перемещается в нижнюю правую часть таблицы, в которой он расположен. Правильное расположение по высоте определяется getElementY() .

  • Добавьте clearTable() в javascript.js . Эта функция позволяет скрывать элемент complete-table (т.е. делать его невидимым), но не удаляет какие-либо существующие записи имен композиторов, созданные ранее.
  • Для вызова clearTable() при каждом получении данных с сервера можно соответствующим образом изменить функцию callback() . Поэтому любые скомбинированные записи, существующие в окне автозавершения, удаляются до того, как выполняется заполнение новыми записями.
  • Добавьте parseMessages() в javascript.js .
  • Функция parseMessages() получает в качестве параметра объектное представление документа XML, возвращаемое сервлетом AutoComplete . С программной точки зрения, функция исследует документ XML и извлекает firstName , lastName и id каждой записи, а затем передает эти данные в appendComposer() . Это приводит к динамическому обновлению содержимого элемента complete-table . Например, запись, которая генерируется и вставляется в complete-table , может выглядеть следующим образом:

    Динамическое обновление элемента complete-table соответствует последнему этапу потока процесса передачи данных, который выполняется во время обмена данными на основе Ajax. Это обновление соответствует передаче данных HTML и CSS на страницу представления, как показано на приведенной выше блок-схеме.

    Отображение результатов

    Для отображения результатов необходим файл JSP под названием composers.jsp Во время поиска эта страница вызывается из AutoCompleteServlet . Также понадобится файл error.jsp , который вызывается из AutoCompleteServlet , если композитор не был обнаружен.

    Для отображения результатов и ошибок:

    1. В окне ‘Проекты’ щелкните правой кнопкой мыши папку ‘Веб-страницы’ приложения и выберите ‘Создать’ > JSP. Откроется мастер создания JSP.
    2. В поле «Имя файла» введите composer В поле «Созданный файл» должен появиться путь, который заканчивается файлом /web/composer.jsp .
    3. Нажмите кнопку «Завершить». Файл composer.jsp открывается в редакторе. В папке веб-страниц в окне «Проекты» появляется путь к этому файлу.
    4. Измените код заглушки в файле composer.jsp следующим кодом:

    Примечание. Если страница индекса имеет вид index.jsp, потребуется изменить ссылку для возврата на эту страницу.

  • Создайте еще один файл JSP в папке с веб-страницами проекта. Назовите файл error.jsp .
  • Измените код заглушки в файле error.jsp следующим кодом:

    Примечание. Если страница индекса имеет вид index.jsp, потребуется изменить ссылку для возврата на эту страницу.

    Присоединение таблицы стилей

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

    1. В окне «Проекты» щелкните правой кнопкой мыши узел проекта и выберите команду «Выполнить». Будет выполнена перекомпиляция проекта и его развертывание на целевом сервере. Откроется браузер, в котором отображается страница-указатель.

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

    • Окно ‘Стили CSS’. Окно стилей CSS позволяет редактировать объявления правил для элементов HTML и средств выбора в файле CSS.
    • Диалоговое окно ‘Создание правил CSS’. Диалоговое окно ‘Создание правил CSS’ позволяет создавать новые правила в таблице стилей CSS.
    • Диалоговое окно ‘Добавить свойство CSS’.Диалоговое окно ‘Добавить свойство CSS’ позволяет добавлять объявления к правилу CSS в таблице стилей, добавляя свойства и значения.

    Для добавления таблицы стилей к приложению выполните следующие действия.

    1. В окне «Проекты» щелкните правой кнопкой мыши узел проекта и выберите «Создать > Каскадная таблица стилей». Если пункт «Каскадная таблица стилей» отсутствует в списке, выберите «Прочие». Затем выберите «Каскадная таблица стилей» из категории «Web» в мастере создания файла.
    2. В текстовом поле ‘Имя файла CSS’ введите stylesheet . Нажмите кнопку «Завершить».

    Новый файл будет создан и открыт в редакторе.

  • Введите следующие правила stylesheet.css в редакторе. При необходимости просмотра предложений можно использовать поддержку автозавершения кода среды IDE путем нажатия CTRL+ПРОБЕЛ.
  • Откройте окно стилей CSS, выбрав ‘Окно’ > ‘Web’> ‘Стили CSS’.

    Можно использовать окно ‘Стили CSS’ для быстрого просмотра свойств и редактирования правил стилей. При выборе правила в верхней панели окна ‘Стиль CSS’ отображаются свойства правила в нижней панели. Можно добавить CSS правила к таблице стилей, нажав значок ‘Изменить правила CSS’ ( ) на панели инструментов в верхней панели. Можно изменять правила в нижней панели путем редактирования таблицы свойств и добавления свойств, щелкнув значок ‘Добавить свойство’ ( ) на панели инструментов в нижней панели.

  • Перейдите на страницу индекса в редакторе исходного кода и добавьте ссылку на страницу стилей между тегами .
  • Добавьте класс popupBox , определенный в таблице стилей, к элементу complete-table (начертание изменится на жирное).

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

    Как указано в stylesheet.css , согласно этому правилу элемент complete-table располагается таким образом, что отображается справа от родительского элемента.

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

    Выполнение проекта

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

    Использование средства наблюдения HTTP Server Monitor

    Можно использовать средство наблюдения HTTP Server Monitor среды IDE для проверки взаимодействия с HTTP, которое заключается в передаче запросов и ответов между клиентским приложением и сервером. В HTTP Server Monitor отображается информация, например, заголовки клиентского приложения и сервера, свойства сеанса, подробные сведения о файлах cookie, а также параметры запроса.

    Перед началом использования средства HTTP Monitor его следует сначала активировать на используемом сервере.

    1. Откройте окно «Серверы», выбрав в главном меню «Сервис» > «Серверы».
    2. На левой панели выберите сервер, который используется для проекта. Затем на правой панели выберите режим «Enable HTTP Monitor».

    Примечание. Этот параметр отображается на вкладке ‘Общие’ для сервера GlassFish. На сервере Tomcat он расположен на вкладке «Соединение».

    Если сервер уже запущен, необходимо перезапустить его для применения изменений. Сервер можно перезапустить, открыв окно ‘Службы’ (Window > ‘Службы’), то щелкните правой кнопкой мыши сервер ниже узла ‘Серверы’ и выберите ‘Перезапуск’.

    Теперь при повторном выполнении приложения в нижней области среды IDE откроется HTTP Monitor. Для просмотра информации относительно каждого запроса можно выбрать запись на левой панели, затем перейти на соответствующие вкладки в главном окне.

    Можно проверить данные XML, полученные от сервера в результате асинхронного запроса, переданного при вводе пользователем символа в поле автозавершения.


    1. В представлении дерева на левой стороне монитора HTTP щелкните правой кнопкой мыши запись запроса и выберите ‘Воспроизвести’.

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

    Заключение

    Это заключительный раздел руководства «Введение в Ajax». Авторы полагают, что к настоящему времени у пользователей сформировалось четкое представление о том, каким образом Ajax поддерживает обмен информацией по HTTP в фоновом режиме и выполняет динамическое обновление страницы на основе полученных результатов.

    Следует отметить, что разработанное приложение имеет ряд недостатков, например, при выборе имени композитора из поля автозавершения пользователь не получает какого-либо результата. Для получения дополнительных сведений о реализации с использованием технологии JSP загрузите проект решения. Кроме того, существует возможность выполнения проверки допустимости на стороне сервера в целях предотвращения запроса пользователем имени, не существующего в хранилище данных. Для более подробного изучения этих функций обратитесь к другим учебным курсам учебной карты по Java EE & Java Web.

    Дополнительные сведения

    Дополнительные сведения о технологиях Ajax и Java приведены в следующих материалах на сайте www.netbeans.org:

    • Использование jQuery для улучшения внешнего вида веб-страницы и упрощения работы с ней. Показывает способ интеграции ядра jQuery и библиотек пользовательского интерфейса в проект NetBeans.
    • Подключение дерева Dojo к списку ArrayList с помощью JSON. Данный документ основан на практическом примере JavaOne. В нем демонстрируются способы внедрения элемента оформления «Дерево Dojo» в веб-страницу и способы управления реакцией стороны сервера на запросы дерева в формате JSON.
    • Создание файлов JavaScript в документе Разработка приложений в IDE NetBeans
    • Введение в веб-платформу Wicket. Введение в процесс создания повторно используемых компонентов и применения их в веб-приложении на основе платформы Wicket.

    Как создать веб-сайт с помощью AJAX

    Создания простого чата

    Для начала создадим простой чат с помощью HTML&CSS и PHP&MySQL

    Проектирование Базы Данных

    1. Переходим к phpMyAdmin.
    2. Создаем новую базу данных, называем “chatdb”.
    3. Создаем новую таблицу, называя “Posts”, включая в себя 4 столбца:
    • “id” тип колонки INT, автоматическое увеличение на 1 (задаем A_I в ячейку с флажком) основной ключ (index);
    • “nick” тип колонки VARCHAR и длина 100;
    • “post_text” тип колонки TEXT;
    • “post_dt” тип колонки DATETIME по умолчанию является CURRENT_TIMESTAMP.

    Создание веб-сайта.

    1. Во-первых, создадим главную страницу. Список комментариев и отправка формы, используя кнопку. Всё будет находится в файле “ index.php” . Давайте создадим этот файл и напишем что-то вроде этого:

    $ mysqli = new mysqli ( «127.0.0.1» , «root» , «» , «chatdb» );

    /* «127.0.0.1» is MySQL host name. In local servers ( XAMPP , Ampps , etc. ) it is 127.0.0.1. If you using a dedicated hosting , see it in admin panel. */

    /* «root» and «» is login and password for DB ‘s user. In local servers usually default DB user is «root» with empty password. */

    /* «chatdb» is DB’ s name. */

    /* Warning : in XAMPP you should manually run MySQL server ( from xampp-control.exe ) to get it work. */

    $ result = $mysqli-> query(«SELECT * FROM posts;»);

    /* All CSS is very simplified. I provide it for example and no more.

    * In Chrome it works tolerably, but in IE and Firefox it works very poorly.

    /* Center horizontally and vertically */

    border: 1px solid;

    /* For mobile devices */

    @media (max-width: 400px) <

    div class =»content»>

    div id =»comments» style =»overflow-y: scroll; height: 100%;»>

    while ($ post = $result-> fetch_object())<

    echo » b > $nick b > ($post_dt): br > «;

    echo «$post_text br > «;

    form action =»post.php» method =»post» style =»height: 0; display: table-row;»>

    input type =»text» name =»nick» style =»width: 100%;»> input > br >

    textarea name =»text» style =»width: 100%;»> textarea > br >

    input type =»submit»> input >

    script type =»text/javascript»>

    var divComments = document.getElementById( ‘comments’ );

    2. Дальше давайте создадим “post.php” файл и напишем такое:

    $ nick = $_POST[‘ nick ‘];

    $post_text = $_POST[‘ text ‘];

    $mysqli = new mysqli(«127.0.0.1», «root», «», «chatdb»);

    $nick = $mysqli-> real_escape_string($nick);

    $mysqli->query(«INSERT INTO posts (nick, post_text) VALUES (‘$nick’, ‘$post_text’);»);

    /* Redirect To Main Page */

    3. Откроем ваш чат в любом продвинутом браузере. Вся работа:


    4. Напишите ник и текст, а потом нажмите на кнопку отправки.

    Когда отправили форму, сразу же происходит перенаправление формы главной страницы в “post.php”. “Post.php” моментально наполняет данными таблицу и перенаправляет на главную страницу. Также “post.php” содержит начальный XSS и SQL защищенный вход. Для упрощения не отправляем клиентам время с JS на “post_dt” на внесения данных, а указываем значение по умолчанию – CURRENT_TIMESTAMP, который предоставляет нынешнюю дату и время на сервер.

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

    Что тут не так?

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

    Это очень, очень серьезная проблема для любого чата.

    Как это исправить?

    Очевидно, один из путей сделать это — использовать HTTP-запрос к фоновой работе автоматически (с помощью JS) и асинхронно, то есть это один из способов обеспечить выполнение AJAX в любой form.

    Проблема номер 2. Также неправильно то, что кнопка отправки перезагружает страницу (перенаправляет на вторую страницу и следующим шагом возвращает назад).

    При перезагрузке страницы сбрасывает “Nick” в поле (также, как любые другие изменения, те, что сделали с пользователем)

    Как это исправить?

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

    Проблема номер 2.1. Видите ли что-то необычное тут?

    Это слишком быстро?

    Дело с чатом очень простое – загружаем только два маленьких текстовых параметра. Что делать, если нужно улучшить чат с помощью добавления присоединения, а конкретно — изображений и видео? Видео может иметь объем в размере нескольких мегабайт, что тогда в этом случае?

    Давайте попробуем. Давайте немного изменим “post.php”, после $mysql->query() добавив это:

    for ( $i = 0 ; $i 1000000000 ; $i++)

    Старайтесь размещать какие-либо комментарии. Что мы видим? Нет, UI не остановилось (заморозилось), но браузер ждет до того, как закончится подключение:

    Да, если “post.php” вызывает какую-то необработанную ошибку, то чат исчезает, и пользователь видит пустое окно с сообщением о непонятной ошибке. Чтобы вернуться к чату, пользователю стоит нажать кнопку “Back” в браузере. И это проблема номер 2.2.

    Давайте уберем петлю с “post.php” и исправим эти проблемы.

    Реализация легкого AJAX в простой чат

    Автоматическое обновление комментариев

    Эта веб-страница без AJAX? Это веб-страница, которая полностью перезагружается.

    Эта веб-страница c AJAX? Это веб-страница, что перезагружается частично.

    Где же взять части этих страниц? Стоит разделить нашу страницу на части, в этом случае сервер генерирует страницу частично.

    Страница будет состоять из двух частей – блок комментариев и другой контент страницы. Комментарии будут загружаться и перезагружаться отдельно от другой страницы.

    Давайте сделаем первую часть, то есть блок комментариев.

    Для начала создадим пустой файл, назовем “getcomment.php”.

    Дальше переходим в “index.php” для того, чтобы вырезать комментарии и далее отделить его.
    1. Вырезаем инициализированный блок MySQL с “index.php»

    $ mysqli = new mysqli ( «127.0.0.1» , «root» , «» , «chatdb» );

    /* «127.0.0.1» is MySQL host name. In local servers ( XAMPP , Ampps , etc. ) it is 127.0.0.1. If you using a dedicated hosting , see it in admin panel. */

    /* «root» and «» is login and password for DB ‘s user. In local servers usually default DB user is «root» with empty password. */

    /* «chatdb» is DB’ s name. */

    /* Warning : in XAMPP you should manually run MySQL server ( from xampp-control.exe ) to get it work. */

    $ result = $mysqli-> query(«SELECT * FROM posts;»);

    вставляем в “getcomments.php”.

    2. Следующее, вырежем контент div c комментариями с “index.php”:

    while ($ post = $result-> fetch_object())<

    echo » b > $nick b > ($post_dt): br > «;

    echo «$post_text br > «;

    И вставим (добавим) в “getcomments.php” после инициализации MySQL.

    3. Дальше, вырежем недалекий блок MySQL с “index.php”:

    Вставим его в конец файла “getcomments.php”.

    4. Наконец-то, убираем JS-скрипт, который опускает скролл в самый низ.

    script type =»text/javascript»>

    var comments = document.getElementById( ‘comments’ );

    Не переживай, это только временно.

    5. Сделано. Теперь имеем что-то наподобие этого:

    /* All CSS is very simplified. I provide it for example and no more.

    * In Chrome it works tolerably, but in IE and Firefox it works very poorly.

    /* Center horizontally and vertically */

    border: 1px solid;

    /* For mobile devices */

    @media (max-width: 400px) <

    div class =»content»>

    div id =»comments» style =»overflow-y: scroll; height: 100%;»>

    form action =»post.php» method =»post» style =»height: 0; display: table-row;»>

    input type =»text» name =»nick» style =»width: 100%;»> input > br >

    textarea name =»text» style =»width: 100%;»> textarea > br >

    input value =»Submit» type =»submit»> input >


    $ mysqli = new mysqli ( «127.0.0.1» , «root» , «» , «chatdb» );

    /* «127.0.0.1» is MySQL host name. In local servers ( XAMPP , Ampps , etc. ) it is 127.0.0.1. If you using a dedicated hosting , see it in admin panel. */

    /* «root» and «» is login and password for DB ‘s user. In local servers usually default DB user is «root» with empty password. */

    /* «chatdb» is DB’ s name. */

    /* Warning : in XAMPP you should manually run MySQL server ( from xampp-control.exe ) to get it work. */

    $ result = $mysqli-> query(«SELECT * FROM posts;»);

    Вероятно, теперь наша страница разделена.

    Давайте проверим её. Переходим http (точнее ССЫЛКА для локального сервера).

    Дальше, переходим на главную страницу, http:///index.php

    Это удивительно! Всё удачно получилось, разделив страницу на части за пару минут!

    Не останавливаемся на этом. Теперь “glue” эти части с помощью AJAX. Как это сделать?

    1. Для начала стоит создать пустой JS-скрипт на главной странице:

    script type =»text/javascript»>

    Добавив это после тега div, перед закрывающимся тегом .

    2. Сделаем HTTP GET запрос от JS к “getcommet.php”

    Для этого используем XMLHtttpRequest (XHR) класс:

    script type =»text/javascript»>

    var xhr = new XMLHttpRequest();

    xhr.open( ‘GET’ , ‘/getcomments.php’ , false );

    if (xhr.status == 200) <

    Это работает, но не читает старые версии IE те, что не поддерживают такую инициализацию.

    Для получения более кросс-браузерного пути переходим в

    и добавляем это:

    script type =»text/javascript»>

    xmlhttp = new ActiveXObject( «Msxml2.XMLHTTP» );

    xmlhttp = new ActiveXObject( «Microsoft.XMLHTTP» );

    if (!xmlhttp && typeof XMLHttpRequest != ‘undefined’ ) <

    xmlhttp = new XMLHttpRequest();

    И главный скрипт (в конце)

    script type =»text/javascript»>

    var xhr = getXmlHttp();

    xhr.open( ‘GET’ , ‘/getcomments.php’ , false );

    if (xhr.status == 200) <

    Как видно, теперь JS получает контент со страницы “getcomments.php” и показывает это в предупреждении.

    2.1. Вопрос: «Это на самом деле AJAX (Asynchronous Javascript And Xml)?»

    Это AJAX, потому что запрос сервера отформатирован в HTML (который основан на XML).

    Но действительно ли это AJAX, это асинхронно?

    Проверим. Добавим эти уже знакомые строки в любое место между в “getcomments.php”:

    for ( $i = 0 ; $i 1000000000 ; $i++)

    Что теперь видно на загружаемой странице?

    Вначале страница зависает, его замораживает UI (становится не реагирующим на нажатие левой/правой кнопки мыши):

    Дальше Chrome показывает навязчивое всплывающие окно, сообщающее об удалении страницы:

    Это не AJAX! Это JAX! Как его сделать асинхронным?

    К счастью, ХHR также поддерживает асинхронный режим :

    script type =»text/javascript»>

    var xhr = getXmlHttp();

    xhr.open( ‘GET’ , ‘/getcomments.php’ , true ); /* true for asynchronous */

    if (xhr.readyState == 4) <

    if (xhr.status == 200) <

    В этом случае браузер не ждет ответа с главного потока пользовательского интерфейса, он запускает в другом (асинхронно) и вызываемым событием “onreadystatechange” в главном контексте UI.

    Теперь всё в порядке, страница полностью доступна, пока запрос запущен, и после ответа получит предупреждение.

    for ( $i = 0 ; $i 1000000000 ; $i++)

    И продолжаем работу.

    3. Добавляем этот контент в div вместо предупреждения. Заменить это:

    var divComments = document.getElementById( ‘comments’ );

    Возвращаем назад , клиент видит “glued” страницу с блоком комментариев .

    4. Дальше следует установить интервал для автоматической проверки новых комментариев время от времени… и также восстановить удаленный сценарий автоматической прокрутки.

    script type =»text/javascript»>

    xmlhttp = new ActiveXObject( «Msxml2.XMLHTTP» );

    xmlhttp = new ActiveXObject( «Microsoft.XMLHTTP» );


    if (!xmlhttp && typeof XMLHttpRequest != ‘undefined’ ) <

    xmlhttp = new XMLHttpRequest();

    /* All CSS is very simplified. I provide it for example and no more.

    * In Chrome it works tolerably, but in IE and Firefox it works very poorly.

    /* Center horizontally and vertically */

    border: 1px solid;

    /* For mobile devices */

    @media (max-width: 400px) <

    div class =»content»>

    div id =»comments» style =»overflow-y: scroll; height: 100%;»>

    form action =»post.php» method =»post» style =»height: 0; display: table-row;»>

    input type =»text» name =»nick» style =»width: 100%;»> input > br >

    textarea name =»text» style =»width: 100%;»> textarea > br >

    input value =»Submit» type =»submit»> input >

    script type =»text/javascript»>

    var divComments = document.getElementById( ‘comments’ );

    var xhr = getXmlHttp();

    xhr.open( ‘GET’ , ‘/getcomments.php’ , true );

    if (xhr.readyState == 4) <

    if (xhr.status == 200) <

    if (xhr.responseText !== divComments.innerHTML) <

    Теперь проблема исправить это. Новые комментарии с другого пользовательского чата (другие вкладки браузеров, окон и экземпляров) получают каждые 1000 миллисекунды (1 секунду) автоматически.

    Но отправка комментариев уже вызывает перезагрузку нашей страницы.

    Отправка комментариев без перезагрузки

    Как написано выше, XHR помогает отправлять HTTP GET-запросы без перезагрузки страницы и GUI заморозки (асинхронно).

    Теперь отправляем HTTP-запрос асинхронно, но на этот раз POST запрос, а не GET.

    И, естественно, XHR позволяет это. Используем метод send(). Для GET указываем null. Для POST устанавливаем запрос “body”. Также нужно добавить “Content-Type:application/x-www-from-urlencoded” в header для того, чтобы разрешить серверу знать, какой формат использовать для отправки данных.

    Заметка: если не знаете, что отправлять, то можно захватить регулярный запрос с помощью “Fiddler” или же любой другой HTTP-перехватчик и только просимулировать запрос. HTTP-перехватчик — это незаменимый инструмент для работы с HTTP/HTTPS. Это позволяет увидеть все headers и bodies по всем HTTP(S)-запросам, что отправляются в систему. Лучше использовать “Fiddler”, это бесплатное, современное и очень простое приложение, что может поддерживать HTTP/HTTPS и оба Win x86/x64.

    1. Для начала создадим пустой JS скрипт в HTML. Разместить до самого

    Ajax: Новый подход к веб-приложениям

    Если и можно назвать «гламурным» что-то в современном проектировании интерфейсов, то это создание веб-приложений. В конце концов, когда в последний раз вы слышали чтобы кто-то восхищался интерфейсом продукта не размещённого в Интернете? ( Ладно, кроме iPod.) Все самые свежие и новаторские работы находятся в сети.

    Несмотря на это, разработчики веб-интерфейсов не могут ничего поделать с завистью к своим коллегам, которые создают desktop-приложения. Обычные программы имеют всю ту силу и быстроту отклика, которые, кажутся недоступными для веб-приложений. Та же простота, которая способствовала быстрому распространению всемирной сети теперь создаёт разрыв между тем пользовательским взаимодействием, которое можем предоставить мы, и взаимодействием пользователей с настольными приложениями.

    Этот разрыв сокращается. Взгляните на Google Suggest. Посмотрите, предполагаемые предложения почти непрерывно обновляются по мере того как вы вводите текст. Теперь зайдите на Google Maps. Увеличьте масштаб. Захватите курсором карту и подвигайте её туда-сюда. Опять же, всё происходит почти мгновенно, без всякого ожидания перезагрузки страницы. Google Suggest и Google Maps — вот два примера нового подхода к проектированию веб-приложений, который мы в компании Adaptive Path называем Ajax. Это понятие образовано как сокращение от и представляет собой фундаментальный прорыв наших представлений о возможностях веба.

    Что такое Ajax

    Ajax — не технология. На самом деле это несколько технологий преуспевающих каждая в своей области, собранных в новое сильное направление. Ajax объединяет:

    • стандартизованное представление с использованием XHTML и CSS;
    • динамическое отображение и взаимодействие при помощи Document Object Model;
    • обмен и управление данными через XML и XSLT;
    • асинхронные получение данных с использованием XMLHttpRequest;
    • и JavaScript, связывающий всё это воедино.

    Классическая модель веб-приложения действует следующим образом: большинство действий пользователя отправляют обратно на сервер HTTP-запрос. Сервер производит необходимую обработку — получает данные, обрабатывает числа, взаимодействует с различными унаследованными системами и затем выдаёт HTML страницу клиенту. Эта модель заимствована из первоначального применения веба как гипертекстовой среды, но те кто читали книгу знают, то что делает веб подходящим для гипертекста не обязательно делают его хорошим для программных приложений.

    Рисунок 1: Сравнение традиционной модели веб-приложений (слева) с моделью Ajax (справа).

    В этом подходе много технического смысла, но им не достигается хорошее взаимодействие с пользователем. Пока сервер делает свою работу, чем занимается пользователь? Правильно, ждёт. И с каждым следующим шагом пользователь ждёт ещё и ещё.

    Очевидно, если бы мы создавали веб с нуля, то не стали бы заставлять пользователей всё время ждать. Если уж страница загружена, почему взаимодействие с пользователем должно останавливаться каждый раз, когда программе нужно что-то от сервера? В самом деле, зачем пользователю вообще видеть что приложение соединяется с сервером?

    В чём отличие Ajax

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

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

    Рисунок 2: Сравнение диаграмм взаимодействия традиционного веб-приложения (сверху) и асинхронного приложения Ajax (снизу).

    Каждое действие пользователя, которое обычно производит HTTP-запрос, теперь вместо этого принимает форму JavaScript-вызова движка Ajax. Каждый ответ на действие пользователя, не требующее обращения к серверу, как то простая проверка данных, редактирование данных в памяти, и даже некоторая навигация, выполняется движком самостоятельно. Если же для ответа требуется информация с сервера, например загрузка дополнительного интерфейсного кода, передача данных для обработки, или получение новых данных, то движок производит необходимые запросы асинхронно, обычно при помощи XML, не прерывая взаимодействия пользователя с приложением.

    Кто использует Ajax

    Огромные инвестиции в разработку подхода Ajax делает Google. Все самые крупные продукты анонсированные за последний год — Orkut, Gmail, последние бета-версии Google Groups, Google Suggest, и Google Maps — приложения Ajax. (За техническими подробностями реализации Ajax обратитесь к отличным исследованиям Gmail, Google Suggest и Google Maps.) Остальные не отстают: многие любимые всеми свойства сервиса Flickr полагаются на Ajax, а механизмы поиска A9.com от Amazon используют похожую технологию.

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

    Работая с Ajax последние несколько месяцев, мы в Adaptive Path поняли, что открыли только верхушку айсберга того богатства взаимодействия и скорости отклика, которые предоставляют приложения Ajax. Сейчас это важное направление развития веб-приложений, и его важность будет только расти. И учитывая большое количество разработчиков, которые уже умеют использовать эти технологии, мы ожидаем увидеть как всё больше организаций последуют примеру Google и используют конкурентные выгоды, которые предлагает Ajax.

    Что дальше

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

    Вопросы и ответы.

    13 марта 2005: После публикации эссе Джесси мы получили громадное количество писем от читателей с вопросами об Ajax. Здесь Джесси отвечает на некоторые наиболее общие вопросы.

    Вопрос. Изобрела ли Ajax компания Adaptive Path или это сделала Google? Участвовала ли компания Adaptive Path в создании Ajax-приложений Google?

    Ответ. Ни Adaptive Path ни Google не изобретали Ajax. Последние работы Google просто лучшие примеры приложений Ajax. Adaptive Path не была вовлечена в разработку Ajax-приложений Google, но мы делали это для других своих клиентов.

    Вопрос. Продаёт ли Adaptive Path компоненты Ajax или является владельцем зарегистрированного товарного знака? Где их можно скачать?

    Ответ. Ajax это не то, что можно скачать. Это подход, то есть способ представлений об архитектуре веб-приложения использующего определённые технологии. Ни подход, ни само название Ajax не являются собственностью Adaptive Path.

    Вопрос. Является ли Ajax ещё одним названием для XMLHttpRequest?

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

    Вопрос. Для чего нужно было давать всему этому название?

    Ответ. Нужно было что-то более короткое чем для обсуждения этого подхода с клиентами.

    Вопрос. Способы асинхронного взаимодействия с сервером существуют уже много лет. В чём же новизна подхода Ajax?

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

    Вопрос. Ajax это технологическая платформа или всего лишь стиль проектирования?

    Ответ. И то и другое. Ajax это набор технологий используемых вместе определённым образом.

    Вопрос. Для приложений какого типа больше всего подходит Ajax?

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

    Вопрос. Означает ли это что Adaptive Path это анти-Flash?

    Ответ. Совсем нет. Macromedia является клиентом Adaptive Path, и мы долгое время поддерживали Flash-технологию. Как специалисты в Ajax мы ожидаем что иногда для каких-то конкретных задач именно Ajax станет наиболее проходящим решением, а иногда лучшим решением будет Flash. Также мы заинтересованы в изучении способов комбинирования этих технологий (как в случае с Flickr, который использует и то и другое).

    Вопрос. Есть ли у Ajax значительные ограничения доступности или совместимости с браузерами? Отключают ли приложения Ajax кнопку ? Совместим ли Ajax с REST? Существуют ли мнения о безопасности разработки в Ajax? Могут ли быть разработаны Ajax-приложения для работы при выключенном JavaScript?

    Ответ. На все эти вопросы можно ответить только . Многие разработчики уже работают в этом отношении. Мы считаем что нужно ещё потрудиться чтобы выявить все ограничения Ajax, и предполагаем что на своём пути сообщество разработчиков встретит ещё много подобных вопросов.

    Вопрос. Некоторые из приведённых вами примеров Google не используют XML вообще. Должен ли я использовать XML и/или XSLT в приложении Ajax?

    Ответ. Нет. XML это один из наиболее развитых способов ввода и вывода данных из клиентской части Ajax, но ничто не мешает вам достигнуть того же эффекта при помощи таких технологий структурирования данных для обмена как JavaScript Object Notation или тому подобных.

    Вопрос. Проще ли разработать приложение Ajax по сравнению с традиционным веб-приложением?

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

    Вопрос. Всегда ли приложение Ajax представляет лучшее взаимодействие с пользователем, чем традиционно веб-приложение?

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

    Мастер Йода рекомендует:  Как выбрать движок (CMS) для сайта
  • Добавить комментарий