Технология ASP.Net AJAX

Термин Ajax был введен в 2005 году в статье Jesse James Garrett. Первоначально он использовался для обозначения семейства взаимосвязанных технологий, реализующих различные формы удаленного исполнения сценариев. В наши дни все разновидности удаленных сценарных технологий обычно помечаются префиксом AJAX. Современные решения на базе AJAX для платформы Windows основаны на объекте XmlHttpRequest.

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

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

Основным фактором, заложенным в основу удаленного исполнения сценариев, является возможность выдачи внеполосных запросов HTTP. В данном контексте под внеполосным вызовом понимается запрос HTTP, который выдается за пределами встроенного модуля, обеспечивающего отправку форм HTTP Внеполосный вызов инициируется событием страницы HTML и обслуживается компонентом-посредником (proxy component). В новейших AJAX-решениях таким посредником является объект XmlHttpRequest ; в самых первых реализациях RS им был апплет Java

Данная технология построена на принципе выполнения запроса к серверу с использованием JavaScript и получению результата опять же, с помощью JavaScript, что позволяет избежать перегрузки страницы и следовательно имеет несколько неоспоримых преимуществ:

1. На сервер отправляются не все элементы страницы (точнее не их значения), а только те минимальные данные, которые необходимы для выполнения того или иного запроса и в ответ принимается не вся страница, а только необходимые данные, что позволяет уменьшить трафик в десятки (а иногда и в сотни) раз.
2. Не происходит перегрузка страницы в браузере и у пользователя создается впечатление, что все происходит на его компьютере.

Объектная модель браузера.

Document Object Model (DOM) – это спецификация, стандартизированная W3C комитетом, которая является кроссплатформенной и описывает действия с самим документом, его структурой, HTML, XML и стилями. Как следует из названия, основой спецификации DOM являются объекты.

Спецификация DOM (Document Object Model) определяет общий интерфейс обновления содержимого, структуры и стиля документов HTML и XML, не зависящий от языка и платформы. Стандарт DOM получил признание и был ратифицирован комитетом W3C, поэтому сейчас он поддерживается все большим количеством браузеров. DOM определяет стандартный набор объектов для представления элементов, образующих документы HTML и XML. Совокупность этих объектов образует стандартный интерфейс для работы с элементами страниц HTML, или на более общем уровне — документов XML.

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

Объект XMLHttpRequest

Объект XmlHttpRequest впервые появился в Internet Explorer 5.0. Этот внутренний объект публикуется браузером для работы с его подсистемой исполнения сценариев. Сценарный код, входящий в клиентскую страницу (как правило, код JavaScript), обращается к объекту и использует его функциональность.

Что касается функциональности (несмотря на префикс XML),объект XmlHttpRequest представляет собой компактную объектную модель для отправки сценарием обращений HTTP в обход браузера. Когда пользователь щелкает на кнопке отправки формы или выполняет любое действие, приводящее к вызову метода submit объекта form модели DOM, браузер вмешивается в происходящее и берет последующую отправку запроса HTTP под свой полный контроль. С точки зрения пользователя, отправка запроса работает по принципу "черного ящика" с единственным видимым результатом: на экране появляется новая страница. Клиентский код сценария не может управлять процессом размещения и результатом отправки запроса.

Объект XmlHttpRequest дает возможность сценарному коду отправлять запросы HTTP и обрабатывать полученные ответы.

Важно заметить, что этот объект не является стандартом W3C, хотя многое из его функциональности описано в спецификации "The DOM Level 3 Load and Save Specification". По этой причине его поведение может немного отличаться в различных браузерах. Но во всех браузерах он выполняет одну и ту же функциональность – он умеет посылать запросы к серверу и получать от него ответы. Как уже говорилось выше, данный объект не стандартизирован и создание его instance может отличаться в различных версиях, поэтому для "надежного" его создания лучше использовать код, который объединяет в себе создание instance в нескольких браузерах подобно коду ниже:

