WWW.DISSERS.RU

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

   Добро пожаловать!


Скрипт (может быть внутри страницы или во включаемом jsфайле):





function getRoubles(usd_amount) { xr = new XMLHttpRequest();

xr.onreadystatechange = showRoublesAmount;

xr.open("GET", "/getRoublesByDollars.request?" + usd_amount);

xr.send(null);

} function showRoublesAmount() { if (xr.readyState == 4) document.getElementById("rur").value = xr.responseText;

} Остается лишь реализовать getRoublesByDollars метод на сервере, запустить приложение и убедиться, что postback’а не происходит. Это можно проверить, например такими способами: отсутствием звука перегрузки страницы (характерный щелчок в IE) или (для приложений со скроллбаром) тем, что скроллер остался в той же позиции, что и до изменения поля «доллары».

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

Примеры приложений на AJAX Google Maps – http://maps.google.com/ Gmail – http://gmail.com Google Suggest – http://www.google.com/webhp?complete= MSN Virtual Earth – http://local.live.com/ (оно же http://virtualearth.com) Самая известная служба закладок – http://del.icio.us/ Известный американский фотосайт – http://www.flickr.com/ Забавный инструмент «вебнаклеек» – http://www.protopage.com Демо Показать один из сайтов, поддерживающих AJAX. В идеале, показать свое нетривиальное приложение (a la Google Maps, см. книгу “Pragmatic Ajax” – частично главы бесплатно доступны на сайте книги: http://media.pragprog.com/titles/ajax/ajaxian_maps.pdf ).

Microsoft: От ASP.NET к Web 2. Итак, мы с вами ознакомились с понятиями AJAX и Web 2.0, и реализовали собственное небольшое приложение. Возникает вопрос: а собственно, стало ли сильно лучше? Мы попрежнему программируем на JavaScript (или VBScript) и попрежнему должны обрабатывать различия браузеров.

Конечно же, существует множество технологий, поддерживающих AJAX и решающих эти проблемы. Нас, в основном, интересуют технологии Microsoft (в конце лекции мы сравним их с технологиями других производителей).

Microsoft предлагает нам собственный инструментарий для движения в Web 2.0. Как вы знаете, уже в ASP.NET можно создавать серверные контролы, которые учитывают различия браузеров (хотя по поводу их качества существуют нарекания). Что же будет дальше? Microsoft представляет себе такую картину:

Microsoft предлагает свою AJAXтехнологию под названием Atlas. Она видит два основных применения этой технологии. C помощью Atlas вы можете легко адаптировать существующие ASP.NET приложения под использование идей AJAX. Также вы можете создавать новые, еще более продвинутые вебприложения, в концепции Web 2.0.

Технология Microsoft под названием Atlas в основном фокусируется на приложениях ASP.NET 2.0 и Web 2.0, однако в целом она нацелена на весь спектр приложений. Предполагается, что в будущем smart clientприложения будут использовать ту же схему работы, что и приложения Web 2.0.

Atlas Atlas – это фреймворк для создания вебприложений с богатой функциональностью, построенный на ASP.NET 2.0. Atlas – реализация Microsoft идей AJAX для своей платформы Microsoft.NET со всеми преимуществами, предоставляемыми последней: декларативное программирование, возможность отладки, автодополнение и т.п. Целью создания Atlas, по словам Microsoft, явилась «интеграция возможностей клиентских скриптов с возможностями ASP.NET на стороне сервера, чтобы предоставить разработчикам всеобъемлющую платформу разработки».

Atlas включает в себя Клиентский фреймворк:

Согласованный объектноориентированный API для программирования на JavaScript Слой автоматического обеспечения кроссбраузерной совместимости API и компоненты, предоставляющие богатые возможности UI такие как draganddrop Behaviors – расширяемый набор «поведений», которые можно назначать элементам управления (draganddrop – один из примеров «поведения») Серверные возможности:

Pages:     || 2 | 3 |








Pages:     || 2 | 3 |

Курс "Обзор перспективных технологий Microsoft.NET"

