Перейти к содержанию

AJAX

Материал из Викиучебника — открытых книг для открытого мира
Логотип Википедии
Логотип Википедии

В Википедии имеется статья по теме «AJAX»

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

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

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

При использовании Google или web-клиента Gmail вам уже приходилось сталкиваться с решением, основанном на AJAX. Это технология-конгломерат, которая обеспечивает динамическое и асинхронное поведение, где исключается обновление страниц. Посредством AJAX пользователь может взаимодействовать с web-страницами, подобно работе с клиентами с более богатыми возможностями.

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

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

AJAX — это коллекция технологий, существующих с момента появления Web. А вот и возможности, предоставляемые AJAX (как это представил Джис Джеймс Гаррет (Jesse James Garrett), он первым ввел термин 'AJAX' для асинхронного JavaScript + XML):

  • Стандартно-базированная презентация с использованием XHTML и CSS;
  • Динамическое отображение и взаимодействие с использованием объектной модели документа;
  • Взаимообмен данными и манипуляция с задействованием XML и XSLT;
  • Асинхронное извлечение данных с использованием XMLHttpRequest;
  • JavaScript, связывающий все вместе.

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

Как работает AJAX

[править]

Если вы когда-либо пользовались веб-контентом Gmail или Google Maps, то замечали возможность проверки правописания и прокрутки по всему изображению, соответственно, без обновления страниц. AJAX — это технология, созданная на языке JavaScript, которая асинхронно запрашивает и получает с сервера данные, предоставляющие желаемый результат.

В основе технологии AJAX лежит объект XMLHttpRequest. Изначально он появился в Internet Explorer, а затем — в Mozilla/Safari, и позже - в Opera.

AJAX в действии

[править]

Действие AJAX легче всего показать на портальном сценарии: просмотр сообщений электронной почты. Большинство веб-порталов позволяют пользователям предварительно просматривать содержимое почтового ящика с основной страницы. Однако, чтобы просмотреть содержимое сообщения, необходимо отдельно щелкнуть на каждом сообщении, при этом страница должна обновляться каждый раз. На этом примере можно увидеть возможность осуществления более богатого поведения, подобно аналогичному в Outlook Express и Mozilla Thunderbird, при этом задействовав существующие веб-технологии AJAX.

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

Чтобы получить доступ к содержимому сообщения, нужен серверный компонент, предоставляющий доступ к сообщениям. В нашем примере есть простой сервлет в качестве имитатора, который показывает сообщения через запятую в следующем формате: от кого, тема, дата и тело сообщения: 

@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  if ("1".equals(req.getParameter("message_id"))) {
    resp.getWriter().println( "John Doe,Greetings,10 10-2005,Hi.I am doing good" ) ;
  } else if ("2".equals(req.getParameter("message_id"))) {
    resp.getWriter().println( "Joanna Doe,Hi,10-10-2005,Document is complete." );
  } else if ("3".equals(req.getParameter("message_id"))) {
    resp.getWriter().println("Joanna Doe,Hi,10-10-2005,Meeting is at 3.");
    ...
  } else {
    resp.getWriter().println( "NA,NA,NA,Nothing to display" );
  } //end else
} //end service

Следующий пример на С# для ASP.NET. Функционально он аналогичен сервлету и приводим мы его лишь для того, чтобы убедить читателей, что для работы с AJAX не важно на каком языке написана ваша серверная часть. 

public class service: System.Web.UI.Page
{
  private void Page_Load(object sender, System.EventArgs e)
  {
    if (Request.Params["message_id"] != null)
    {
      switch (Request.Params["message_id"])
      {
        case "1":
          Response.Write("John Doe,Greetings,10-10-2005,Hi.I am doing good");
          break;
        case "2":
          Response.Write("Joanna Doe,Hi,10-10-2005,Document is complete.");
          break;
        case "3":
          Response.Write("Joanna Doe,Hi,10-10-2005,Meeting is at 3.");
          break;
      }
    }
    else
    {
      Response.Write(",NA ,NA ,NA ,Nothing to display");
    }
  }
.....
}

