Використання веб-сервісів в Internet Explorer

Введення


У статті розглядається приклад реалізації інтерфейсу до веб-сервісу через Internet Explorer (далі IE).

Що є цікавого в аналізованому рішенні:


Робота з веб-серівсом безпосередньо через IE річ екзотична, але може таки знадобитися в ситуаціях, коли потрібно:


  1. Максимально знизити обсяг трафіку.
  2. Часто оновлювати деяку інформацію на HTML сторінці.
  3. Знизити навантаження на веб сервері


Економія трафіку відбувається за рахунок обміну тільки даними між IE і сервісом. Так як дані приходять у відомому форматі (XML), то їх легко розібрати і вставити в потрібні місця HTML сторінки. Процес обміну даними з веб-сервісом значно спрощується, за рахунок використання Webservice Behavior (http://msdn.microsoft.com/workshop/author/webservice/overview.asp) – DHTML компонента розробленого в Microsoft спеціально для цих цілей.

Введення в DHTML компоненти.


DHTML компонент – це програма визначає поведінку (реакцію на різні події, наприклад: "onclick", "onmouseover" …) об'єкта на HTML сторінці до якого цей компонент підключений. Компонент це файл з розширенням HTC, програма в ньому може зберігатися, наприклад, на JavaScript. Так само сам DHTML компонент може вставляти об'єкти на сторінку та визначати поведінку цих об'єктів.

Наприклад, компонент "Coolbar" (http://msdn.microsoft.com/downloads/samples/internet/behaviors/library/coolbutton/coolbar_js.htm) з колекції компонентів для IE (http://ie.components.microsoft.com / behaviors /), створює на сторінці панельку кнопок і реагує на натискання на ці кнопки. Інший компонент Rowover (http://msdn.microsoft.com/downloads/samples/internet/behaviors/library/rowover/rowover_js.htm) прив'язується до існуючої таблиці і реагує на події курсору на цій таблиці.

Спрощено: DHTML компонент – це збережений у файлі скрипт, який прив'язується до певних подій на HTML сторінці та / або створює HTML елементи, на події яких він теж може реагувати.

Використовувати DHTML компоненти варто коли:


  1. HTML елементи з певним поведінкою (скрипти клієнтської сторони) повторюються у вас на багатьох сторінках.
  2. До типових HTML елементам потрібно прив'язати нестандартну поведінку. Приклад: вказаний раніше компонент "Rowover", який виділяє кольором рядок таблиці, над якою знаходиться курсор.
  3. На HTML сторінці потрібно об'єкт здатний породжувати власні події, на які можуть підписатися інші об'єкти на сторінці. Приклад такого компонента приведений в лістингу 1.

Нижче наведено приклад DHTML компонента "Updater". Цей компонент періодично звертається до веб-сервісу, отримує від нього дані і передає їх обробникам на HTML сторінці, які підписані на подію "onupdate" цього компоненту.


<EVENT NAME="onupdate" ID="update" /> / / Подія оновлення даних.
<METHOD NAME="GetUpdates" /> / / Метод для отримання даних від веб-сервісу.
<script language=”javascript”>
var webServicePath = “services/UpdateService.asmx?WSDL”;
var webServiceMethod = “GetUpdates”;
var blotterNodeName = “liabilities”;
var updateData = new ActiveXObject(“MSXML2.DOMDocument”);
var intervalID;
var gbLoading;
var wsCallID;
updateData.async = false;
element.attachEvent ("onreadystatechange", fnOnReadyStateChange);
function fnOnReadyStateChange()
{
gbLoading = (readyState != “complete”)
if (!gbLoading)
{
init();
}
}
function GetUpdates()
{
wsCallID = webService.UpdateService.callService (onWSGetUpdates, webServiceMethod);
}
function init()
{
webService.useService(webServicePath,”UpdateService”);
window.setInterval(uniqueID+”.GetUpdates()”, 5000);
/ / Раз в 5 секунд отримуємо оновлення з веб сервісу.
}
function onWSGetUpdates(result) {
if (result.error) {
HandleError(result)
} else if(!result.error) {
updateData.loadXML(result.raw.xml);
var updateNode = updateData.selectSingleNode ("/ / GetUpdatesResult");
var oEvent = document.createEventObject (); / / Конструюємо подія
oEvent.setAttribute(“updateXML”, updateNode);
/ / Додаємо отримані від веб-сервісу дані в аттрібути події
update.fire (oEvent); / / породжують події.
}
}
</script>

Лістинг 1.


Приєднання до події різних обробників виглядає так:


window.Updater.attachEvent(“onupdate”, InsertUpdate)
/ / Де InsertUpdate це функція обробна оновлення.
function InsertUpdate()
{
var objUpdateXml = window.event.updateXML;
…….
}

Підключення HTML компонента до сторінки

Необхідний СSS:


.updater
{
behavior:url(htc/updater.htc);
}

Необхідний HTML.


<div class=”updater” id=Updater></div>

Ще один приклад HTML компонента є у форумі www.gotdotnet.ru – це форма написання повідомлення.

Усередині себе компонент Webservice Behavior використовує для взаємодії з веб-сервісами ActiveX об'єкт "Microsoft.XMLHTTP".

Webservice Behavior підтримує стан сесії.

Завдання


Потрібно розробити інтерфейс для введення і відображення заявок на покупку акцій через Інтернет. Інформацію про заявки можна отримати від веб-сервісу, заявки посилаються і модифікуються через той же веб-сервіс.

Функції інтерфейсу:


  1. Надіслати заявку.
  2. Відобразити список заявок.
  3. Оновити список заявок.
  4. Відфільтрувати та відсортувати список заявок.
  5. Відредагувати заявку.

Обмеження


У клієнтів використовують інтерфейс встановлений браузер Internet Explorer не нижче версії 5.0.

Рішення


Веб-сервіс


На малюнку 1 наведена діаграма класів описує структуру веб-сервісу використовуваного для взаємодії з біржею. Синім кольором виділені класи, об'єкти яких будуть передаватися між IE інтерфейсом та веб-сервсом.


Малюнок 1

Обмін даними з веб-сервісом


Обмін даними з веб-сервісом відбувається, за схемою вказана на рисунку 2. За допомогою Web Service Behavior ми запитуємо у веб-сервісу дані, отриманий XML вставляємо в XML острівець (DataSource). При оновленні цього острівця автоматично оновлюється прив'язаний до нього споживач даних (таблиця або поле введення). При відправці даних беремо значення відповідних контролів на сторінці і відправляємо їх у веб-сервіс.



Малюнок 2

Ініціалізація веб-сервісу у клієнта


Реєструємо Web Service Behavior на HTML сторінці. Для цього створюємо CSS клас


.webservice { behavior: url(htc/webservice.htc);

який реалізує поведінку Web Service Behavior. Після чого додаємо елемент DIV цього класу на сторінку. Саме цей елемент і буде надавати можливості спілкуватися в веб-сервісом.


<div id="webService" class="webservice" showProgress="true"> </ div>

Перед зверненням до методів веб-сервісу необхідно проініціалізувати його в Web Service Behavior викликавши метод:


webService.useService ("services / OrdersEntryService.asmx? WSDL", "Exch");
webService.useService (путь_к_сервісу, імя_сервіса)

путь_к_сервісу. Приклад:services/OrdersEntryService.asmx?WSDL”

імя_сервіса. Приклад: "Exch", тут може бути будь-яке слово. Зроблено для можливості використовувати кілька веб-сервісів на сторінці.

Приклад використання веб-служб, оскільки його ініціалізації.


wsCallID = webService.Exch.callService (onWSSaveOrder, "AddOrder", order);

У момент ініціалізації Web Service Behavior отримує від веб-сервісу його опис і на основі цього опису відбувається подальша взаємодія з сервісом.

Примітка: У описі до Web Service Behavior йдеться, що в якості веб-сервісу може виступати тільки сервіс, доменна частина URL якого збігається з доменної частиною URL поточної сторінки. Простіше кажучи, якщо адреса сервісу http://mydomen/OrdersEntryService.asmx?WSDL а адреса сторінки використовує сервіс http://yourdomen/page.aspx, то вони не будуть між собою взаємодіяти. Про те, як це обійти можна прочитати тут: http://msdn.microsoft.com/workshop/author/webservice/using.asp # Security_Issues

Надіслати заявку


Для того, щоб передати об'єкт з IE інтерфейсу в веб-сервіс необхідно:


сконструювати об'єкт в IE за допомогою JavaScript
var order = new Object();
order.Side = lbxSide.options[lbxSide.selectedIndex].value;;
order.Quantity = window.document.getElementById (? tbQty?). value;
order.Instrument = ddlAssets.options [ddlAssets.selectedIndex]. value;;
order.TradingFloor = ddlTradingFloors.options [ddlTradingFloors.selectedIndex]. value;;

передати об'єкт за допомогою HTML компонента Webservice Behavior.


wsCallID = webService.Exch.callService (onWSSaveOrder, webServiceMethod, order);
/ / CallService (функція, названіе_веб_метода, параметри_веб_ методу)

функція – посилання на функцію, яка буде викликана компонентом Web Service Behavior в момент повернення даних веб сервісом (callback функція). Приклад – onWSSaveOrder.

названіе_веб_метода. Приклад – "AddOrder".

параметри_веб_ методу. Параметри веб – методу через кому.

Приклад callback функції.


function onWSSaveOrder(result) {
if (result.error) {
locked = false;
HandleError(result)
} else if(!result.error) {
try
{
returnData.loadXML(result.raw.xml);
var rowsetNode = returnData.selectSingleNode ("/ / OrderID");
alert ("Заявка успішно збережена№ заявки: "+ rowsetNode.text);
}finally
{
locked = false;
}
}
ChangeCursor(“default”);
}

Примітка: Вихідна версія цього компонента від Microsoft не дозволяє відправляти сервісу в якості параметрів об'єкти. Толі це баг, толі Фітч, але після зміни коду компоненту в рядках 675-677 ми зможемо використовувати об'єкти в якості параметрів сервісу. Виправлена версія компонента додається до статті.

Відобразити список заявок.


Список заявок відображається в таблиці, яка прив'язується до острівця даних на сторінці.


<xml id=”DataSource” ></xml>
<table datasrc=#DataSource>

При оновленні даних в XML острівці оновлюються дані та у таблиці.

Список заявок запитується методом:


webService.Exch.callService (onWSGetBlotter,? GetOrdersBlotter?, Filter,
sortColumn, sortMode);

Дані повертаються у функцію onWSGetBlotter:


function onWSGetBlotter(result) {
if (result.error) {
locked = false;
HandleError(result)
} else if(!result.error) {
try
{/ / Змінюємо XML дані у джерелі (XML острівці) DataSource.
/ / При цьому прийшли дані відображаються в табличці.
returnData.loadXML(result.raw.xml);
var reportNode = returnData.selectSingleNode ("/ / GetOrdersBlotterResult");
if(reportNode.hasChildNodes)
{
DataSource.documentElement = reportNode ;
}
}finally
{
locked = false;
ChangeCursor(“default”);
}
}
}

Оновити список заявок


Оновлення списку заявок робиться періодичними запитами даних від веб-сервісу, та оновленням на основі них XML острівця. У розвиток наведеної схеми оновлень бажано робити запит не всіх даних, а тільки оновлень. Це зажадає реалізації деякої функціональності по збору і накопиченню оновлень для кожного користувача на серверній стороні веб-сервісу. Більш легкої оптимізацією процесу оновлень може стати введення для кожного рядка таблиці прихованого поля, в якому буде міститися хеш-код даних цього рядка. При кожному відновленні порівнювати хеш-код рядка прийшла із сервера та хеш-код поточної рядка і у випадку відмінності оновлювати рядок.

Відфільтрувати та відсортувати список заявок


Фільтрація виконується за допомогою переданого в метод "GetOrdersBlotter" масиву структур типу FilterParameter. Знову ж таки, тут доводиться дуже корисною можливість передавати об'єкти та масиви об'єктів у веб сервіс.


function SetFilter()
{
var ddlTradingFloors = window.document.getElementById (? ddlTradingFloors?);
var lbxSide = window.document.getElementById(?lbxSide?);
var ddlAssets = window.document.getElementById(?ddlAssets?);
var side = lbxSide.options[lbxSide.selectedIndex].value;
var instrument = ddlAssets.options [ddlAssets.selectedIndex]. value;
var tradingFloor = ddlTradingFloors.options [ddlTradingFloors.selectedIndex]. value;
locked = true;
Filter = new Array();
try
{
if (side != 0)
{
AddToFilter(“Side”,side);
}
if (instrument != 0)
{
AddToFilter(“Instrument”,instrument);
}
if (tradingFloor != 0)
{
AddToFilter(“TradingFloor”,tradingFloor);
}
}finally
{
locked = false;
}
ClearBlotter();
GetBlotter();
}
function AddToFilter(fieldName, value)
{
var temp = new Object();
temp.Name = fieldName
temp.Value = value;
Filter[Filter.length] = temp;
}

Для сортування списку у веб сервіс передаються ім'я колонки і напрям сортування.

Відредагувати заявку


При кліці на заявці в списку, вона відкривається у формі для редагування.

Тут нам допомагає використання ще одного DHTML компонента "Rowover Behavior".

Цей компонент дозволяє прив'язувати свої обробники до події click на рядку таблиці, розфарбовувати в різні кольори рядка таблиці, відображати курсор на рядках таблиці.

Прив'язується цей компонент до таблиці за аналогією з компонентом Webservice Behavior.


<Table rules = "all" onrowclick = "onOrder_click ();" CLASS = "rowover" selectable = "true"
STRIPED=”true” datasrc=#DataSource>

Елементи форми редагування заявки пов'язані з XML острівцем даних.


<input type="text" id="tbID" size=5 datasrc=#DataSource datafld="OrderID">
<input type="text" id="tbQty" size=5 datasrc=#DataSource datafld="Quantity">
<select id="ddlStatuses" datasrc=#DataSource datafld="Status">

При зміні даних у острівці оновлюється і зміст форми.

Висновок



У статті описані можливості використання DHTML компонентів для зв'язку з веб-сервісами та функції прив'язки даних в Internet Explorer.

Це ще один спосіб, як зробити веб інтерфейс максимально схожим на інтерфейс десктопний, як знизити трафік і навантаження на сервер.

Працюючий приклад доступний за адресою: http://shelomanov.russia.webmatrixhosting.net/timetracker_cs_vs_1/.


Вихідні коди у форматі проекту VS.NET 2003: http://www.gotdotnet.com/Community/UserSamples/Download.aspx?SampleGuid=A4E19629-742E-4A73-BC53-0081D4E470FE.

Всі DHTML компоненти, використані в прикладі, доопрацьовані автором, про це згадано в тексті статті.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*