Работа с Web-сервисами с помощью Dojo Toolkit

Применение инструментария Dojo Toolkit для сервисов в стиле Ajax и RESTful

Узнайте, как пользоваться сервисами с использованием библиотеки Dojo Toolkit для реализации Ajax (Asynchronous JavaScript and XML) на Web-странице. Данная статья позволяет понять традиционные сервисы Ajax-стиля и получить представление о возможностях Dojo Toolkit при работе с Web-сервисами RESTful-стиля.

Натан А. Гуд, инженер по программному обеспечению, начальник отдела

Натан Гуд (Nathan A. Good) живет в регионе Twin Cities (штат Миннесота, США). Н. Гуд профессионально занимается разработкой программного обеспечения, архитектурой программного обеспечения и системным администрированием. Когда Н. Гуд не занят написанием программного обеспечения, он с удовольствием занимается построением ПК и серверов, изучением и освоением новых технологий, а также убеждением своих коллег в необходимости перехода на программное обеспечение с открытым кодом. Натан Гуд лично и в соавторстве написал множество книг и статей, в том числе: Professional Red Hat Enterprise Linux 3, Regular Expression Recipes: A Problem-Solution Approach, Regular Expression Recipes for Windows Developers: A Problem-Solution Approach, PHP 5 Recipes: A Problem-Solution Approach. Самая новейшая из его работ: Foundations of PEAR: Rapid PHP Development.



05.10.2011

Данная статья посвящена работе с Web-сервисами (как простыми, так и Web-сервисами RESTful-стиля) с помощью Dojo Toolkit. Для получения максимальной пользы от данного учебного пособия на системе читателя должны быть установлены и сконфигурированы следующие компоненты:

  • Текстовый редактор или интегрированная среда разработки (IDE)
    (в данной статье используется IDE-среда Eclipse для JavaScript).
  • Web-сервер

Обзор Dojo Toolkit

Тенденция к совершенствованию т.н. «функционально насыщенных Интернет-приложений» (Rich Internet Application, RIA) приводит к появлению JavaScript-инфраструктур, помогающих Web-разработчикам создавать более привлекательные приложения.

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

Попробуйте Rational Application Developer

Загрузите бесплатную пробную версию продукта IBM Rational® Application Developer for WebSphere® Software, который помогает разработчикам быстро проектировать, разрабатывать, тестировать, анализировать и развертывать высококачественные приложения с использованием Java™, Java EE (Java Platform, Enterprise Edition), Web 2.0, сервис-ориентированных архитектур (SOA) и порталов. Продукт Rational Application Developer содержит средства для быстрого изучения новых технологий Java EE и Web-технологий, для автоматической верификации, сборки и тестирования программного кода, для динамичной разработки программных продуктов, отвечающих быстро меняющимся требованиям современных потребителей программного обеспечения.

Dojo Toolkit (см. Ресурсы) – это сборник очень полезного JavaScript-кода. Dojo Toolkit предоставляет JavaScript-методы, с помощью которых разработчик может анимировать элементы, реализовать постепенное проявление/исчезновение элементов, осуществлять Ajax-вызовы и т.д.

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


Обзор Ajax

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

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


Создание проекта

В данном примере используется новейшая версия Eclipse с установленным JavaScript-инструментарием. Этот инструментарий предоставляет расширенные возможности для редактирования JavaScript-кода и HTML-страниц.

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

  1. Создайте новый статический Web-проект: File > New > Project.
  2. Выберите Web\Static Web Project и нажмите на Next.
  3. Введите с клавиатуры имя своего проекта (например, MyDojoExample).
  4. Нажмите New Runtime.
  5. Выберите из списка New Server и поставьте флажок в контрольном окошке Create a new local server.
  6. Введите с клавиатуры имя сервера, которое будет демонстрироваться в списке серверов, а затем введите имя каталога, в котором вы хотите опубликовать свои файлы. Как правило, это должен быть каталог, в котором вы можете публиковать пользовательские Web-файлы.
  7. Нажмите Next в мастере Static Web Project.
  8. Оставьте корень контекста таким же, как имя проекта, и не изменяйте имя папки Web-контента WebContent.
  9. Нажмите Finish. Eclipse создает для вас новый проект.

Когда вы добавляете файлы к своему проекту, Eclipse автоматически публикует файлы в каталоге, который вы сконфигурировали для своего сервера. Вы сможете увидеть этот процесс в действии, когда будете создавать свой первый HTML-файл в этом проекте – файл index.html. Вам придется модифицировать этот файл с целью включения в него поискового блока, используемого в примере.