В портале будет находиться окошко/портлет портала по просмотру почты с упрощенным списком входящих сообщений слева и панелью просмотра справа. Если щелкнуть мышью на сообщении слева, то на панели просмотра будет виден запрос к серверу и вывод текста сообщения на экран в реальном времени, в этом процессе задействован AJAX.

Создаем портлет для просмотра почты в Сети

[править]

Для начала необходимо создать веб-страничку, имитирующую типичный портлет для веб-почты, и встроить события onMouseOver JavaScript, запускающие вызовы AJAX

В этом случае события «onMouseOver» прилагаются к полям таблицы (ПТ) с именами отправителей. Выбор полей с данными и запуск событий для вызовов AJAX предназначены строго для иллюстративных целей: 

<form name="inbox">
  <table style="previewTable">
    <thead id="tableHeader">
      <tr>
        <td>From</td>
        <td>Subject</td>
      </tr>
      </thead>
      <tbody>
        <tr class="even">
          <td onMouseOver="displayMessageBody(1)">John Doe</td>
          <td>Greetings</td>
        </tr>
        <tr>
          <td onMouseOver="displayMessageBody(2)">Joanna Doe</td>
          <td>Status of the report</a></td>
        </tr>
        <tr class="even">
          <td onMouseOver="displayMessageBody(3)">Jim Doe</td>
          <td>Meeting is today</td>
        </tr>
        ...
      </tbody>
    </table>
  </div>
  <div id="preview">
    <input id="messageBody" class="message" type="textarea" READONLY value=""/>
  </div>
</form>

Обратите внимание на то, что поле ввода «messageBody» — единственное, которое будет наполнено методом displayMessageBody, принимающим ID сообщения как параметр. Вызов AJAX будет использовать этот параметр для запроса деталей сообщения с сервера.

Вызов AJAX

[править]

Ключевым моментом нашего примера является вызов AJAX. Обратите внимание на то, что для различных браузеров требуются разные методы реализации для объекта XMLHttpRequest: 

<script>
function getHTTPRequestObject() {
  var xmlHttpRequest;
  /*@cc_on
  @if (@_jscript_version >= 5)
  try {
    xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (exception1) {
    try {
      xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (exception2) {
      xmlHttpRequest = false;
    }
  }
  @else
    xmlhttpRequest = false;
  @end @*/

  if (!xmlHttpRequest && typeof XMLHttpRequest != 'undefined') {
    try {
      xmlHttpRequest = new XMLHttpRequest();
    } catch (exception) {
      xmlHttpRequest = false;
    }
  }
  return xmlHttpRequest;
}

var httpRequester = getHTTPRequestObject(); /* Когда страница
                            загрузилась, создаем xml http объект */
</script>

В данном коде используются аннотации Internet Explorer для реализации объекта AJAX. Другие браузеры, выполняющие данный сценарий, будут просто игнорировать разделы с аннотациями к функции getHTTPRequestObject(). Помните о том, что ваш браузер должен поддерживать JavaScript v1.5 и более поздние версии.

Асинхронная загрузка данных

[править]

Теперь мы выполним асинхронную активизацию веб-ресурсов. Ниже представлены действия, необходимые для асинхронной загрузки веб-ресурсов из функции JavaScript: 

var couldProcess = false;
function displayMessageBody( messageID ) {
  idToDisplay = messageID;
  if (!couldProcess && httpRequester) {
    httpRequester.open("POST", serverSideURL + escape(messageID),true);
    httpRequester.onreadystatechange = processResponse;
    couldProcess = true;
    httpRequester.send(null);
  }
}

