ИТ лабы

40

использование динамического изменения содержания страницы;

использование DOM (Document Object Model – объектная модель документов), (через код JavaScript) для работы и со структурой HTML документа, и (в некоторых случаях) с XML, полученным от сервера;

использование в качестве формата передачи данных XML или JSON

Ajax помещает технологию JavaScript и объект XMLHttpRequest между Web-формой и сервером. Когда пользователи заполняют формы, данные передаются в некоторый JavaScript-код, в объект Объкт XMLHttpReques, а не прямо на сервер.

Затем объект XMLHttpReques передает запрос на сервер. При этом запрос передается в фоновом режиме, не прерывая работу пользователя с формой. Кроме того запрос передается асинхронно, то есть JavaScript-код (и пользователь) не ожидают ответа сервера, а продолжается его выполнение. Пользователи могут продолжать вводить данные, прокручивать страницу и работать с приложением.

Затем сервер передает данные обратно в JavaScript-код, выполняемый в Web-форме, в объект XMLHttpReques, производит обработку полученных данных (средствами JavaScript-кода). При этом поля формы могут обновляться "на лету", то есть элементы формы могут получать новые данные без подтверждения их обновления форм пользователем. То есть объект XMLHttpRequest может общаться с сервером без вмешательства пользователя.

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

извлечение данных формы посредством JavaScript-кода, на основе DOM;

передачу данных на сервер средствами объекта XMLHttpRequest;

получение данных с сервера средствами объекта XMLHttpRequest;

анализ полученных данных сервера;

42

где – /*@ @*/ директивы компилятору JavaScript.

Содержание основных действий технологии Ajax

Извлечение данных формы посредством JavaScript-кода, на основе DOM

Объектная модель документа (DOM) подразумевает обращение к значению элементов через иерархию объектов, образующих документ. Например:

document.id1.id11.value= “111”; var dd = document.id1.id11.value;

где document – это объект, соответствующий текущему документу HTML в целом;

id1 – идентификатор, то есть значение атрибута ID или Name, элемента, входящего в документ непосредственно (непосредственно дочернего текущему документу, вне других элементов);

id11 – значение атрибута Name или ID элемента, входящего в элемент id1(непосредственно дочернего id1);

value – ссылка на значение элемента ID11.

Объектная модель кроме того подразумевает использование функций доступа к значению элементов по их идентификатору: var phone = document.getElementById("phone").value;

Передача данных на сервер средствами объекта XMLHttpRequest

Для передачи данных на сервер необходимо:

создать URL для подключения;

открыть соединение с сервером;

установить функцию, которая выполнится после получения ответа от сервера;

передать запрос.

Создание URL для подключения.

При использовании метода передачи GET (в ajax обычно используется данный метод) URL подключение создается в виде значение текстовой переменной, содержащей адрес документа

43

обработчика и предаваемые параметры. Передаваемые параметры отделяются от адреса знаком “?”

var url = ž/test/getZipCode.php?fam=¡ + escape(fam) + ž&phone=¡ + escape(phone);

где idfam , idphone – идентификаторы некоторых элементов формы;

fam, phone – значение переменных, которое передается как значение элементов.

Метод escape() возвращает строку (в формате Unicode). Все пробелы, пунктуация и любые не-ASCII символы в ней закодированы и выглядят как %xx, где xx эквивалентно шестнадцатиричному числу, обозначающему символ. Например, пробелы будут возвращены как µ%20¶. Символы, числовые значения которых больше 255 будут представлены в формате %uxxxx. Использование данного метода позволяет обеспечить передачу всех возможных символов.

Соединение с сервером

Соединение с сервером открывается с помощью операции open объекта XMLHttpRequest

open(žМетодПередачи¡, url, ПереключательАсинхронногоРежима);

где МетодПередачи – метод передачи (GET или POST), обычно используется метод GET;

url – сформированный ранее url для подключения, представленный в виде значения текстовой переменной или константы;

ПереключательАсинхронногоРежима – логический параметр (возможные значения true или false), при значении true асинхронный режим включён. Обычно используется включённый асинхронный режим.

Установка функции, которая выполнится после получения ответа от сервера

Функция, выполняемая после получения ответа от сервера, устанавливается в виде значения соответствующего свойства onreadystatechange объекта XMLHttpRequest. Обычно на данную функцию возлагаются задачи, связанные с обработкой полученных данных от сервера и изменением значений элементов формы.

