9.7. Задания для выполнения лабораторной работы №7

«Технология фонового обмена данными браузера с веб-сервером в информационных сетях»

Цель: Получить теоретические знания и практические навыки в использовании технологииAJAX.

Используемые приемы и технологии: AJAX,JavaScript,HTML,CSS

Ключевые термины:веб-приложение, методы объекта XMLHttpRequest

Варианты

Разработайте веб-приложение предусматривающее возможность ввода в поле формы арифметических выражений типа «23*6» с асинхронной передачей данных между браузером и сервером с помощьюAJAXи отображением результата.

Последовательность выполнения задания

1. Теоретические сведения

Средством т.н. «фонового» обмена данными в информационных сетях между браузером и веб-сервером служит технология AsynchronousJavaScriptandXML(AJAX).

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

• JavaScript

• XML

• HTML

• CSS

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

Важнейшей составляющей технологии AJAX является класс XMLHttpRequest. Объекты этого класса поддерживается в Internet Explorer(начиная 5 версии и выше),Safari 1.2,Mozilla 1.0/Firefox,Opera 8+иNetscape 7.

Объекты класса XMLHttpRequestпо-разному создаются в различных браузерах. Так,InternetExplorerдля этого используетActiveXObject, в то время как остальные браузеры используют встроенный в JavaScript классXMLHttpRequest.

В частности для Internet Explorer 6.0+ объект создается как:

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP").

Для Internet Explorer 5.5+ как:

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP").

Для браузеров Firefox, Opera или Safari как:

xmlHttp = new XMLHttpRequest().

Использование объекта класса XMLHttpRequest реализуется посредством методов и свойств, основные из которых перечислены ниже.

Методы объекта XMLHttpRequest.

Метод open()

Метод open() создает запрос для Web-сервера.

Метод send()

Метод send() посылает запрос серверу.

Метод abort()

Метод abort() отменяет текущий запрос к серверу.

Свойство onreadystatechange объекта XMLHttpRequest.

Определяет обработчик события, которое происходит при каждой смене состояния объекта. Имя должно быть записано в нижнем регистре.

Свойство readyState объекта XMLHttpRequest.

Свойство readyState определяет текущее состояние объекта XMLHttpRequest.

В таблице показаны возможные значения свойства readyState:

Состояние	Описание
0	Запрос не инициализирован
1	Запрос создан
2	Запрос послан
3	Запрос обрабатывается
4	Запрос завершен

readyState=0 после создания объекта XMLHttpRequest, но до вызова метода open().

readyState=1 после вызова метода open(), но до вызова метода send().

readyState=2 после вызова метода send().

readyState=3 после того, как браузер соединится с сервером, но до завершения сервером ответа.

readyState=4 после завершения запроса и полного получения всех данных ответа с сервера.

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

Для приложений AJAX представляет интерес фактически только состояние 4. Те есть, когда запрос завершен, и можно использовать полученные данные.

Свойство responseText объекта XMLHttpRequest

Свойство responseText содержит присланный сервером текст.

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

Вызывается функция обработчик.

Формируется url с необходимыми параметрами для отправки веб-серверу.

Создается объект класса XMLHttpRequest.

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

Открывается созданный объект класса XMLHttpRequest с указанным значением url.

Отправляется HTTP запрос веб-серверу.