Для вывода сообщения на экран метод displayMessageBody принимает ID этого сообщения. Посредством передачи следующих трех параметров для объекта XMLHttpRequest определяется получение доступа к URL:

  • Метод POST или GET;
  • URL плюс любой ушедший параметр (в этом случае передается только ID. Для определения многопараметрических URL необходимо использовать обозначения строки запроса стандартного URL и делать переход);
  • Свойство типа Boolean обозначает, должен ли вызов выполняться асинхронно. Вышеупомянутый метод также определяет метод processResponse по обработке содержимого как callback, активизируемый при загрузке содержимого из URL.

Обработка данных

[править]

Вышеупомянутый метод processResponse активизируется как callback. Он извлекает вывод объекта XMLHttpRequest, проводит синтаксический анализ и присваивает вывод объектам страницы. 

function processResponse() {
  if ( httpRequester.readyState == COMPLETE ) { //это константа, объявлена локально, ее значение равно 4
    if ( httpRequester.responseText.indexOf('invalid') == -1 ) {
      var values = httpRequester.responseText.split(","); //анализируем ответ сервера
        //(Внимание: если в теле сообщения есть запятая, то оно будет обрезано!)
      document.getElementById('messageBody').value = values[3]; //выбираем 4-е значение и текущее сообщение
      couldProcess = false;
    }
  }
}

HttpRequester.readyState является индикатором завершенности кода URL. Он может принимать следующие значения:

  • 0 = не инициализирован
  • 1 = открыт
  • 2 = отправка запроса
  • 3 = получение данных
  • 4 = завершенный (в нашем примере внимание фокусируется на этом состоянии.)

Обратите внимание на то, что здесь доступ к ответу рассматривается как доступ к текстовому содержимому. XMLHttpRequest может без затруднений извлекать содержимое как в XML-формате, так и в не XML-формате. Если необходимо извлечь содержимое XML, то строка прочтёт responseXML и вы сможете получить доступ к нему как к объекту XML DOM. Такое разнообразие текстовых форматов — приятная новость, поскольку XML может привести к чрезмерному усложнению простых сценариев извлечения данных, подобно описанному выше.

Повышаем устойчивость AJAX-приложения