44

Пусть в рассматриваемом примере эти задачи будет выполнять функция updatePage:

xmlHttp.onreadystatechange = updatePage; Пример содержания данной функции. function updatePage() {

if (xmlHttp.readyState == 4) {

var response = xmlHttp.responseText; document.getElementById("famPhone").value = response;

}

}

В данном случае функция выполняет установку значения элемента с атрибутом id="famPhone". Значение берётся из свойства объекта XMLHttpRequest – responseText в примере – xmlHttp.responseText. Данное свойство содержит данные, переданные из документа обработчика (в документе обработчике выведено на печать командой echo или write).

Свойство readyState объекта XMLHttpRequest указывает на то, в какой степени выполнен запрос на сервер. При значении данного свойства равном 4 – запрос выполнен.

Свойство responseText содержит данные, полученные от сервера. Эти данные формируются как результат операторов вывода на печать (echo, print) в файле-обработчике формы.

Передача запроса

Запрос передаётся с помощью метода send объекта XMLHttpRequest:

send(ПередаваемыеДанные)

где ПередаваемыеДанные – передаваемые данные на сервер. В том случае, когда все данные включены в описание URL подключения, то их передача в методе send не требуется. В данном случае, качестве передаваемых данных указывается значение null.

Например,

xmlHttp.send(null);

Действия, связанные с реализации технологии ajax, оформляются в виде функции, в данном случае функция callServer().

function callServer() {

// Получить phone и fam из web-формы

var phone = document.getElementById("phone").value; var fam = document.getElementById("fam").value;

45

//Продолжать только если есть значения обоих полей if ((phone == null) || (phone == "")) return;

if ((fam == null) || (fam == "")) return;

//Создать URL для подключения

var url = "/test/getZipCode.php?fam=" + escape(fam) + "&phone=" + escape(phone);

//Открыть соединение с сервером xmlHttp.open("GET", url, true);

//Установить функцию для сервера, которая выполнится после его ответа

xmlHttp.onreadystatechange = updatePage;

//SПередать запрос

xmlHttp.send(null);

}

Данная функция устанавливается на события управляющих элементов формы onChange.

<form >

<label for="fam"> фамилия </label><input type="text" id="fam" name="fam" onChange="callServer()"><br>

<label for="phone"> телефон </label><input type="text" id="phone" name="phone" onChange="callServer()"> <br>

<label for="famPhone"> фамилия+телефон</label><input type="text" id="famPhone"> <br>

<button type="submite"></button> </form>

3.ПОРЯДОК ВЫПОЛНЕНИЯ

1.Создать форму HTML в соответствии с заданием.

2.Создать документ обработчик PHP, обеспечивающий выполнение требуемых действий.

3.Создать программный код в документе HTML, реализующий элементы технологии AJAX.

46

4. ЗАДАНИЕ

Заданием для работы является создание документа HTML, в который включена форма, и документаобработчика PHP. совместно реализующих элементы технологии AJAX. Индивидуальными являются задания, аналогичные работе № 5, но требуемые функции должны реализовываться на основе технологии AJAX. Результат должен выводиться в текстовое поле, расположенное ниже основных управляющих элементов.

5.КОНТРОЛЬНЫЕ ВОПРОСЫ

1.Что собой представляет технология AJAX?

2.Как согласно технологии AJAX осуществляется обмен данными между пользовательской страницей и сервером?

3.Для чего служит объект XMLHttpReques, его основные функции, как он создается?

4.Какие действия должны выполняться в web-приложении, работающем по технологии AJAX?

5.Как извлекаются данные формы на основе модели DOM?

6.Какие действия выполняются при передаче данных серверу, при работе приложения на основе технологии AJAX?

7.Как устанавливаются данные, полученные от сервера, на элементы формы?

СПИСОК РЕКОМЕНДУЕМОЙ ЛИТЕРАТУРЫ

1.http://html.manual.ru/

2.http://www.machaon.ru/digest/rusinter.HTML.html

3.http://digkiller.narod.ru/webmaster

4.http://postroika.ru

5.Меженный, О. А. Microsoft Office 2007. Краткое руководство / О. А. Меженный. – М.: Диалектика, 2008. – 384 с., с ил.

47

48

Продолжение табл. 1

49

Продолжение табл. 1