Лекция 9, последняя. AJAX и Atlas

Вместо предисловия

«На сегодня о технологии AJAX (Asynchronous JavaScript and XML) широкие массы пользователей интернета знают немного. Пока эта технология удел профессионалов и узконаправленных сервисов, однако, уже в самом ближайшем будущем многое может измениться».

Цитата из статьи двухлетней давности Скриншотсамого, наверное, известного AJAXприложения – Google Maps Современные тенденции в разработке Webприложений Вебприложения динамично развиваются, становятся все более сложными и реализуют все более продвинутый интерфейс. Создатели современных вебприложений стремятся сделать их интерфейс как можно богаче, как можно более похожим на интерфейс настольных приложений. Этому есть объективные препятствия:

Вебприложение работает в браузере, а, значит, ограничено небольшим набором средств: HTML, CSS, JavaScript; кроме того, его функциональность ограничена тем, что предлагает хостприложение (браузер) Вебприложение имеет ограниченный доступ к ресурсам компьютера (к диску, к устройствам, к отдельным файлам) Язык JavaScript довольно неприятен – нетипизированный интерпретируемый скриптовый язык, без полноценных объектов и прочих полезных и привычных программисту настольных приложений абстракций. Слабовато поддержан различными IDE, не имеет библиотек поддержки Создателю вебприложения необходимо учитывать многочисленные мелкие различия в браузерах (объектная модель, особенности рендеринга), что также довольно неприятно: надо писать код, определяющий тип браузера и его версию, создавать различный код для одной и той же функциональности для разных браузеров; наконец, просто знать эти различия Болееменее нетривиальную функциональность надо тестировать на всем богатстве типов и версий браузеров Таким образом, создатель современного вебприложения должен разбираться в различных браузерах и быть хорошим знатоком JavaScript. Все это не является задачами программирования предметной области, что, как мы обсуждали на одной из предыдущих лекций, является сложностью, которую требуется минимизировать. Тут нам на помощь и приходят современные фреймворки, подобные Atlas.

Web 2. Web 2.0 – популярное словосочетание, очень напоминающее лозунги эпохи доткомов. В интернете можно найти много красивых слов про веб 2.0, но что же это конкретно – никто не знает, вернее, знают, но каждый – разное.

Многие под веб 2.0 подразумевают движение к вебприложениям, более похожим на настольные. Другие считают, что Web 2.0, – это использование AJAXтехнологий. Для многих это не больше чем слоган. Ссылки на интересные обсуждения этого термина см. в конце лекции.

В любом случае, Web 2.0 и AJAX обычно упоминают вместе, поэтому начнем обсуждение с того, что же такое AJAX.

Что такое AJAX Basically, what “Ajax” means is “JavaScript now works”.

Paul Graham Аббревиатура AJAX расшифровывается как Asynchronous JavaScript and XML. В AJAX не изобрели ничего нового в смысле технологий: он базируется на исключительно существующих – XHTML, CSS и JavaScript. Основная идея AJAX заключается в том, что с его помощью минимизируется количество действий пользователя, приводящих к полной перезагрузке страницы. Создатели вебприложений с помощью AJAX стараются по действию пользователя обновлять только те элементы страницы, которые должны измениться, и ни грамма больше.

AJAX можно рассматривать как идею/архитектуру или же как набор технологий, которые позволяют такую асинхронную работу.

От Web 1.0 к Web 2. Итак, сейчас мы постепенно переходим от «старого веба», или, как сейчас модно писать «Web 1.0» к Web 2.0. Чем характеризуется Web 1.0:

Перегрузка страницы по каждому действию пользователя (т.н. postback) Отдельная страница для каждого варианта дальнейших действий пользователя: для чтения данных, для редактирования данных, для поиска и т.п.

Страница возвращается с сервера целиком Страница «рендерится» (т.е. строится и отрисовывается ее визуальное представление) клиентом целиком В приложениях Web 2.0 с использованием AJAX картина кардинально меняется:

