Microsoft ASP.NET AJAX: получение данных с сервера при помощи веб-сервисов - Сравнение количества переданного трафика в обоих случаях
ОГЛАВЛЕНИЕ
Сравнение количества переданного трафика в обоих случаях
Модель разработки приложения, основанная на клиенте, требует немного больше усилий для реализации, чем в случае с серверной моделью. Чтобы реализовать функциональность добавления (Add) в случае с серверной моделью необходимо преобразовать кнопку "Compute Sum" и элемент <span> в элементы управления Button и Label соответственно, расположить их в UpdatePanel и создать обработчик события Click для кнопки, где мы произведем суммирование двух чисел и отобразим их результат в элементе Label. Но преимуществом модели, основанной на клиенте, будет то, что у вас будет больше контроля над информацией, обмениваемой между клиентом и сервером. Более того, количество информации в данном случае будет значительно меньше.
Чтобы продемонстрировать весь выигрыш в объеме информации, я создал две страницы с одинаковой функциональностью, но одна использует модель, основаную на клиенте, а другая использует серверную. В частности, страница отображает товары из базы данных Northwind в элементе GridView и включает в себя интерфейс "Quick Summary Report" (Быстрый отчет) , который позволяет посетителю запускать один из трех запросов:
- "How many products cost less than X dollars?" - сколько товаров стоят меньше Х долларов?
- "How many products cost more than X dollars?" - сколько товаров стоят больше Х долларов?
- "How many products cost exactly than X dollars?" - сколько товаров стоят Х долларов?
Операция выбирается в выпадающем списке, а значение X введено при помощи текстового поля (смотрите следующий рисунок).
Страница, которая реализует подход, основанный на сервере, использует два элемента UpdatePanels: один для секции "Quick Summary Report" и второй для элемента GridView. Более того, у обоих свойства UpdateMode установлены в Conditional, тем самым обеспечивая то, что когда один UpdatePanel вызывает частичный постбэк, другой UpdatePanel не будет вовлечен в процесс. Тем не менее будет отправлена вся информация внешнего вида, независимо от того, который UpdatePanel вызывает частичный постбэк, и это состояние внешнего вида содержит в себе информацию об элементах управления обоих UpdatePanels.
Нажатие на кнопку "Reveal Answer" на странице, которая реализует серверную модель разработки, вызывает частичный постбэк и выполняет обработчик события Click элемента Button. Данный обработчик события определяет число товаров, которые удовлетворяют указанному значению, затем обновляет элемент Label результатами. Но ведь ясно, что единственная информация, которая должна быть передана между клиентом и сервером, это выбранная операция, количество долларов и результирующее число товаров, которые удовлетворяют запрос. Тем не менее, серверная модель разработки передает гораздо больше информации. Во время частичного постбэка на сервер будет отправлено около 2,400 бит информации. (Заметка: вы можете использовать Fiddler в качестве инструмента для исследования информации, отосланной во время частичного постбэка. Данный программный продукт был рассмотрен в статье "Поиск неисправностей веб-сайта путем изучения HTTP-трафика ".)
ScriptManager1=QuickSummaryUpdatePanel%7CRevealAnswer&__EVENTTARGET=&__EVENTARGUMENT=
&__VIEWSTATE=%2FwEPDwULL...&Operation=CostMore&QueryCost=5.00
&AllProducts%24ctl02%24ctl00=on&AllProducts%24ctl11%24ctl00=on
&__ASYNCPOST=true&RevealAnswer=Reveal%20Answer!
Большая часть данных получена от состояния внешного вида (который я вырезал в указанном выше коде). При этом сервер отвечает 3,500 битами информации, которая включает в себя полностью разметку области в UpdatePanel (даже притом, что было изменено только свойство Text элемента Label) наряду со всем состоянием внешнего вида.
930|updatePanel|QuickSummaryUpdatePanel|
<p>
<b>Quick Summary Report:</b>
<br />
How many products
<select name="Operation" id="Operation">
<option selected="selected" value="CostMore">Cost More Than</option>
<option value="CostLess">Cost Less Than</option>
<option value="CostExact">Cost Exactly</option>
</select>
$<input name="QueryCost" type="text" value="5.00" size="8" id="QueryCost" style="text-align: right;" />?
</p>
<p>
<input type="submit" name="RevealAnswer" value="Reveal Answer!" id="RevealAnswer" />
<span id="QueryAnswer" style="background-color:Yellow;font-size:Large;font-weight:bold;">The answer to your query: 75 products!</span>
</p>
|0|hiddenField|__EVENTTARGET||0|hiddenField|__EVENTARGUMENT||1904|hiddenField|__VIEWSTATE|/wePDwU...
Таким образом, очень много ненужной информации курсирует между клиентом и сервером. Вот цена, которую необходимо заплатить за легкость в использовании модели разработки приложений, основанной на сервере.
Пример приложения, доступный в конце данной статьи, включает в себя реализацию обеих моделей. Реализация модели, основанной на клиенте, использует вызовы веб-сервиса для определения числа товаров, удовлетворяющих указанному критерию, тем самым значительно уменьшает общий трафик. Во-первых, от клиента к серверу посылается только необходимая информация, а именно, операция на выполнение и значение цены, веденое в текстовое поле. Поиск товаров, которые стоят больше $5.00 в результате породит запрос, который потребляет всего 43 бита (вместо более 2,400, как упоминалось ранее для модели, основанной на сервере).
{"operation":"CostMore","queryCost":"5.00"}
А ответ сократился с 3,500 битов до 8!
{"d":75}
В таком случае, использование модели, основанной на клиенте, заставит нас написать немного больше кода HTML и JavaScript , но при этом мы получаем больше возможностей управления взаимодействием между клиентом и сервером, а также возможность уменьшения объема обмениваемой информации. И в результате мы получим более быстрое приложение.
Веселого программирования!
Scott Mitchell