var xmlHttp; 
  function createXMLHttpRequest()  
  { 
   if (window.ActiveXObject)  
   { 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
   } 
   else if (window.XMLHttpRequest)  
   { 
    xmlHttp = new XMLHttpRequest(); 
   } 
  }

XMLHttpRequest имеет ряд "стандартных" (стандартных в кавычках т.к. как писалось выше, данный объект не стандартизирован для всех браузеров) свойств и методов, которые позволяют данному объекту посылать запрос, проверять состояние запроса и получать результат выполнения запроса от удаленного сервера. Эти свойства и методы мы рассмотрим в следующих двух таблицах.

В таблице 1 представлены "стандартные" свойства XMLHttpRequest

Также XMLHttpRequest содержит ряд свойств, которые представлены ниже:

Бегло проглянув эти методы, несложно понять, какие методы достаточно вызвать, чтобы с помощью JavaScript получить какие-либо данные с сервера.

Внеполосные вызовы из страниц ASP.NET

Для веб-страницы, выдающей внеполосные вызовы, определяется одно или несколько триггерных событий, которые в результате обработки кодом JavaScript выдают запросы через объект XmHttpRequest .Триггерными событиями могут быть только события HTML, отслеживаемые реализацией DOM текущего браузера.

Код JavaScript должен инициировать обращение к удаленному URL и управлять им, как показано в следующем фрагменте:

<script type="text/javascript">
  function SendRequest(url, params) " {
   // Включение параметров в строку запроса
   var pageUrl - url + "?outofband-true&param" + params;
   /' Инициализация объекта XmlHttpRequest
   var xmlRequest, e;
   try {
    xml Request = new XMLHttpRequest();
    catch(e) { try {
    xmlRequest = new ActiveXObject('Microsoft.XMLHTTP");
   }
   catch(e) { }
  }
  // Подготовка к отправке синхронного запроса 
  POST xmlRequest,ореп("POST". pageUrl. false); 
  xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
  xmlRequest.send(nul1);
  return xmlRequest;
 }
</script>

Функция в приведенном примере получает две строки — вызываемый URL и список параметров. Формат строки запроса никак не стандартизирован и может произвольно изменяться в каждой конкретной реализации.

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

Код страницы выглядит примерно так:

<html xmlns="http://www.w3.org/1999/xhtml" > 
  <head runat="server">
    <title>Testing Out-of-band</title> 
  </head>
  <body>
    <form id="Forml" runat="server"> 
      <hl>Demonstrate Out-of-band Calls</hl> 
      <h2>%=Request.Url%></h2> 
      <hr />
 
      <asp:DropDownList runat="server" ID="EmployeeList" /> 
      <input id="Button1"  type="button" 
             value="Go Get Data" onclick="MoreInfo()" /> 
      <hr />
      <span id="Msg" /> 
    </form> 
  </body> 
</html>

Класс программной логики ( code-behind class ) приведен в следующем листинге:

public partial class _Default : System.Web.UI.Page
{ 
  protected void Page_Load(object sender, EventArgs e) 
  {
    if (IsOutOfBan())
    return; 
    if (!IsPostBack)
    PopulateList();
  }

  private bool IsOutOfBand()
  {
    if (Request.QueryString["outofband"] != null) 
    {
      String param = Request.QueryString["param"].ToString(); 
      Response.Write(ExecutePageMethod(param)); 
      Response.Flush(); 
      Response. End(); 
      return true:
    }
    return false;
  }

  private void PopulateList() 
  { 
    SqlDataAdapter adapter = new SqlDataAdapter(
        "SELECT employeeid, lastname FROM employees",
        "SERVER=(1ocal); DATABASE=northwind; UID=...;"); 
    DataTable table = new DataTable(); 
    adapter.Fill(table);
    EmployeeList.DataTextField = "lastname"; 
    EmployeeList.DataValueField = "employeeid"; 
    EmployeeList.DataSource = table; 
    EmployeeList.DataBind();
  }
  
  string ExecutePageMethod(string eventArgument) {
    return "You clicked: " + eventArgument;
  }
}