Страница не перегружается по любому чиху Становится возможным делать многоцелевые страницы Пересылается только небольшое количество информации, затрагиваемой конкретным действием пользователя Рендерится только нужная часть страницы, в которой произошли изменения Перечисленные возможности оправдывают слово Asynchronous в названии AJAX:



Запросы более не блокируют пользовательский интерфейс (вернее, они могут блокировать ту часть, которая затронута пользовательским изменением – но не всю страницу целиком) Пользователь может работать дальше с остальными частями UI По получении ответа от сервера соответствующая часть UI обновляется, в то время как пользователь продолжает свою работу с приложением Хочется также отметить, что «сходить» на сервер можно не только по submit формы, но по любому из обрабатываемых браузером событий – на нажатие клавиши и движение мыши, на нажатие кнопки клавиатуры и т.д.

Чем плохи постбэки и почему не обойтись одним JavaScript’ом Меньше всего нужны мне твои постбэки Почти Земфира Необходимость «накапливать» состояние, получившееся в результате заполнения предыдущих страниц Невозможность воспроизвести страницу с помощью закладки (при использовании POSTзапросов) Почему же не делать всё на клиенте с помощью JavaScript? Безопасность, интеллектуальная собственность (например, проверка серийного ключа, пароля или функциональность, составляющая бизнесценность) Некоторые вычисления требуют больших ресурсов (процессор, наличие БД и т.п.) Вывод? Обращаться с данными на сервер все равно надо, но хочется делать это без полной перегрузки страницы.

Объект XMLHttpRequest Этот объект впервые был реализован компанией Microsoft в виде объекта ActiveX, но сейчас он доступен как встроенный объект во всех основных браузерах. XMLHttpRequest позволяет JavaScript осуществлять асинхронные запросы к серверу без перезагрузки страницы.

Основные методы и свойства объекта XMLHttpRequest:

open("method", "URL", async, "uname", "pswd") – создает запрос к серверу.

method – тип запроса, например, GET URL – URL запроса, например http://localhost/file.xml async – если True, то будет использоваться асинхронный запрос, то есть выполнение скрипта продолжится после отправки запроса. В противном случае скрипт будет ожидать ответа от сервера, заморозив UI.

uname, pswd – логин и пароль для простой вебавторизации.

send("content") – отправляет запрос на сервер. Значением content могут быть данные для POSTзапроса или пустая строка.

abort() – останавливает текущий запрос onreadystatechange – обработчик событий, срабатывающий на каждое изменение состояния объекта. Состояния объекта могут быть следующими:

0 до того как запрос отправлен (uninitialized) 1 объект инициализирован (loading) 2 получен ответ от сервера (loaded) 3 соединение с сервером активно (interactive) 4 объект завершил работу (complete) responseText – возвращает полученные от сервера данные в виде строки.

responseXML – если ответ сервера пришел в виде правильного XML, возвращает XML DOM объект.

status – возвращает статус HTTPответа в виде числа. Например, 404 если запрашиваемая страница не была найдена на сервере.

Есть некоторые различия в создании этого объекта в разных браузерах. Увы, опять приходится создавать различный код (пример с сайта Apple, http://developer.apple.com/internet/webcontent/xmlhttpreq.html):

var req;

function loadXMLDoc(url) { req = false;

// branch for native XMLHttpRequest object if(window.XMLHttpRequest) { try { req = new XMLHttpRequest();

} catch(e) { req = false;

} // branch for IE/Windows ActiveX version } else if(window.ActiveXObject) { try { req = new ActiveXObject("Msxml2.XMLHTTP");

} catch(e) { try { req = new ActiveXObject("Microsoft.XMLHTTP");

} catch(e) { req = false;

} } } if(req) { req.onreadystatechange = processReqChange;

req.open("GET", url, true);

req.send("");

} } Demo Демонстрация «аяксификации» приложения. Можно показать такой пример:

HTMLстраница

Введите количество долларов:
В переводе на рубли это:


© 2011 www.dissers.ru - «Бесплатная электронная библиотека»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.