Для создания нового HTML-файла выполните следующие шаги:

  1. Выберите папку WebContent в своем новом проекте и нажмите правую кнопку мыши для открытия контекстного меню.
  2. В меню выберите: New > HTML file.
  3. Введите с клавиатуры имя файла в поле File name и нажмите Next, чтобы открыть окно выбора HTML-шаблона.
  4. Для этого примера выберите опцию New XHTML File (1.0 strict) и нажмите на Finish.

Новый файл будет выглядеть следующим образом.

Листинг 1. Новый файл index.html
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body>

</body>
</html>

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

Листинг 2. Файл index.html с элементами управления
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test web page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles/main.css" />
</head>
<body>
<div id="wrapper">
<form>
<div id="search"><input id="searchBox" type="text"
    maxlength="2048" name="criteria" title="Search" onkeyup="update()" /></div>
<div id="suggestions"></div>
</form>
</div>
</body>
</html>

Пока этот файл не очень сильно отличается от пустой версии. Большая часть работы на Web-странице делается с помощью JavaScript-кода.


Включение Dojo Toolkit

Компоненты Dojo Toolkit можно включить в проект одним из двух способов:

  • Использовать один из публичных хостингов с файлами Dojo Toolkit.
  • Загрузить JavaScript-файлы Dojo Toolkit и включить их в проект вместе со своим кодом.

Выбор метода зависит от ваших потребностей.

Использование файла на публичном хостинге

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

  • Использование CDN-сети (content distribution network) для хостинга файла избавляет разработчика от необходимости отслеживания этого файла на своей локальной системе.
  • Разработчику достаточно развернуть лишь один небольшой файл.

Главное неудобство использования файла на публичном хостинге состоит в том, что разработчик не имеет никакого контроля над ситуацией, если CDN-сеть недоступна (эта ситуация маловероятна, но возможна). Если по каким-либо причинам CDN-сеть будет отключена, работоспособность вашего сайта может быть нарушена. Если у вас есть внутренние Web-приложения, от которых требуется высокая готовность, рекомендуется держать скрипт-файлы Dojo Toolkit на своей локальной системе – это уменьшит количество точек отказа для вашего приложения.

Для привязки файла Dojo Toolkit из CDN-сети измените свой файл index.html, как показано в листинге 3.

Листинг 3. Включение ссылки на местоположение Dojo в CDN-сети
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test web page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles/main.css" />
<script
    src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
    type="text/javascript"></script>
</head>
<!-- snipped... -->
</html>

Загрузка и включение файла Dojo Toolkit

Если вы хотите загрузить и включить файл Dojo Toolkit в проект вместо того, чтобы ставить на него ссылку, вы можете загрузить JavaScript-код Dojo с Web-сайта, ссылка на который указана в разделе Ресурсы. После загрузки этого файла вы можете импортировать его в свой проект в среде Eclipse с помощью опции: File > Import. Согласно имеющимся соглашениям, рекомендуется создать папку с именем js или scripts, в которую вы можете поместить не только свои файлы JavaScript-кода, но и загруженные вами файлы.

Чтобы включать файлы, которые вы загрузили, в свою Web-страницу, измените файл index.html, как показано в листинге 4.

Листинг 4. Включение локальной ссылки на загруженный файл dojo.js
<script src="js/dojo.js" type="text/javascript"></script>

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


Вызов сервиса

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

В данной статье приведено два различных примера вызова сервиса и получения результата. Первый пример представляет собой простой сервис, который не обязательно соответствует типичным соглашениям по URL-адресам для Web-сервисов RESTful-стиля. REST не является стандартом, однако существуют способы работы с URL-адресами, улучшающие способность к взаимодействию между клиентами и Web-сервисами RESTful-стиля. Второй пример представляет собой введение в использование метода dojox.rpc.Rest.

Использование простого сервиса

Поскольку ответ от сервиса меняется в зависимости от строки запроса, сервис должен быть написан с использованием технологии динамических Web-приложений (для получения дополнительной информации о динамических Web-приложениях обратитесь к разделу Ресурсы).Пример в листинге 5 представляет собой простой PHP-скрипт, содержащий массив имен. Базируясь на предоставленной пользователем информации, этот скрипт фильтрует список имен и добавляет их к ответу в формате XML (Extensible Markup Language).

Листинг 5. Простой сервис, написанный на PHP
<?php
header("Content-type: text/xml");

