AJAX: различия между версиями
Содержимое удалено Содержимое добавлено
Отмена правки 135664, сделанной 77.37.157.87 (обсуждение) |
DannyS712 (обсуждение | вклад) м <source> -> <syntaxhighlight> (phab:T237267) |
||
Строка 37:
Чтобы получить доступ к содержимому сообщения, нужен серверный компонент, предоставляющий доступ к сообщениям. В нашем примере есть простой [[сервлет]] в качестве имитатора, который показывает сообщения через запятую в следующем формате: от кого, тема, дата и тело сообщения:
<
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
if ("1".equals(req.getParameter("message_id"))) {
Строка 49:
resp.getWriter().println( "NA,NA,NA,Nothing to display" );
} //end else
} //end service </
Следующий пример на С# для [[ASP.NET]]. Функционально он аналогичен сервлету и приводим мы его лишь для того,
чтобы убедить читателей, что для работы с AJAX не важно на каком языке написана ваша серверная часть.
<
{
private void Page_Load(object sender, System.EventArgs e)
Строка 79:
}
.....
}</
В портале будет находиться окошко/портлет портала по просмотру почты с упрощенным списком входящих сообщений слева и панелью просмотра справа. Если щелкнуть мышью на сообщении слева, то на панели просмотра будет виден запрос к серверу и вывод текста сообщения на экран в реальном времени, в этом процессе задействован AJAX.
Строка 89:
В этом случае события «onMouseOver» прилагаются к полям таблицы (ПТ) с именами отправителей. Выбор полей с данными и запуск событий для вызовов AJAX предназначены строго для иллюстративных целей:
<
<form name="inbox">
<table style="previewTable">
Строка 118:
<input id="messageBody" class="message" type="textarea" READONLY value=""/>
</div>
</form></
Обратите внимание на то, что поле ввода «messageBody» — единственное, которое будет наполнено методом displayMessageBody, принимающим ID сообщения как параметр. Вызов AJAX будет использовать этот параметр для запроса деталей сообщения с сервера.
Строка 126:
для различных браузеров требуются разные методы реализации для объекта
XMLHttpRequest:
<
function getHTTPRequestObject() {
var xmlHttpRequest;
Строка 157:
загрузилась, создаем xml http объект */
</script>
</syntaxhighlight>
В данном коде используются аннотации Internet Explorer для реализации объекта AJAX.
Строка 165:
Теперь мы выполним асинхронную активизацию веб-ресурсов. Ниже представлены
действия, необходимые для асинхронной загрузки веб-ресурсов из функции JavaScript:
<
function displayMessageBody( messageID ) {
idToDisplay = messageID;
Строка 174:
httpRequester.send(null);
}
}</
Для вывода сообщения на экран метод displayMessageBody принимает ID этого сообщения. Посредством передачи следующих трех параметров для объекта XMLHttpRequest определяется получение доступа к URL:
Строка 185:
вывод объекта XMLHttpRequest, проводит синтаксический анализ и присваивает вывод
объектам страницы.
<
if ( httpRequester.readyState == COMPLETE ) { //это константа, объявлена локально, ее значение равно 4
if ( httpRequester.responseText.indexOf('invalid') == -1 ) {
Строка 194:
}
}
}</
HttpRequester.readyState является индикатором завершенности кода URL. Он может принимать следующие значения:
Строка 209:
* Проверьте, чтобы ваше приложение работало в режиме без AJAX.
* Проверьте код ответов из вызовов AJAX, перед обработкой результатов. API XMLHttpRequest поддерживает коды HTTP (200, 400, …) К ним можно получить доступ через свойство status (вместе со свойством statusText, которое удерживает сообщение, связанное с состоянием ответа:
<
// если статус равен 200 (OK)
if ( httpRequester.status == 200) {
Строка 216:
// ... здесь обрабатываем ошибки...
}
}</
== Написание приложения с использованием клиентского сallback-менеджера ASP.NET 2.0 ==
Строка 238:
Переключаем Default.aspx на Source View и заключаем элемент <asp:Image> в элемент <a>:
<
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/harrypotter.jpg" />
</a></
По существу, мы создаем гиперссылку на обложку книги, итак пользователь может щелкнуть мышью на изображении книги, выйти на Amazon.com и получить более детальную информацию о книге.
Строка 248:
=== JavaScript ===
Сейчас мы напишем код клиентской стороны (JavaScript), который будет выполнять функцию отправки запроса обратно на сервер. В Source View формы Default.aspx добавьте часть кода, которая внедрена в <script> элемента страницы <head>:
<
<head runat="server">
<title>Untitled Page</title>
Строка 279:
}
</script>
</head></
Обратите внимание на то, что мы уже определили три функции: ShowCover(), CallBackHandler и onError(). Функция ShowCover() формулирует запрос, который необходимо направить на серверную сторону; в этом случае она принимает значение элемента управления TextBox (txtISBN) и помещает его в переменную callbackStr (немного позже мы определим эту переменную). Командная строка, которая должна быть передана на сервер, выглядит следующим образом (за «1:» следует номер книги ISBN)
Строка 286:
Оператор <%=callbackStr%> включит сгенерированную строку в функцию, итак в процессе
работы она превратится:
<
var Command = "1:" +
document.forms[0].elements['txtISBN'].value;
Строка 294:
WebForm_DoCallback('__Page',Command,
CallBackHandler,context,onError, false)
}</
Обратите внимание на то, что эта функция возвращает вызов функции CallBackHandler(), которая в свою очередь будет запущена, когда сервер возвратит результат клиенту. При отправке множественных запросов серверу необходимо определить, кто проводит обратный вызов. Воспользуйтесь контекстной переменной, чтобы установить командное имя для каждого типа вызова («ShowCover»).
Строка 315:
Web-форма, которая получает обратный вызов, должна внедрить интерфейс
ICallbackEventHandler. Необходимо объявить переменную callbackStr:
<
Inherits System.Web.UI.Page
Implements ICallbackEventHandler
Public callbackStr As String</
В событии Page_Load нужно сегенерировать код, который выполняет обратный вызов с
Строка 325:
откат к серверу (вместо этого будет выполняться функция клиентской стороны
ShowCover()):
<
Handles Me.Load btnShowCover.Attributes.Add("onClick", _"return false")
callbackStr = _Page.ClientScript. _GetCallbackEventReference(Me, _"Command", "CallBackHandler",
_"context", "onError", False)
End Sub</
Переменная callbackStr сохраняет следующую строку:
<
Здесь важно то, что команда ссылается на строку, которая будет передаваться на сервер,
Строка 342:
книге с помощью номера ISBN. URL книжной обложки, так же как и URL книги будут
возвращены как строки, отделенные запятой.
<
_Implements _System.Web.UI.ICallbackEventHandler._RaiseCallbackEvent
' Показываем обложку
Строка 371:
End If
End Function
</syntaxhighlight>
[[Файл:Ajax4.jpg]]
Строка 391:
Настройте GetStockPrice() в свойства OnClientClick на кнопке Start Stocker Ticker.
Перейдите на Source View и добавьте код, выделенный жирным внизу:
<
<head runat="server">
<title>Untitled Page</title>
Строка 433:
...
</script>
</head></
В этот раз строка для отправки будет выглядеть следующим образом:
Строка 440:
Чтобы обеспечить самообновление биржевых цен с обычной периодичностью, нужно воспользоваться функцией setTimeout() в JavaScript, она будет вызывать функцию GetStockPrice() через определенные промежутки времени (мы установили 60,000, что означает 60 секунд):
<
var Command = "2:"
var context = new Object();
Строка 447:
<%=callbackStr%>
setTimeout("GetStockPrice()", 60000);
}</
На стороне сервера нужно добавить код, выделенный жирным, к коду за пределами
Default.aspx. Вы получите доступ к биржевой веб-службе, биржевая информация
возвратится как строка:
<
Inherits System.Web.UI.Page Implements ICallbackEventHandler
Public callbackStr As String
Строка 488:
End Function
End Class
</syntaxhighlight>
Типичная строка возврата будет выглядеть следующим образом:
| |||