AJAX (Asynchronous JavaScript and XML) – это концепция использования нескольких смежных технологий, ориентированная на разработку высокоинтерактивных приложения, быстро реагирующих на действия пользователя, выполняющих большую часть работы на стороне клиента и взаимодействующих с сервером посредством внеполосных обращений. Внеполосным обращением называется запрос к серверу, который приводит к оперативному обновлению страницы вместо ее замены. Внеполосный вызов HTTP – это HTTP запрос, который выдается за пределами встроенного модуля, обеспечивающего отправку форм HTTP. Вызов инициируется событием, связанным со страницей HTML и обслуживается компонентом-посредником, обычно объектом XmlHttpRequest. Популярность AJAX связана с появлением сервиса Google Suggest в 2005 году. Данный сервис на основе объекта XMLHttpRequest предоставляет в распоряжение пользователя достаточно динамический веб-интерфейс. В процессе ввода символов пользователем в поле поискового запроса JavaScript отправляет их на сервер и получает от него список подсказок:  AJAX применяется для разработки веб-приложений, к которым предъявляются следующие требования: - Приложение должно передавать пользователям свежие данные, полученные с сервера.
- Новые данные должны интегрироваться в существующую страницу без ее полного обновления.
Для работы с такими приложениями в браузере, необходимо, чтобы он соответствовал требованиям: - Поддержка посредников (для внеполосных вызовов HTTP). Обычно реализуется в форме объекта XmlHttpRequest.
- Поддержка обновляемой модели DOM.
Объект XmlHttpRequest представляет собой компактную объектную модель для отправки сценарием обращений HTTP в обход браузера. Клиентский код сценария не может влиять на процесс размещения запроса и результат отправки запроса. XmlHttpRequest позволяет сценарию отправлять HTTP запросы и обрабатывать полученные ответы. В качестве формата передачи данных обычно используются JSON или XML. JSON (JavaScript Object Notation) - текстовый формат обмена данными, основанный на JavaScript и обычно используемый именно с этим языком. Несмотря на происхождение от JavaScript, формат считается языково-независимым и может использоваться практически с любым языком программирования. Для многих языков существует готовый код для создания и обработки данных в формате JSON. JSON строится на двух структура данных: - Набор пар имя/значение. В различных языках это реализовано как объект, запись, структура, словарь, хэш-таблица, список с ключом или ассоциативный массив.
- Пронумерованный набор значений. Во многих языках это реализовано как массив, вектор, список или последовательность.
Следующий пример показывает JSON-представление объекта, описывающего преподавателя. { "firstName": "Сергей", "lastName": "Иванов", "profile": { "position": "доцент, к.ф.-м.н.", "department": "кафедра информационных систем", "age": 40 }, "subjects": [ "интернет-технологии", "информационные технологии" ] } Microsoft.NET предоставляет в распоряжение разработчиков свою реализацию AJAX технологии - ASP.NET 2.0 AJAX. С архитектурной точки зрения, инфраструктура ASP.NET 2.0 AJAX состоит из двух элементов: - Библиотека клиентских сценариев(реализована на JavaScript). Работает в любом современном браузере.
- Набор серверных расширений. Полностью интегрируется с серверными службами и управляющими элементами ASP.NET. Разработчики могут создавать веб-страницы с расширенной функциональностью, используя практически такую же методику, которая используется при разработке серверных страниц ASP.NET.
Разработка мобильных веб-приложений Для получения доступа к ресурсам интернет посредством только мобильного телефона, не прибегая к помощи компьютера или модема был разработан специальный стандарт WAP. WAP (Wireless Application Protocol) - протокол доступа к ресурсам Интернет непосредственно с мобильного телефона, минуя компьютера и/или модем. Для разметки документов при загрузке их в сотовых телефонах и других мобильных устройствах по стандарту WAP также был разработан и специальный язык - WML (Wireless Markup Language). Изначально WAP создавался для широкого круга технологий и стандартов беспроводной мобильной связи: сотовой, транковой, пейджинговой и микросотовой, а также для поддержки сетей 3G. Данный стандарт инвариантен к операционному ядру, с которым взаимодействует WAP-браузер и разрабатывался как открытый стандарт для беспроводной передачи данных, не зависящий от поставщиков устройств и услуг, оптимизированный для мобильных телефонов, имеющих дисплей с маленьким разрешением, ограниченной памятью и невысокой производительностью. WAP 2.0 - усовершенствованная версия WAP, которая использует урезанный вариант XHTML и CSS. Это позволяет работать с WAP 2.0 сайтами с помощью обычного браузера на компьютере без установки каких-либо дополнительных плагинов. XHTML MP (XHTML Mobile Profile) - язык разметки в WAP 2.0, разработанный для мобильных устройств. Архитектура WAP аналогична WWW. В WAP используется тот же самый способ адресации ресурсов и те же обозначения типов данных. В качестве клиента выступает мобильное устройство со встроенным WAP-браузером, запросы от которого через WAP-шлюз передаются веб-серверу, и ответ от последнего через него же отправляется клиенту. В качестве сервера может выступать самый обычный веб-сервер. В этом случае между WAP-шлюзом и сервером используется протокол HTTP. С целью уменьшения объема передаваемых данных, текстовые ресурсы, пришедшие от сервера, передаются клиенту в двоичном виде. Язык WML напоминает HTML, но ориентирован на устройства с экраном низкого разрешения и с небольшим размером памяти. Вся информация в WML содержится в так называемых " деках ". Дек - это минимальный блок данных, который может быть передан сервером. В деках находятся " карты " (каждая карта ограничена тегами <card>). На экране устройства в каждый момент времени отображается только одна карта, а пользователь может переключаться между ними переходя по ссылкам. Размер WML-страницы должен находится в пределах от 1-4 килобайт. Например WML-страница: <?xml version='1.0'?> <!DOCTYPE wml PUBLIC '-//WAPFORUM//DTD WML 1.1//EN' 'http://www.wapforum.org/DTD/wml_1.1.xml'> <wml> <head> <meta http-equiv="Cache-Control" content="max-age=0" /> </head> <card> <p>Hello world!</p> </card> </wml> отобразится на дисплее мобильного телефона таким образом (был использован программный эмулятор телефона):  Многие мобильные устройства могут отображать документы только в WBXML-формате. WBXML (WAP Binary XML) - формат компактного бинарного представления XML. WBXML используется для передачи через беспроводные соединения с низкой скоростью. Некоторые браузеры со специальным плагинами, позволяют просматривать WML-страницы на обычном компьютере. В настоящее время наблюдается тенденция перехода от WML к XHTML. Microsoft.NET для создания веб-приложений для мобильных устройств. В распоряжение разработчиков инструмент .NET Mobile .NET Mobile представляет собой расширение Microsoft ASP.NET и Microsoft.NET Framework. По-сути, .NET Mobile представляет собой набор серверных управляющих элементов для форм, ориентированных на использование в беспроводных мобильных устройствах. Эти элементы управления генерируют разный код для различных устройств на языках WML, HTML или Compact HTML (cHTML). Управляющие элементы ASP.NET Mobile расширяют функции SDP (Smart Device Programmability) и платформу .NET Compact Framework. Они позволяют использовать возможности платформы.NET Compact Framework и среды разработки Visual Studio.NET для создания мобильных веб-приложений благодаря возможности доставки данных на разнообразные мобильные устройства при помощи технологии ASP.NET. Этот подход позволяет создать в среде Visual Studio.NET единое мобильное веб-приложение, автоматически производящее формирование данных для отображения на разнообразных устройствах: мобильных телефонах, пейджерах, смартфонах, Pocket PC и др. При этом интегрированная среда разработки позволяет создавать мобильные веб-приложения, просто перетаскивая управляющие элементы в дизайнер форм. Система .NET Mobile не устанавливает никаких компонентов на клиентское устройство. Для адаптации форматирования под конкретные браузеры используется серверная логика. Она генерирует данные в форматах WML, HTML, и cHTML. Помимо адаптивной генерации веб-страниц, технология.NET Mobile предоставляет богатый набор средств индивидуализации и расширения, обеспечивая простой способ осуществления поддержки новых устройств. Кроме того, технология.NET Mobile позволяет разработчикам управлять представлением данных для конкретного устройства или класса устройств в одной программной модели и обеспечивает легкую реализацию поддержки новых устройств без переделки существующих веб-приложений. - Мобильное устройство. С него исходит запрос на загрузку веб-страницы.
- Интернет. Запрос передается через сеть соответствующему веб-серверу.
- Веб-сервер IIS получает запрос от мобильного устройства и передает его обработчику.
- .NET Framework выполняет обработку запроса.
- ASP.NET компилирует запрашиваемый устройством документ.
- .NET Mobile. Реализует элементы веб-страницы с учетом требований конкретного типа мобильного устройства.
- Веб-страница возвращается обратно клиентскому устройству.
33. Лабораторная работа: Реализация асинхронного взаимодействия веб-браузера с веб- сервером с помощью технологии AJAX Цель работы: ознакомление с принципами асинхронного взаимодействия между веб-клиентом и веб-сервером в рамках технологии AJAX. AJAX = Asynchronous JavaScript and XML. AJAX – не является новым языком программирования, но технология создания улучшенных, более быстрых и в большей степени интерактивных веб-приложений. JavaScript сценарий посредством AJAX может непосредственно взаимодействовать с сервером с помощью объекта XMLHttpRequest. Использование данного объекта обмен данными с веб-сервером могут происходить без перезагрузки страницы. AJAX позволяет веб-страницам запрашивать небольшие объемы информации с сервера нежели целиком всю страницу в результате асинхронной передачи данных (в рамках HTTP протокола) между браузером и сервером. AJAX не зависит от программного обеспечения веб-сервера и основан на следующих веб-стандартах: Поскольку эти веб-стандарты четко определены и имеют поддержку в наиболее распространенных веб-браузерах, то AJAX приложения являются браузеро- и платформо-независимыми. Популярность AJAX связана с появлением сервиса Google Suggest в 2005 году. Данный сервис на основе объекта XMLHttpRequest предоставляет в распоряжение пользователя достаточно динамический веб-интерфейс. В процессе ввода символов пользователем в поле поискового запроса JavaScript отправляет их на сервер и получает от него список подсказок. Объект XMLHttpRequest поддерживается в Internet Explorer (начиная 5 версии и выше), Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+ и Netscape 7. Порядок выполнения лабораторной работы В данной лабораторной работе рассматривается пример системы, имитирующей работу сервиса Google Suggest на основе AJAX. 1. Реализация клиентской части. Предполагается, что пользователь может вводить в текстовое поле формы название автомобильной марки, получая при этом динамически список вариантов названий, соответствующих уже введенным символам, без перезагрузки страницы. - Создайте следующую веб-страницу:
2. <html>3. <head>4. <script src="chint.js"></script> 5. </head>6. <body>7. <form> 8. First Name:9. <input type="text" id="txt1" onkeyup="showHint(this.value)">10. </form>11. <p>Suggestions: <span id="txtHint"></span></p> 12. </body>13.</html> Как видно из кода, при наступлении события onkeyup (отжатие клавиши) вызывается обработчик showHint(). - В файле chint.js сохраните следующий код обработчика
Код обработчика загружается из файла chint.js: var xmlHttp;function showHint(str){if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; }xmlHttp=GetXmlHttpObject();if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url = "ghint.php";url = url + "?q=" + str;url = url + "&sid=" + Math.random();xmlHttp.onreadystatechange = stateChanged;xmlHttp.open("GET", url, true);xmlHttp.send(null);} function stateChanged() { if (xmlHttp.readyState==4){ document.getElementById("txtHint").innerHTML = xmlHttp.responseText;}}function GetXmlHttpObject(){var xmlHttp=null;try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); }catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } }return xmlHttp;} Пример 33.1. (html, txt) Из кода видно, что каждый раз, когда вводится символ, вызывается функция-обработчик. Если при этом содержимое текстового поля формы непустое (str.length > 0), функция выполняет следующие действия: - Формируется url для отправки веб- серверу
- Добавляется значение параметра q, равное содержимому текстового поля, к url
- Добавляется к url случайное число для предотвращения кеширования
- Создается объект XMLHTTP, при этом указывается функция (stateChanged) подлежащая исполнению при наступлении события ввода символа
- Открывается объект XMLHTTP с указанным значением url
- Отправляется HTTP запрос веб-серверу
Если поле ввода пустое, происходит очистка содержимого раздела txtHint на веб-странице. Ключевым моментом в данной системе является использование объекта XMLHttpRequest. Данный объект по-разному создается в различных браузерах. Так, Internet Explorer для этого использует ActiveXObject, в то время как остальные браузеры используют встроенный в JavaScript объект XMLHttpRequest. Для поддержки работы системы в разных браузерах использован оператор "try-catch". - Сначала делается попытка создать объект XMLHttpRequest для браузеров Firefox, Opera или Safari:
o xmlHttp = new XMLHttpRequest(). - В случае неудачи, делается следующая попытка создания объекта для Internet Explorer 6.0+:
o xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"). - Если это также не удается, то делается попытка создания объекта уже для Internet Explorer 5.5+:
o xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"). - В случае, если ни одна из этих попыток не принесла успеха, выдается сообщение об отсутствии поддержки AJAX браузером.
2. Реализация серверной части. Разместите на веб- сервере в файле с именем ghint.php следующий PHP сценарий:: <?phpheader("Cache-Control: no-cache, must-revalidate"); // Прошедшая датаheader("Expires: Mon, 1 Sep 2008 07:30:00 GMT");// Инициализация массива названий$a[]="Audi";$a[]="BMW";$a[]="Buick";$a[]="Chevrolet";$a[]="Citroen";$a[]="Dodge";$a[]="Ferrari";$a[]="Fiat";$a[]="Ford";$a[]="Honda";$a[]="Hyundai";$a[]="Cherokee";$a[]="Cherry";$a[]="Lada";$a[]="Lamborghini";$a[]="Lincoln";$a[]="Mazda";$a[]="Mercedes";$a[]="Mitsubishi";$a[]="Nissan";$a[]="Opel";$a[]="Peugeot";$a[]="Plymoth";$a[]="Pontiac";$a[]="Renault";$a[]="Rover";$a[]="Saab";$a[]="Subaru";$a[]="Suzuki";$a[]="Toyota";$a[]="Volkswagen";$a[]="Volvo";//получение параметра q из URL$q = $_GET["q"];//поиск соответствий из массива если длина q > 0if (strlen($q) > 0){ $hint = ""; for($i = 0; $i<count($a); $i++) { if (strtolower($q) == strtolower(substr($a[$i],0,strlen($q)))) { if ($hint == "") { $hint=$a[$i]; } else { $hint=$hint.", ".$a[$i]; } } }}// Возврат строки "нет вариантов" если соответствий не найдено// либо найденное соответствиеif ($hint == ""){$response = "no suggestion";}else{$response = $hint;}//вывод результатаecho $response;?> Пример 33.2. (html, txt) 3. Проверка работоспособности системы. Проверьте с помощью подходящего веб-браузера работу системы. На скриншоте показана работа в браузере с веб-страницей ghint.html, использующей AJAX:  Контрольное задание С использованием PHP-сценария №7 из лабораторной работы 10 разработайте модифицированный вариант калькулятора для четырех арифметических операций, в котором происходит асинхронная передачи данных между браузером и сервером (с помощью AJAX). На скриншоте выше показана работа в браузере с веб-страницей ghint.html, использующей AJAX: 34. Лабораторная работа: Создание мобильных веб-приложений при помощи ASP.NET Цель работы: демонстрация некоторых возможностей разработки мобильных веб-приложений с помощью управляющих элементов ASP.NET Mobile. В данной лабораторной работе демонстрируется применение управляющих элементов ASP.NET Mobile для создания веб-приложений для мобильных устройств. .NET Mobile представляет собой расширение Microsoft ASP.NET и Microsoft.NET Framework. По-сути,.NET Mobile представляет собой набор серверных управляющих элементов для форм, ориентированных на использование в беспроводных мобильных устройствах. Эти элементы управления генерируют разный код для различных устройств на языках WML, HTML или Compact HTML (cHTML). Управляющие элементы ASP.NET Mobile расширяют функции SDP (Smart Device Programmability) и платформу .NET Compact Framework. Они позволяют использовать возможности платформы.NET Compact Framework и среды разработки Visual Studio.NET для создания мобильных веб-приложений благодаря возможности доставки данных на разнообразные мобильные устройства при помощи технологии ASP.NET. Этот подход позволяет создать в среде Visual Studio.NET единое мобильное веб-приложение, автоматически производящее формирование данных для отображения на разнообразных устройствах: мобильных телефонах, пейджерах, смартфонах, Pocket PC и др. При этом интегрированная среда разработки позволяет создавать мобильные веб-приложения, просто перетаскивая управляющие элементы в дизайнер форм. Система .NET Mobile не устанавливает никаких компонентов на клиентское устройство. Для адаптации форматирования под конкретные браузеры используется серверная логика. Она генерирует данные в форматах WML, HTML, и cHTML. Помимо адаптивной генерации веб-страниц, технология .NET Mobile предоставляет богатый набор средств индивидуализации и расширения, обеспечивая простой способ осуществления поддержки новых устройств. Кроме того, технология .NET Mobile позволяет разработчикам управлять представлением данных для конкретного устройства или класса устройств в одной программной модели и обеспечивает легкую реализацию поддержки новых устройств без переделки существующих веб-приложений. Общая последовательность работы.NET Mobile выглядит следующим образом: - Мобильное устройство. С него исходит запрос на загрузку веб-страницы.
- Интернет. Запрос передается через сеть соответствующему веб- серверу.
- Веб- сервер IIS получает запрос от мобильного устройства и передает его обработчику.
- .NET Framework выполняет обработку запроса.
- ASP.NET компилирует запрашиваемый устройством документ.
- .NET Mobile. Реализует элементы веб-страницы с учетом требований конкретного типа мобильного устройства.
- Веб-страница возвращается обратно клиентскому устройству.
Наиболее распространенными элементами управления форм для мобильных устройств являются следующие: | Название | Функция | | Command | Выполнение действия | | Form | Контейнер для элементов управления | | Image | Изображение | | Label | Текст | | Link | Гиперссылка | | List | Список | | MobilePage | Контейнер для элементов управления | | ObjectList | Список объектов | | Panel | Контайнер для других элементов управления | | SelectionList | Список с выбором | | StyleSheet | Стили для других элементов управления | | TextBox | Поле для ввода однострочного текста | | TextView | Поле для ввода многострочного текста | | |
2015-09-06
797
