Опубликован: 24.03.2009 | Доступ: свободный | Студентов: 2286 / 115 | Оценка: 4.24 / 3.93 | Длительность: 17:47:00
Лекция 10:

Создание взаимодействующих с сервером приложений в Silverlight

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

Silverlight приложение выполняется в браузере, поэтому JavaScript, и в частности AJAX, могут использоваться для создания взаимодействующих с сервером Silvelight-приложений. В данном разделе рассматриваются методы, применяемые для этого, включая получение данных от серверного приложения с помощью AJAX и введение их в собственное приложение Silverlight, а также использование ASP.NET AJAX для связи с Веб-сервисом, приема данных с сервера и формирования их представления в Silver-light.

Использование AJAX

Мы собираемся создать простое приложение, формирующее данные, которые будут перехватываться AJAX-вызовом и передаваться в Silverlight для отображения. Для этого сначала необходимо создать серверное приложение, которое при вызове будет возвращать текущее время на сервере.

Создание серверного приложения для получения текущего времени

Для начала создадим новое Веб-приложение ASP.NET. Добавим в него новый универсальный обработчик ServerTime.ashx. Отредактируем код этого обработчика так, чтобы он возвращал текущее системное время в виде обычного текста. Вот полный код ASHX:

using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;

namespace AJAXSample
{
  [WebService(Namespace = "http://tempuri.org/")]
  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1 1)]
  public class ServerTime : IHttpHandler
  {
    public void ProcessRequest(HttpContext context)
    {
      context.Response.ContentType = "text/plain";
      context.Response.Write(System.DateTime.Now.ToShortTimeString());
    }
    public bool IsReusable
    {
      get
      {
        return false;
      }
    }
  }
}

При выполнении этот ASHX передаст текущее системное время в браузер, как показано на рис. 10.11.

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

Рис. 10.11. Выполнение обработчика ServerTime

Теперь рассмотрим, как можно получить эти данные и отобразить в Silverlight.

Создание клиентского приложения для отображения времени

При создании нового Silverlight-приложения с использованием JavaScript в Microsoft Visual Studio будет создано приложение с простой кнопкой, которая выглядит, как представлено на рис. 10.12. Изменим это приложение так, чтобы при загрузке страницы оно обращалось к серверу для получения времени, используя только что созданный нами обработчик ASHX, и затем выводило это время на кнопке.

 Базовое приложение Silverlight

Рис. 10.12. Базовое приложение Silverlight

Сделать это очень просто. Добавьте следующий AJAX-код в блок сценария:

var xmlHttp;
function getLatestTime() 
{
  xmlHttp = new XMLHttpRequest();
  xmlHttp.open("GET","http://localhost:42395/ServerTime.ashx",true);
  xmlHttp.onreadystatechange = handleAJAXCallback;
  xmlHttp.send(null); 
}

Если вы не знакомы с AJAX, не волнуйтесь, он достаточно прост. Первая строка создает новый объект XMLHttpRequest, который является основой всего, что делает AJAX. Обратите внимание, что мы стараемся не усложнять код, поэтому для более старых браузеров синтаксис создания объекта xmlHttp будет другим. После этого открывается URI универсального обработчика ServerTime, который был создан нами ранее.

Подсказка Чтобы этот фрагмент кода работал на вашем компьютере, не забудьте заменить URL в предыдущем фрагменте кода соответствующим URL вашего приложения.

Далее объявляется функция-обработчик события изменения свойства readyState (Состояние готовности) объекта AJAX. В этом случае формируется событие onreadystatechange (обратите внимание на чувствительность к регистру; событие должно быть записано строчными буквами), и обработчик события располагается в функции handleAJAXCallback (Обработка обратного вызова AJAX), которую вы увидите через мгновение. Наконец, вызывается функция send() объекта xmlHttp для установления сетевого соединения.

Функция handleAJAXCallback вызывается при каждом изменении свойства readyState объекта xmlHttp. Существует пять различных состояний:

  1. 0—Запрос еще не инициализирован.
  2. 1—Запрос инициализирован.
  3. 2—Запрос отправлен.
  4. 3—Запрос обрабатывается.
  5. 4—Запрос завершен.

Нас интересует состояние, свидетельствующее о завершении запроса, поэтому проводим проверку состояния 4. Вот код:

function handleAJAXCallback()
{
 if((xmlHttp.readyState == 4) && (xmlHttp.status ==200))
  {
   var SL = document.getElementById("silverlightPlugIn");
   SL.content.findName("txt").Text = xmlHttp.responseText;
  }
}

Этот код проверяет значение свойства readyState и HTTP-код состояния (в свойстве status ). Если они равны 4 и 200, соответственно (т.е. соединение было успешным), приложение находит в XAML элемент txt и задает в качестве его значение текст ответа. Обратите внимание, что в случае использования базового шаблона XAML, TextBlock с надписью на кнопке не имеет имени, поэтому не забудьте присвоить ему имя txt, чтобы гарантировать работоспособность этого кода. Свойство responseText (Текст ответа) объекта xmlHttp содержит данные, возвращенные с сервера. В данном случае, это текущее время на сервере.

И последнее, необходимо обеспечить вызов сценария при загрузке страницы. Для этого мы задаем сценарий onLoad в теге <BODY> страницы. Приведем пример:

<body onload = "getLatestTime();">

Как все это выглядит, можно увидеть на странице рис. 10.13.

 Использование AJAX для обновления приложения Silverlight

Рис. 10.13. Использование AJAX для обновления приложения Silverlight

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

В следующем разделе будут рассмотрены Веб-сервисы ASP.NET и то, как с помощью ASP.NET AJAX организовать взаимодействие между ним и Silverlight.