$data = array(
    "Bilbo Baggins",
    "Frodo Baggins",
    "Samwise (Sam) Gamgee",
    "Meriadoc (Merry) Brandybuck",
    "Peregrin (Pippin) Took");

$resultXML = '';
$resultsXML .= '<suggestions>';

foreach ($data as $d) {
    $pattern = '/'.$_GET['s'].'/';
    if (preg_match($pattern, $d)) {
        $resultsXML .= '<item>'.$d.'</item>';
    }
}

$resultsXML .= '</suggestions>';

print($resultsXML);

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

Вызов по URL-адресу из Dojo Toolkit выполняется предельно просто. Настройте аргументы для вызова, как показано в листинге 6, и передайте их в сервис.

Листинг 6. Настройка аргументов для метода dojo.xhrGet
   var args = {
      url:"mockService.php?s=" + dojo.byId("searchBox").value,
      handleAs:"xml",
      preventCache:true,
      load:function(data) { 
          // handle the data...
      },
      error:function(error) { target.innerHTML = "Error:" + error; }

Более подробно эти аргументы описываются в Таблице 1.

Таблица 1. Аргументы для метода dojo.xhrGet
АргументОписание
urlВ состав аргументов включен URL (не забывайте, что этот URL не соответству RESTful-соглашениям).
handleAsИмеет значение json, text или xml. PHP-скрипт представляет свой ответ в формате XML, поэтому здесь используется этот аргумент.
preventCacheИспользуйте значение «true», если не хотите кэшировать данные. Кэширование данных ускоряет исполнение, однако оно нежелательно, если результаты являются полностью динамическими.
loadфункция обратного вызова, исполняемая в том случае, если сервис возвращает данные.
errorфункция обратного вызова, исполняемая в случае возникновения ошибки.

После задания аргументов передайте их в метод dojo.xhrGet. Полный текст программного кода показан в листинге 7.

Листинг 7. Полный текст JavaScript-кода
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test web page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles/main.css" />
<script
    src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
    type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
    // You could move all this code to a JavaScript file and include it...
    dojo.require("dojox.xml.parser");
    
    function update() {

        if (dojo.byId("searchBox").value.length < 3 )
            return;
        
        var target = dojo.byId("suggestions");

        var args = {
                url:"mockService.php?s=" + dojo.byId("searchBox").value,
                handleAs:"xml",
                preventCache:true,
                load:function(data) { 
                    // handle the data...
                },
                error:function(error) { target.innerHTML = "Error:" + error; }
        };
        var ajaxCall = dojo.xhrGet(args);
    }
//]]>
</script>
</head>
<body>
<div id="wrapper">
<form>
<div id="search"><input id="searchBox" type="text"
    maxlength="2048" name="criteria" title="Search" onkeyup="update()" /></div>
<div id="suggestions"></div>
</form>
</div>
</body>
</html>

Помимо вызова стандартных сервисов Ajax-стиля, вы также можете использовать Dojo Toolkit для вызова Web-сервисов RESTful-стиля.

Использование RESTful-сервиса

Большинство RESTful Web-сервисов используют определенные соглашения по построению URL-адреса для вызовов определенного типа, в дополнение к HTTP-методу, используемому для этого вызова. Если вы создаете RESTful-сервис, соответствующий этим соглашениям, то для осуществления своих вызовов вы можете использовать объект dojo.rpc.Rest. Объект dojo.rpc.Rest еще больше упрощает вызовы сервисов по сравнению с традиционным подходом.

В листинге 8 показан пример вызова RESTFUL Web-сервиса с помощью Dojo Toolkit.

Листинг 8. Вызов RESTFUL Web-сервиса с помощью объекта dojo.rpc.REST
// Calling this access the URL hobbits/1 (see Table 2)
var service = dojox.rpc.Rest("hobbits");
service("1");

В таблице 2 перечислены примеры правильно построенных URL-адресов, соответствующих RESTful-соглашениям, и HTTP-действий, которые должны осуществляться с каждым типом сервиса. Обратите внимание, что не все браузеры поддерживают все HTTP-методы, поэтому вам необходимо выполнить тестирование и верификацию в соответствии со своими потребностями. Для широкой аудитории более предпочтительным может оказаться использование методов GET и POST.

Таблица 2. Стандартные URL-адреса, соответствующие RESTful-соглашениям
ДействиеHTTP-методПример URL-адреса
Найти объектGEThttp://www.example.com/hobbits/1
Найти все объектыGEThttp://www.example.com/hobbits/
Удалить объектDELETEhttp://www.example.com/hobbits/1
Создать объектPOSThttp://www.example.com/hobbits/
Обновить новый объектPUThttp://www.example.com/hobbits/1

Если вы хотите создать полную реализацию Web-сервиса RESTFUL-стиля, программные инфраструктуры помогут вам в построении URL-адресов, соответствующих RESTful-соглашениям. В разделе Ресурсы приведены ссылки на дополнительную информацию о различных инфраструктурах для разных языков.


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

Теперь, когда вы научились вызывать сервис с помощью кода Dojo Toolkit, вы можете обновить содержимое элемента div, включив в него результаты запроса. Это позволит пользователям видеть подсказки по мере ввода текста с клавиатуры.

Чтобы обновить значение элемента div, содержащего подсказки, воспользуйтесь методом dojo.byId для получения ссылки для div по идентификатору ID, и настройте свойство innerHTML, как показано в листинге 9. Метод dojo.byId – это псевдоним для традиционного JavaScript-метода document.getElementById.

Листинг 9. Обновление содержимого элемента
    // the full load function...
    load:function(data) { 
        var rootEl = data.documentElement;
        var resultHTML = "<ul>";
        for (var i = 0; i < rootEl.childNodes.length;i++) {
            resultHTML += "<li>" + 
            dojox.xml.parser.textContent(rootEl.childNodes[i]) + 
            "</li>";
        }
        resultHTML+="</ul>";
        target.innerHTML = resultHTML;
    },

Теперь, когда вы располагаете работающим программным кодом, вы можете просмотреть свою страницу index.html в браузере. Когда вы вводите с клавиатуры какое-либо значение – например, Bag – в элементе div автоматически появляются соответствующие подсказки. Хотя технология CSS (Cascading Style Sheets) в этой статье не рассматривается, вы можете применить ее для «облагораживания» вывода, оформив элементы div в виде раскрывающегося списка подсказок, основанных на введенных пользователем символах.


Работа с долго исполняющимися сервисами

При работе с долго исполняющимися сервисами с помощью Web-браузера возникают две главные проблемы:

  • Восприятие пользователя
  • Надежность

Восприятие пользователя

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

Для борьбы с этой проблемой используйте анимацию (Dojo Toolkit имеет соответствующие методы для этого) или деактивируйте кнопку Submit, чтобы пользователь не мог отправлять форму многократно. Анимированные визуальные элементы (например, идущие часы) создают у пользователя ощущение, что что-то происходит, и существенно подкрепляют его желание дождаться завершения процесса.

Надежность

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

В подобных ситуациях не рекомендуется просто вызвать сервис и ждать – особенно если время исполнения этого сервиса может составлять более нескольких секунд. Если соединение будет прервано или браузер будет закрыт, механизм обратного вызова для оповещения о завершении сервиса может не сработать.

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

Такой метод вызова сервисов позволит вам запустить процесс с большим временем исполнения на стороне сервера. В браузере вы можете реализовать запрос на уровне сервисов для выяснения состояния своего обращения (для этого можно воспользоваться объектом Timer библиотеки Dojo Toolkit). Этот метод обеспечивает пользователю как гибкость, так и стабильность.


Заключение

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

Библиотека Dojo Toolkit предоставляет методы для вызова как простых Web-сервисов, использующих Ajax, так и Web-сервисов RESTful-стиля. Этот инструментарий позволит вам обрабатывать ответы от Ajax-сервисов, представленные в форматах JSON, XML и TXT.

Ресурсы

Научиться

  • Примеры и документация по API-интерфейсу на Web-сайте Dojocampus.org.
  • Прочитайте статью RESTful web Services: The basics (developerWorks, ноябрь 2008 г.) для получения представления о базовых принципах REST.
  • Ознакомьтесь с сервисами CakePHP и REST services и прочитайте статью JAX-RS Java API for RESTful web Services.
  • Посетите Web-сайт Mastering Grails: RESTful Grails (developerWorks, сентябрь 2008 г.) и ознакомьтесь с различными способами использования Grails для создания XML вместо обычного HTML.

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

Обсудить

Комментарии

developerWorks: Войти

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


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


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

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

 


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

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

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



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

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

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

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

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

 


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


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура, SOA и web-сервисы, Open source
ArticleID=763650
ArticleTitle=Работа с Web-сервисами с помощью Dojo Toolkit
publish-date=10052011