AJAX для ASP.NET и шаблоны на стороне клиента - Ограничения частичной визуализации
ОГЛАВЛЕНИЕ
Ограничения частичной визуализации
С точки зрения функциональности страница, показанная на рис. 2, работает нормально. Если вас устраивает ее производительность и поведение — отлично. Однако существуют несколько стоящих упоминания недостатков работы этой страницы, хотя они и не вызовут у вас бессонницы.
Во-первых, при каждом обновлении этой страницы пересылается немалый объем данных. Объем данных не будет проблемой на странице, которая обновляется раз в 10 минут. С помощью Fiddler или Web Development Helper можно посмотреть объем передающихся данных, который составляет около 3 КБ при загрузке и немного меньше при отправке запроса. Опять же, если такие значения укладываются в ограничения вашей задачи, то используйте частичную визуализацию и дальше.
Однако если посмотреть на внутренние механизмы работы страницы, то эти значения становятся не такими уж безобидными. При каждом обновлении состояние представления страницы пересылается на сервер и обратно. В ответе сервера содержатся как данные, так и информация об их структуре. Более того, данные слиты с окружающей разметкой и не могут быть от нее отделены. Наконец, если на странице есть другие работающие панели с таким же механизмом обновления, то на какое-то таймер может быть остановлен другой запущенной операцией частичной визуализации, или же сработавший таймер может прервать выполнение уже начавшейся операции.
Таким образом, хоть программированию частичной визуализации можно быстро научиться, а саму ее несложно реализовать, это не лучший механизм поддержки нескольких асинхронных вызовов. Давайте посмотрим, как можно переписать страницу с рис. 2 с использованием чистого подхода AJAX.
Повторное рассмотрение динамической страницы котировок
Как изменится структура динамической страницы котировок при применении подхода, основанного на чистом AJAX? На странице установлен таймер, а для вызова удаленной службы используется XMLHttpRequest. Эта служба — часть серверного компонента приложения, она использует стандартный интерфейс API Microsoft® .NET Framework для вызова финансовой веб-службы и получения данных. Затем данные в виде объекта JavaScript возвращаются в обозреватель, где ваш код должен визуализировать их для пользователя.
В чем разница? Во-первых, вызываемый URL-адрес — это не сама страница. Страница вызывает конечную точку HTTP, реализованную с помощью поддерживающей сценарии веб-службы или службы WCF. Нет ни жизненного цикла страницы, ни событий обратного вызова, ни восстановления состояния представления. В результате существенно уменьшается сетевой трафик. Для этой простой страницы полезная нагрузка в 10 раз меньше, чем при частичной визуализации. С архитектурной точки зрения работающий код удалось разделить на два хорошо разделенных блока — интерфейсная часть на стороне клиента и серверная на стороне сервера. Первый работает на JavaScript; последний в управляемом коде.
Для таких задач особенно хороша платформа AJAX для ASP.NET, потому что с ее помощью можно унифицировать программный интерфейс и типы данных так, чтобы разработчик клиента на JavaScript использовал бы такие же интерфейс и контракты поведения, как и определенные на сервере. Объектная нотация (JavaScript Object Notation, JSON) гарантирует, что объекты DTO, прибывающие на клиента, точно соответствуют данным, переданным сервером.
Давайте немного поэкспериментируем с кодом. На новой странице есть кнопка, которую нажимает пользователь, когда хочет загрузить новые данные. Я использую эту кнопку вместо таймера только для удобства:
<input type="button" id="btnRefresh"
value="Live Quotes"
onclick="_getLiveQuotes()" />
Затем обработчик JavaScript вызывает метод класса-обертки веб-службы котировок и получает коллекцию объектов StockInfo:
<%@ WebService Class="Samples.WebServices.LiveQuoteService" %>
Полный исходный код для службы показан на рис. 3.
Рис. 3 Веб-служба динамических данных по котировкам
namespace Samples.WebServices
{
[WebService(Namespace = "http://samples.ajax/")]
[ScriptService]
public class LiveQuoteService : System.Web.Services.WebService
{
private static string stocks =
ConfigurationManager.AppSettings["StockSymbols"];
private static StockPicker picker = new StockPicker(stocks);
public LiveQuoteService()
{
}
[WebMethod]
public StockInfoCollection Update()
{
return picker.Update();
}
[WebMethod]
public string GetServiceDescription()
{
return picker.GetServiceDescription();
}
}
}
В случае частичной визуализации нет естественного разделения элементов интерфейса пользователя (представления) и основной логики приложения (модели). Все собирается на сервере и в готовом виде отправляется клиенту. Настоящая архитектура AJAX предполагает, что уровень представления более интеллектуален и функционален, чем уровень бизнес-логики, и что эти два уровня физически разделены. Безусловно, архитектура с такой высокой изоляцией является намного более гибкой и лучше тестируется. Кроме того, появляется больше возможностей для кэширования данных, как показано на рис. 4.
Рис. 4 Возможные уровни кэширования в архитектуре AJAX
Данные могут кэшироваться на сервере, средствами пользовательского интерфейса поддержки и реализации (веб) службы. Кроме того, данные могут кэшироваться на пути к клиенту с помощью прокси HTTP или даже кодом JavaScript, исполняемом в обозревателе. Более важно то, что не кэшируется разметка; кэшируются только полезные данные (объекты или строки JSON), которые в любое время можно проверить на выполнение любых условий времени исполнения.
Также полезен и перенос логики визуализации на клиента, поскольку это облегчает работу и без того загруженного сервера. Если серверу приходится возвращать только небольшие блоки данных вместо того, чтобы исполнять полный жизненный цикл страницы с созданием разметки и обработкой состояния представления, то можно сэкономить загрузку ЦП и память.
Так же просто использовать AJAX для ASP.NET со стороны клиента, чтобы взаимодействовать с удаленными службами и выбирать данные в обозреватель. Например, следующий код вызывает удаленный метод:
function _getLiveQuotes()
{
Samples.WebServices.LiveQuoteService.Update(onDataAvailable);
}
function onDataAvailable(results)
{
// Update the UI
}
AJAX для ASP.NET предоставляет объект прокси JavaScript с тем же именем, что и службы на стороне сервера, а также несколько статических методов. В приведенном примере кода метод Update выбирает весь массив определения типов документов (DTD) на JavaScript и передает его функции обратного вызова, ответственной за обновление интерфейса пользователя. Переменная «results» в коде содержит ответ службы — как раз те данные, которые нужно привязать к таблице.
К сожалению, на стороне клиента нет элемента управления GridView, как при использовании ASP.NET на стороне сервера. Требуется способ привязки данных на стороне клиента, желательно с какими-то возможностями поддержки шаблонов. Пока платформа AJAX для ASP.NET не особенно может в этом помочь. Дальнейшее объяснение этого вопроса непосредственно от рабочей группы Microsoft ASP.NET находится на врезке «Дополнительные сведения: AJAX для ASP.NET»
Недавно некоторые крупные поставщики управляющих элементов ASP.NET начали предлагать серверные элементы управления с эквивалентной объектной моделью на стороне клиента. Если вы используете какую-либо из этих библиотек, то у вас в руках могут оказаться объекты JavaScript, воспроизводящие поведение серверных элементов управления, а также имеющие клиентское свойство Data source и метод DataBind. Платформа AJAX для ASP.NET предоставляет функцию автоматического создания контроллера по модели, необходимую для вызова веб-службы из клиента, но не полную платформу для разработки пользовательского интерфейса, ориентированную на AJAX; не предоставляет он и средств клиентских средств работы с шаблонами и привязки данных. Интересный материал по различным подходам к построению интерфейса пользователя с использованием AJAX представлен сообщением Мильяна Братицевича (Miljan Braticevic) на go.microsoft.com/fwlink/?LinkID=116054.