НОУ ИНТУИТ | Перспективные технологии и языки веб-разработки. Лекция 15: Web 2.0. Создание динамических веб-страниц на клиентской стороне. AJAX. Семантический Web. Mashups

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 04.07.2012 | Уровень: специалист | Доступ: платный

|

Вам нравится? Нравится 48 студентам

| Поделиться |

Поддержать программу

ASP.NET AJAX

Microsoft .NET предоставляет в распоряжение разработчиков свою реализацию AJAX технологии - ASP.NET 2.0 AJAX.

С архитектурной точки зрения, инфраструктура ASP.NET 2.0 AJAX состоит из двух элементов:

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

Пример AJAX приложения

Рассмотрим пример системы, имитирующей работу сервиса Google Suggest на основе AJAX.

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

Начнем с веб-страницы:

<html>
<head>
<script src="chint.js"></script> 
</head>
<body>
<form> 
First Name:
<input type="text" id="txt1" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p> 
</body>
</html>

Как видно из кода, при наступлении события onkeyup (отжатие клавиши) вызывается обработчик showHint().

В файле 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;
}

Из кода видно, что каждый раз, когда вводится символ, вызывается функция-обработчик. Если при этом содержимое текстового поля формы непустое (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:
```
xmlHttp = new XMLHttpRequest(). 
```
В случае неудачи, делается следующая попытка создания объекта для Internet Explorer 6.0+ :
```
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"). 
```
Если это также не удается, то делается попытка создания объекта уже для Internet Explorer 5.5+ :
```
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"). 
```
В случае, если ни одна из этих попыток не принесла успеха, выдается сообщение об отсутствии поддержки AJAX браузером.

На веб-сервере в файле с именем ghint.php размещен следующий PHP сценарий:

<?php
  header("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 > 0
  if (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;
?>

На скриншоте показана работа в браузере с веб-страницей ghint.html, использующей AJAX:

увеличить изображение

Мэшапы

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

Наиболее часто мэшапы используют программные интерфейсы представляемые Аmazon, eBay, Flickr, Google, Microsoft, Yahoo и YouTube.

Архитектура мэшапа включает в себя 3 части:

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

Различные типы мэшапов могут генерировать RSS, веб-сервисы, мгновенные и почтовые сообщения.

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

В качестве примера можно привести использование картографических данных GoogleMaps для добавления к ним данных о недвижимости в Cragislist (в результате создается новый уникальный веб-сервис, изначально не предлагаемый ни одним из источников).

Среди мэшапов можно выделить следующие группы:

Потребительские мэшапы - комбинируя данные различных типов из нескольких источников, предоставляют доступ к ним с помощью единого графического интерфейса. Наиболее известный пример - многочисленные приложения Google Maps,
Мэшапы данных - комбинируя данные одного типа из нескольких источников, предоставляет доступ к ним с помощью единого графического интерфейса. Пример - Yahoo!Pipes позволяет пользователям получать потоки информации из разных источников и создавать правила по управлению полученным контентом (например, используя фильтры).
Бизнес-мэшапы - акцент делают на различных способах аггрегирования и представления данных, предоставляя новые возможности для совместной работы представителей бизнеса и разработчиков.

Хотя мэшапы также как и порталы являются технологиями аггрегирования контента, имеется принципиальное отличие между ними. Порталы - более ранняя технология, являющаяся, по-сути, расширением традиционных динамических веб-приложений, в которых процесс преобразования данных в гипертекстовые документы разбивается на два этапа: генерация отдельных частей разметки и объединение их на одной странице. За генерацию каждой из частей отвечает соответствующие портальные приложения, исполняемые на портальном сервере или другом сервере. Портальная технология является серверной технологией, отвечающей за аггрегирование данных только на уровне представления.

Компания Microsoft предоставляет пользователям специальный сайт Microsoft Popfly, коотрый позволяет пользователям создавать веб-страницы, фрагменты программного кода (для повторного использования) и мэшапы с помощью пакета разработки приложений с поддержкой Microsoft Silverlight .

На сайте имеются четыре инструмента, основанные на Microsoft Silverlight:

Разработчик игр
Разработчик мэшапов
Разработчик веб-страниц
Popfly Space - пространство для размещения готовых мэшапов и веб-страниц, доступных пользователям.

Дальше >>

Профессиональный веб-дизайн

Перспективные технологии и языки веб-разработки

Лекция 15: Web 2.0. Создание динамических веб-страниц на клиентской стороне. AJAX. Семантический Web. Mashups

ASP.NET AJAX

Пример AJAX приложения

Мэшапы

Вопросы и ответы

Авторизоваться

Профессиональный веб-дизайн

Перспективные технологии и языки веб-разработки

Лекция 15: Web 2.0. Создание динамических веб-страниц на клиентской стороне. AJAX. Семантический Web. Mashups

ASP.NET AJAX

Пример AJAX приложения

Мэшапы

Вопросы и ответы