[править]

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

  • Проверьте, чтобы ваше приложение работало в режиме без AJAX.
  • Проверьте код ответов из вызовов AJAX, перед обработкой результатов. API XMLHttpRequest поддерживает коды HTTP (200, 400, …) К ним можно получить доступ через свойство status (вместе со свойством statusText, которое удерживает сообщение, связанное с состоянием ответа:
if ( httpRequester.readyState == 4) {
// если статус равен 200 (OK)
  if ( httpRequester.status == 200) {
    // ... результаты выполнения...
  } else {
   // ... здесь обрабатываем ошибки...
  }
}

Написание приложения с использованием клиентского сallback-менеджера ASP.NET 2.0

[править]

После ознакомления с такими приложениями, как Google Map, создается впечатление, что многие поняли богатство возможностей AJAX. Но мало кто знает о том, что создание приложений в стиле AJAX, частично обновляющие страничку без обращения к серверу, можно без сложностей осуществить с помощью ASP.NET. В этом деле поможет встроенный клиентский сallback-менеджeр.

Всем известный ASP.NET 2.0 включает в себя клиентский сallback-менеджер, позволяющий разработчикам создавать веб-приложения в стиле AJAX. Клиентский сallback-менеджер использует XMLHTTP, при этом не акцентируя внимания на отправке данных в прямом и обратном направлении от сервера и клиента. (поэтому для того, чтобы это сработало, необходимо, чтобы веб-браузер поддерживал XMLHTTP; в настоящее время клиентский сallback-менеджер работает исключительно с Microsoft Internet Explorer.

Эта часть расскажет вам, как использовать клиентский callback-менеджер для написания приложений в стиле AJAX.

Отображение книжных обложек

[править]

Чтобы показать, как работает клиентский сallback-менеджер ASP.NET 2.0, мы создадим веб-приложение, позволяющее пользователям просматривать книжные обложки при загрузке их с веб-службы Amazon. Пользователю остается лишь ввести ISBN номер книги, после чего страница сама загрузит изображение обложки с Amazon.com без необходимости обновления страницы.

Для начала запустим Visual Studio и создадим новый проект веб-сайта. Назовем проект C:\ClientCallBack. Наполним веб-форму по умолчанию (Default.aspx) элементами управления, как показано на рисунке, включая элементы управления панели, текстового окна, кнопок и изображений.

Для элемента управления <img> можно применить Internet Explorer, чтобы загрузить домашнюю страничку Amazon.com, перетащить картинку логотипа и поместить его на элемент управления панелью. Элемент <img> автоматически добавляет его на панель, после чего отображается логотип Amazon.com.

Переключаем Default.aspx на Source View и заключаем элемент <asp:Image> в элемент <a>: 

<a href="" id="BookURL">
  <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/harrypotter.jpg" />
</a>

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

В окне Properties выставьте ShowCover для свойства OnClientClick. Как только пользователь щелкнет на этой кнопке, будет выполняться функция клиентского сценария ShowCover() (в нашем случае это — короткий написанный нами сценарий JavaScript).

JavaScript

[править]

Сейчас мы напишем код клиентской стороны (JavaScript), который будет выполнять функцию отправки запроса обратно на сервер. В Source View формы Default.aspx добавьте часть кода, которая внедрена в <script> элемента страницы <head>: 

...
<head runat="server">
  <title>Untitled Page</title>
  <script>
    function ShowCover(){
      var Command = "1:" +
      document.forms[0].elements['txtISBN'].value;
      var context = new Object();
      context.CommandName = "ShowCover";
      window.status="Retrieving cover...";
      <%=callbackStr%>
    }

    function CallBackHandler(result, context) {
      // Показываем обложку с Amazon.com
      if (context.CommandName == "ShowCover") {
        var indexofComma = result.indexOf(",");
        // Отображаем используемый Image URL
        var ImageURL = result.substring(0,indexofComma);
        document.images.item("Image1").src=ImageURL;
        // Обновляем URL книги
        var BookURL = result.substring(indexofComma+1,result.length);
        document.links("BookURL").href = BookURL;
        window.status="Retrieving cover...Done.";
      }
    }
    // Обрабатываем ошибки
    function onError(message, context) {
    alert("Exception :\n" + message);
  }
  </script>
</head>

Обратите внимание на то, что мы уже определили три функции: ShowCover(), CallBackHandler и onError(). Функция ShowCover() формулирует запрос, который необходимо направить на серверную сторону; в этом случае она принимает значение элемента управления TextBox (txtISBN) и помещает его в переменную callbackStr (немного позже мы определим эту переменную). Командная строка, которая должна быть передана на сервер, выглядит следующим образом (за «1:» следует номер книги ISBN) 1:0375824839

Оператор <%=callbackStr%> включит сгенерированную строку в функцию, итак в процессе работы она превратится: 

function ShowCover(){
  var Command = "1:" +
  document.forms[0].elements['txtISBN'].value;
  var context = new Object();
  context.CommandName = "ShowCover";
  window.status="Retrieving cover...";
  WebForm_DoCallback('__Page',Command,
  CallBackHandler,context,onError, false)
}

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

Возврат результата проводится с помощью переменной результата в функции CallBackHandler(). Он может выглядеть следующим образом (два URL в данной строке отделяются запятой, первый указывает на книжную обложку, а второй — на непосредственно книгу с Amazon.com):
http://images.amazon.com/images/P/0374292884.01.MZZZZZZZ.jpg,
http://www.amazon.com/exec/obidos/ASIN/0374292884/xxxx?devt=04Q4HFNSENYJ711BK2G2%26camp=2025 %26link_code=sp1

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

Функция onError() выводит на клиенте аварийное окно с сообщением об ошибке, когда сервер выбрасывает исключение.

После того, как код для клиентской стороны завершен, мы переходим к коду, выходящему за рамки веб-формы (Default.aspx.vb).

Код вне формы

[править]

Сначала необходимо создать ссылку на веб-службу Amazon.com. Для этого правой клавишей мыши щелкнем на имени проекта в Solution Explorer, а затем выберем Add Web Referencе. Введите следующий URL, указывающий на размещение WSDL в рамках веб-службы Amazon, нажмите Go:
http://soap.amazon.com/schemas3/AmazonWebServices.wsdl

Используйте имя по умолчанию com.amazon.soap, затем щелкните на Add Reference. Web-форма, которая получает обратный вызов, должна внедрить интерфейс ICallbackEventHandler. Необходимо объявить переменную callbackStr: 

Partial Class _Default
Inherits System.Web.UI.Page
Implements ICallbackEventHandler
Public callbackStr As String

В событии Page_Load нужно сегенерировать код, который выполняет обратный вызов с использованием метода GetCallbackEventReference() класса Page. Необходимо также смодифицировать кнопку Show Cover таким образом, чтобы при её нажатии не происходил откат к серверу (вместо этого будет выполняться функция клиентской стороны ShowCover()): 

Protected Sub Page_Load(ByVal sender As Object, _ByVal e As System.EventArgs)
  Handles Me.Load btnShowCover.Attributes.Add("onClick", _"return false")
callbackStr = _Page.ClientScript. _GetCallbackEventReference(Me, _"Command", "CallBackHandler",
_"context", "onError", False)
End Sub

Переменная callbackStr сохраняет следующую строку: 

WebForm_DoCallback('__Page',Command,CallBackHandler,context,onError, false)

Здесь важно то, что команда ссылается на строку, которая будет передаваться на сервер, а CallBackHandler ссылается на функцию, активизируемую (на сервере), когда сервер возвращает результат клиенту. У интерфейса ICallbackEventHandler имеется один метод для реализации: функция RaiseCallbackEvent(). Она активизируется, когда клиент направляет запрос на сервер. В этом случае нужно выйти на веб-службу Amazon.com и получить детальную информацию о книге с помощью номера ISBN. URL книжной обложки, так же как и URL книги будут возвращены как строки, отделенные запятой. 

Public Function RaiseCallbackEvent( _ByVal eventArgument As String) As String
      _Implements _System.Web.UI.ICallbackEventHandler._RaiseCallbackEvent
  ' Показываем обложку
  If eventArgument.StartsWith("1:") Then
    '---снимаем команду
    eventArgument = eventArgument.Substring(2)
    ' Используем поиск Amazon
    Dim Search As New _
    com.amazon.soap.AmazonSearchService()
    Dim ISBNReq As New _
    com.amazon.soap.AsinRequest
    With ISBNReq

      .asin = Trim(eventArgument)
      .devtag = "your_dev_tag"
      .type = "heavy"
      .tag = "xxxx"
    End With
    ' Выполняем запрос поиска
    Dim BookInfo As com.amazon.soap.ProductInfo
    BookInfo = Search.AsinSearchRequest(ISBNReq)
    ' возвращаем URL обложки
    Return BookInfo.Details(0).ImageUrlMedium & _
    "," & BookInfo.Details(0).Url
  Else
    Throw (New Exception( _
    "Command not recognized"))
  End If
End Function

А вот и результат! Теперь нажмите F5, чтобы протестировать приложение. Наберите номер ISBN в текстовом окне и нажмите кнопку Show Cover. Вы увидите, что обложка книги отображается на странице, и для этого не нужно её обновлять (страница не мерцает). Кроме этого, можно щелкнуть мышью на изображении, чтобы вернуться к странице, содержащей более детальную информацию о книге.

Непрерывное обновление

[править]

Обновление информации на странице без непосредственного обновления (refresh) самой страницы — очень интересная возможность, которой можно воспользоваться при более эффективном использовании клиентского callback-менеджера для приложений, которым требуется постоянное обновление. Например, вам может понадобиться прослеживать цены на бирже через веб-страницу. При работе с обычными веб-страницами понадобится непрерывное обновление, чтобы находиться в курсе последних цен на бирже. В этом разделе мы попробуем на веб-странице создать биржевой аппарат и воспользоваться клиентским callback-менеджером для постоянного обновления биржевых цен, для чего не понадобится обновлять саму страницу.

Чтобы получить информацию о последних ценах на бирже, мы воспользуемся веб-службой, доступной по следующему адресу: http://www.swanandmokashi.com/HomePage/WebServices/StockQuotes.asmx?wsdl Добавьте веб-ссылку к вышеуказанному URL и используйте имя по умолчанию com.swanandmokashi.www. На этой же странице Default.aspx добавьте элементы управления, представленные на рисунке, включая таблицу 3x2 и кнопочный элемент управления.

Настройте GetStockPrice() в свойства OnClientClick на кнопке Start Stocker Ticker. Перейдите на Source View и добавьте код, выделенный жирным внизу: 

...
<head runat="server">
  <title>Untitled Page</title>
  <script>
  ...
  function GetStockPrice(){
    var Command = "2:"
    var context = new Object();
    context.CommandName = "GetStockPrice";
    window.status="Retrieving stock prices...";
    <%=callbackStr%>
    setTimeout("GetStockPrice()", 10000);
  }
  
  function CallBackHandler(result, context) {
    // Показываем обложку с Amazon.com
    if (context.CommandName == "ShowCover") {
      ...
	}
  else
    // Показываем биржевые котировки
    if (context.CommandName == "GetStockPrice") {
      var count = 0;
      while (result.length>0) {
        var indexofComma = result.indexOf(",");
        // извлекаем индивидуальные значения
        var Value = result.substring(0,indexofComma);
        result = result.substring(indexofComma+1)
        switch(count)
        {
          case 0: {document.forms[0].elements['txtMSFTPrice'].value = Value; break}
          case 1: {document.forms[0].elements['txtMSFTChange'].value = Value; break}
          case 2: {document.forms[0].elements['txtAAPLPrice'].value = Value; break}
          case 3: {document.forms[0].elements['txtAAPLChange'].value = Value; break}
        }
        count++;
      }
      window.status="Retrieving stock prices...Done.";
    }
  }
  ...
  </script>
</head>

В этот раз строка для отправки будет выглядеть следующим образом:

2:

Чтобы обеспечить самообновление биржевых цен с обычной периодичностью, нужно воспользоваться функцией setTimeout() в JavaScript, она будет вызывать функцию GetStockPrice() через определенные промежутки времени (мы установили 60,000, что означает 60 секунд): 

function GetStockPrice(){
  var Command = "2:"
  var context = new Object();
  context.CommandName = "GetStockPrice";
  window.status="Retrieving stock prices...";
  <%=callbackStr%>
  setTimeout("GetStockPrice()", 60000);
}

На стороне сервера нужно добавить код, выделенный жирным, к коду за пределами Default.aspx. Вы получите доступ к биржевой веб-службе, биржевая информация возвратится как строка: 

Partial Class _Default
  Inherits System.Web.UI.Page Implements ICallbackEventHandler
  Public callbackStr As String
  Protected Sub Page_Load(ByVal sender As Object, _ByVal e As System.EventArgs) Handles Me.Load
    btnShowCover.Attributes.Add("onClick", _"return false")
    btnStart.Attributes.Add("onClick", _"return false")
    callbackStr = Page.ClientScript. _GetCallbackEventReference(Me, _"Command", "CallBackHandler", _"context", "onError", False)
  End Sub

  Public Function RaiseCallbackEvent( _
    ByVal eventArgument As String) As String _
    Implements _
    System.Web.UI.ICallbackEventHandler. _
    RaiseCallbackEvent
    ' Показываем обложку
    If eventArgument.StartsWith("1:") Then
      ...
    ElseIf eventArgument.StartsWith("2:") Then
      '---биржевой веб сервис
      Dim resultString As String = String.Empty
      '---доступаемся к биржевому веб сервису
      Dim ws As New _com.swanandmokashi.www.StockQuotes
      Dim result() As com.swanandmokashi.www.Quote
      '---получаем биржевую котировку для MSFT
      result = ws.GetStockQuotes("MSFT")
      resultString = result(0).StockQuote & "," & _result(0).Change & ","
      '--- получаем биржевую котировку для AAPL
      result = ws.GetStockQuotes("AAPL")
      resultString += result(0).StockQuote & _"," & result(0).Change & ","
      ' возвращаем результаты
      Return resultString
    Else
      Throw (New Exception( _"Command not recognized"))
    End If
  End Function
End Class

Типичная строка возврата будет выглядеть следующим образом: 

25.70,+0.24,35.84,+0.48

Вот и все! Чтобы протестировать приложение, нажмите F5. Щелкните на кнопке Start Stock Ticker и вы увидите, как значения биржевых цен меняются каждую минуту. Проверьте, чтобы это свойство применялось в рабочее время биржи (обычно с 9-30 до 16-00 по стандартному восточному времени — отрегулируйте время в соответствии с часовым поясом).

Реализация AJAХ: Искусство компромисса

[править]

Многие программисты воспринимают JavaScript как условно оптимальное решение по причине отсутствия методов отладки и высокой подверженности ошибкам. Поэтому было бы справедливо отметить, что AJAX — компромиссное решение. Эта технология помогает выиграть за счет более надежных языков, таких как Java или C# с презентационной привлекательностью, и инновационной привлекательности JavaScript.

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

В то же время, AJAX может в будущем сформировать новое поколение Интернет-порталов и интерактивных приложений. С помощью AJAX, в таких порталах Интернет-новостей, как Yahoo, Google или MSN пользователи могут получать доступ к информации по всем темам, включая и специфические направления, с одной и той же страницы. Разнообразные клиентские возможности, которые можно реализовать с помощью существующих веб-технологий и интернет-инфраструктуры, выглядят привлекательно. Интерактивные приложения уже адаптировали AJAX — например, Google использует эту технологию для чрезвычайно популярного почтового клиента Gmail. Мы надеемся, что эта тенденция будет развиваться и далее.

Команде разработчиков может понравиться возможность простого доступа к этой технологии и легкость обучения. Как упоминалось ранее, данная технология доступна на всех современных браузерах. Кроме этого, она не требует сложных навыков программирования, например как J2EE или .NET, более того, вы можете произвести впечатление на конечного пользователя полученными результатами.

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

  • Greasemonkey — расширение Firefox, позволяющее устанавливать заказные сценарии DHTML. Некоторые авторы блогов создали сценарии, позволяющие отслеживать и отлаживать программы AJAX, используя свойства Greasemonkey.
  • Sarrisa — библиотека сценариев, автоматизирующая и упрощающая наиболее обобщённые операции XML (например, документ XML, загружаемый из URL, реализации, обработка XPath, XSLT) с AJAX, а также, операции межбраузерных реализаций и тестирования.
  • Direct Web Remoting (DWR) — удалённая Java-библиотека, основанная на AJAX, позволяющая удалённо активизировать код Java-сервера из программ JavaScript.
  • FireBug — расширение Firefox.

Заключение

[править]

Итак, этот учебник помог разобраться, насколько просто создание приложения AJAX-типа. Если вы единожды преодолели начальный барьер и сделали все необходимые установки, (особенно это касается JavaScript на стороне клиента), то увидите, насколько просто на базе одного примера создать другой сценарий. По-настоящему, для использования AJAX существует столько возможностей, что всё будет зависеть только от ваших творческих способностей и правильной реализации.

Источник — https://ru.wikibooks.org/w/index.php?title=AJAX&oldid=163364