Подключение обработчика событий через атрибуты тегов

Пример 1:

< html>

< body>

< h3> Загрузка следующей страницы производится через метод alert() < /h3>

< a href = “prog.html” name =”Page ” onclick= “alert (‘Вы вызывали? ’) ” >

Переход

< /a>

< /body>

< /html>

Текст программы в файле: / Programmes / Temp/ event.html

__________________________________________________________________

Пример 2:

< html>

< body>

< script>

<! --

function hello()

{alert (" Вас приветствует JavaScript"); }

-->

< /script>

< form name=" frm1" >

< input type=" Button" value=" Нажмите для вызова JavaScript"

onClick=" hello()" >

< /form>

< /body>

< /html>

Файл – \Programmes\Temp\JavaScript_120.htm

Подключение обработчика событий через свойства объектов

Этапы реализации:

1. Определяем функцию, которая будет выполнена, когда произойдет событие

2. Устанавливаем свойства обработчика события объекта, т. е. функцию, которая бала определена в пункте 1.

Пример:

< html>

< body>

< h3> Подключение обработчика событий через свойства объектов< /h3>

< script type=" text/javascript" >

function Page ()

{

alert (' Это подсоединение не подготовлено! ');

return false;

}

< /script>

< a href = " prog.html" name =" linkSomePage" >

Переход

< /a>

< script type =" text/javascript" >

window. document. links[0]. onclick = Page();

< /script>

< /body>

< /html>

Файл – \Programmes\Temp\JavaScript_120_1.htm

События в JavaScript и DOM

Свойства объекта document

Свойство– innerHTML указывает на текст, который вставляется в элемент myDiv html-документа.

myDiv. innerHTML = string;

элемент текст (разметка)

Методы объекта document

Файл 50.html

< html>

< head>

< title> Основы AJAX: JavaScript и DOM< /title>

< script type = " text/javascript" src = " 50.js" > < /script>

< /head>

< body onload = " process()" >

Ниже приведен список цветов:

< br />

< div id = " Pictures" />

< /body>

< /html>

_________________________________________________

Файл 50.js

function process()

{

alert “re-re”;

// Создаем код HTML

var string;

string = " < ul> "

+ " < li> Красный < /li> "

+ " < li> Оранжевый < /li> "

+ " < li> Синий < /li> "

+ " < /ul> ";

// Получить ссылку на элемент < div>

myDiv = document. getElementById(" Pictures ");

// Добавить содержимое в элемент < div>

myDiv.innerHTML = string;

}

Объект document по умолчанию ссылается на элемент < body>

Метод getElementById() объекта document, возвращает ссылку на элемент с именем стоящим в круглых скобках

< html>

< head>

< title> Метод document.getElementById < /title>

< /head>

< body>

< input type=" text" id=" text_id" value=" " />

< input type=" button" value=" Проверить текстовое поле" onclick=" isField()" />

< script type=" text/javascript" >

function isField() {

//Записываем в переменную obj найденный по text_id элемент

var obj = document.getElementById('text_id');

if (obj.value == '') {

alert('Текстовое поле пустое');

obj.value = 'Заполните это поле'

}

else {

alert ('В текстовом поле содержится текст: ' + obj.value);

}

}

< /script>

< /body>

< /html>

Создание структуры HTML- документа с помощью интерфейса DOM

Список цветов:

< body> < div> < br>

< li> Черный

< ul> < li> Оранжевый

< li> Розовый

– Элемент

– Узел

Рис. 5 Пример иерархии элементов HTML-документа

Таблица 11. Основные функции создания объектной модели документа

___________________________________________________

Файл 54.html

< html>

< head>

< title> Основы AJAX: JavaScript и DOM< /title>

< script type = " text/javascript" src = " 54.js" > < /script>

< /head>

< body onload = " process()" >

< div id = " myDivElement" />

< /body>

< /html>

_____________________________________________

Файл 54.js

function process()

{

oHello = document. createTextNode(" Выбор цвета: ");

oUl = document. createElement(" ul ");

// ---------------------------------------------------

oLiBlack = document. createElement(" li ");

oBlack = document. createTextNode(" Черный; ");

oLiBlack. appendChild(oBlack);

// ------------------------------------------------------

oLiOrange = document. createElement(" li ");

oOrange = document. createTextNode(" Оранжевый; ");

oLiOrange. appendChild(oOrange);

// --------------------------------------------------------

oLiPink = document.createElement(" li ");

oPink = document.createTextNode(" Розовый; ");

oLiPink.appendChild(oPink);

// -------- добавляем элементы < li> как дочерние в элемент < ul>

oUl.appendChild(oLiBlack);

oUl.appendChild(oLiOrange);

oUl.appendChild(oLiPink);

// ---------- получаем ссылку на элемент < div>

myDiv = document.getElementById(" myDivElement");

// добавляем элементы “текст” и < ul> как дочерние в элемент < div>

myDiv.appendChild(oHello);

myDiv.appendChild(oUl);

}

JavaScript, DOM и CSS

Манипулирование стилями отображения элементов HTML посредством объектной модели документа.

Пример: файл (56.html)

________________________________________________________

< html>

< head>

< title> Основы AJAX: СSS < /tutle>

< script type = " text/javascript" src = " 56.js" > < /script>

< link href = " styles.css" type =" text/css" rel =" stylesheet" />

< /head>

< body>

< table id =" table" >

< tr>

< th id=" tableHead" >

Название продукта:

< /th>

< /tr>

< tr>

< td id =" tableFirstLine" >

- Самолет

< /td>

< /tr>

< tr>

< td id = " tableSecondLine" >

- Автомобиль

< /td>

< /tr>

< /table>

< br />

< input type =" button" value=" Стиль 1" onclick = " setStyle1(); " />

< input type =" button" value=" Стиль 2" onclick = " setStyle2(); " />

< /body>

< /html>

____________________________________________________

Файл 56.js -----------------------------------------------------------------------------------------------------

// ------ Отобразить таблицу с применением стиля 1 ---------------------

function setStyle1()

{ Идентификаторы элементов

// страницы

oTable = document. getElementById (" table");

oTableHead = document. getElementById (" tableHead");

oTableFirstLine = document. getElementById (" tableFirstLine");

oTableSecondLine = document. getElementById (" tableSecondLine");

//

oTable. className = " Table1";

oTableHead. className = " TableHead1";

oTableFirstLine. className = " TableContent1";

oTableSecondLine. className = " TableContent1";

} Селекторы класса CSS

// ------- Отобразить таблицу с применением стиля 2 ----------------------

function setStyle2()

{

//

oTable = document. getElementById (" table");

oTableHead = document. getElementById (" tableHead");

oTableFirstLine = document. getElementById (" tableFirstLine");

oTableSecondLine = document. getElementById (" tableSecondLine");

//

oTable. className = " Table2";

oTableHead. className = " TableHead2";

oTableFirstLine. className = " TableContent2";

oTableSecondLine. className = " TableContent2";

}

--------------------------------------------------------------------------------------------------------------------
Файл styles.css -------------------------------------------------------------------------------------

.Table1

{ border: DarkGreen 1px solid;

background-color: LightGreen;

}

.TableHead1

{font-family: Verdana, Arial;

font-weight: bold;

font-size: 20pt;

}

.TableContent1

{

font-family: Verdana, Arial;

font-size: 20px;

}

.Table2

{ border: DarkBlue 1px solid;

background-color: LightBlue;

}

.TableHead2

{font-family: Verdana, Arial;

font-weight: bold;

font-size: 20pt;

}

.TableContent2

{

font-family: Verdana, Arial;

font-size: 20px;

}

-------------------------------------------------------------------------------------------------------

Asynchronous JavaScript and XML (AJAX)

технология асинхронного обмена данными между сервером и клиентом

Принципы работы AJAX

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

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

Использование объекта XMLHttpRequest для реализации технологии Ajax

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

XMLHttpReguest

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

Основные задачи, решаемые с помощью объекта XMLHttpReguest:

1) отправка запроса HTTP (от браузера к серверу);

2) прием ответ, полученный от сервера;

3) обновление отдельные части HTML-страницы в фоновом режиме (без перезагрузки всей страницы).

Объект XMLHttpRequest является ключевым в AJAX-технологии, однако, он не является стандартом. По этой причине, эти объекты обрабатываются в каждом браузере по-разному.

Последовательность действий при использовании объекта XMLHttpReguest:

Создается экземпляр

объекта XMLHttpReguest

С помощью объекта

создается асинхронный

запрос к серверу

Определяется функция

обратного вызова,

которая будет автоматически

вызвана в случае приема

ответа от сервера

Функция обратного вызова

обрабатывает ответ сервера

Рис. 5. Алгоритм работы асинхронного запроса к серверу.

Создание объекта XMLHttpReguest

Процедура создания экземпляра объекта XMLHttpRequest:

xmlhttp = new XMLHttpRequest();

В таблицах 5 и 6 приведены основные свойства и методы объекта XMLHttpRequest.

Таблица 5. Свойства объекта XMLHttpRequest

* Свойство readyState имеет 5 состояний, которые указывают на то, в какой фазе обработка запроса находится:

• 0 – «объект не инициализирован»
• 1 – «идет отправка запроса»
• 2 – «запрос отправлен»
• 3 – «идет обмен»
• 4 – «выполнен»

https://www.comprog.ru/AJAX/article_3224.htm

Таблица 6. Методы объекта XMLHttpRequest

Описание метода open

Метод open() не создает соединение с сервером, он только определяет параметры соединения.

Он имеет два обязательных параметра и несколько необязательных

open (" method", " URL", async)

метод передачи данных

адрес, куда должен быть отправлен запрос

режим исполнения запроса (синхронный / асинхронный)

1) Метод

Возможные значения параметра – " method":

· GET;

· POST;

· PUT.

В случае применения метода GET параметры передаются серверу в строке URL.

______________________________________________

2) Адрес

https://localhost/ajax/test.php? param1=x & param2 =y.

Серверу передается два параметра:

· param1

· param2

соответственно значения этих параметров x и y

______________________________________________

3) Режим

Возможные значения параметра – async:

· true – асинхронный режим передачи данных;

· false – синхронный режим передачи данных.

При установки асинхронного режима необходимо установить обработчик события onreadystatechange, (который будет заниматься обработкой ответа сервера).

При каждом обращении к серверу задействуются методы open и send.

Метод send отправляет запрос (обеспечивает доступ к серверу).

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

Пример обращения к серверу для выполнения операции на стороне сервера.

xmlhttp = new XMLHttpRequest();

xmlHttp.open(“GET”, “https://localhost? ajax/test.php? param1=x & param2 =y”, true);

xmlHttp.onreadystatechange = handleRequestStateChange;

xmlHttp.send(null);

…

Если параметры передаются методом POST, то они не присоединяются к строке URL запроса, а передаются методом send() в виде параметров метода send.

Пример:

xmlHttp. open(“POST”, “https://localhost? ajax/test.php”, true);

xmlHttp. onreadystatechange = handleRequestStateChange;

xmlHttp. send (param1=x & param2 =y);

Метод GET может быть ограничен по количеству передаваемых данных.

Метод POST не ограничивает объем передаваемой информации.

Код, выполняющий запросы HTTP, можно оформить в виде функции, например – process().

function process()

{

xmlHttp.open(“GET”, “https://localhost/ajax/test.php? param1=x & param2 =y”, true);

xmlHttp.onreadystatechange = handleRequestStateChange;

xmlHttp.send(null);

}

При выполнении HTTP-запроса для организации контроля возможных ошибок использовать конструкцию try / catch

Синтаксис конструкции try / catch

try

{

// Браузер поддерживает объект XMLHttpRequest

}

catch

{

// Браузер НЕ поддерживает объект XMLHttpRequest

}

__________________________________________

// вызывается для чтения файла с сервера

function process()

{

try //попытка соединится с сервером

{

// инициируем чтение файла с сервера

xmlHttp.open(“GET”, “server_script.php”, true);

xmlHttp.onreadystatechange = handleRequestStateChange;

xmlHttp.send(null);

}

ctach(e) // вывести сообщения об ошибке в случае неудачи

{

alert (“Невозможно соединиться с сервером: \n” + e.toString());

}

}

Напоминание:

Функция – handleRequestStateChange() – это внешняя функция обработки события изменения состояние запроса.

Обработка ответа сервера

При выполнении асинхронных запросов метод xmlHttp.send() не приостанавливает работу приложения в ожидании прибытия ответа от сервера. Обработкой события изменения состояния запроса занимается функция обратного вызова handleRrquestStateChange().

Обычно она вызывается четыре раза, т. е. каждый раз, когда изменяется состояние запроса в свойстве readyState:

0 = не инициализирован;

1 = идет отправка запроса;

2 = запрос отправлен;

3 = идет обмен;

4 = обмен завершен.

-------------------------------------------------------------------------------------------------------

Типичная реализация функции обработки результатов полученных от сервера (handleRequestStateChange()) приведена ниже:

// ----- Функция исполняется, когда изменяется состояние запроса

function handleRequestStateChange()

{

// ---- продолжить, если процесс завершен по состоянию объекта

if (xmlHttp.readyState == 4)

{

// ---- продолжить, если статус HTTP равен “OK”

if (xmlHttp.status == 200)

{

// ---- получить ответ

response = xmlHttp.responseText;

// Обработать полученный ответ

// …

// …

}

}

}

Применив конструкцию try / catch можно обрабатывать ошибки, появившиеся при чтении ответа сервера или инициализации нового запроса.

// ----- Функция исполняется, когда изменяется состояние запроса

function handeRequestStateChange()

{

// ---- продолжить, е сли процесс завершен

if (xmlHttp.readyState == 4)

{

// ---- продолжить, если статус HTTP равен “OK”

if (xmlHttp.status == 200)

{

try

{

// ---- получить ответ

response = xmlHttp.responseText;

// Обработать полученный ответ

// …

// …

}

catch (e)

{

// ---- вывести сообщение об ошибке

alert (“ Ошибка чтения ответа сервера: “ + e. toString());

}

}

else

{

// вывести сообщение о состоянии

alert (“ Возникли проблемы при получении данных: \n” +

xmlHttp.statusText);

}

}

}

Пример асинхронного обращения с использованием объекта XMLHttpRequest:

Листинг запускающей программы:

________________________________________________________

< html>

< head>

< title> Основы AJAX: использование объекта XMLHttpRequest < /title>

< script type = " text/javascript" src =" async.js" > < /script>

< /head>

< body onload =" process()" >

Привет, сервер!

< br />

< div id = " myDivElement" />

< /body>

< /html>

______________________________________________________________

В запускающей программе идет обращение к скрипту, находящемуся в файле async.js. Из скрипта выполняется только первая строка, а функция (метод) process() естественно выполняются только после обращения к ним.

По событию onload вызывается метод process()

Метод handleRequestStateChange() вызывается каждый раз, когда изменяется состояние запроса.

Листинг файла с программой JavaScript:

______________________________________________________

var xmlHttp = createXmlHttpRequestObject();

// ---Функция создает объект XMLHttpRequest ----------------

function createXmlHttpRequestObject()

{

var xmlHttp;

xmlHttp = new XMLHttpRequest();

return xmlHttp;

}

// ---- Вызывается для чтения файла с сервера ---------------

function process()

{

xmlHttp.open(" GET", " async.txt", true);

xmlHttp.onreadystatechange = handleRequestStateChange;

xmlHttp.send(null);

}

// ------- Функция обработки ответа ---------------------------

function handleRequestStateChange()

{

myDiv = document. getElementById(" myDivElement");

if (xmlHttp.readyState == 1)

{ myDiv.innerHTML += " Состояние запроса: 1 (отправляется) < br /> ";

}

else if (xmlHttp.readyState ==2)

{ myDiv.innerHTML += " Состояние запроса: 2 (отправлен) < br /> ";

}

else if (xmlHttp.readyState ==3)

{ myDiv.innerHTML += " Состояние запроса: 3 (идет обмен) < br /> ";

}

else if (xmlHttp.readyState == 4)

{ if (xmlHttp.status == 200)

{ response = xmlHttp. responseText;

myDiv. innerHTML += " Состояние запроса: 4 (завершен). Сервер

ответил: < br /> ";

myDiv. innerHTML += response;

}

else

{ alert(" Возникли проблеммы во время получения данных: \n" +

xmlHttp.statusText);

}

}

}

_________________________________________________________

Функция – createXmlHttpRequestObject() – это внешняя функция, создаваемая для организации экземпляра объекта

https://www.intuit.ru/department/internet/jsbasics/7/3.html

_______________________________________________________

ПОДВАЛ

< html>

< body>

< font color = " red" > Добрый день < /font>

< br />

< script language = " JavaScript" >

<! --

var x = " Добрый день "

document.write(x.fontcolor(" red"))

//-->

< /script

< /body>

< /html>

_____________________________________

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

Работа AJAX основана на использовании объекта XMLHttpReguest.

Инициализация запросов к серверу с помощью объекта XMLHttpRequest

Таблица 7. Свойства и методы объекта XMLHttpRequest

Параметры метода open

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

Второй аргумент URL, определяет адрес, по которому должен быть отправлен запрос. URL может быть как полным, так и относительным.

Если URL говорит о том, что доступ к ресурсу будет осуществляться НЕ через HTTP, то значение первого аргумента игнорируется.

Третий аргумент, async, определяет режим исполнения запроса – синхронный или асинхронный

Пример:

В листинге иллюстрирующего кода должна быть подсветка трех уровней:

• слова, зарезервированные синтаксисом языка;
• имена переменных, функций, констант и т. п., создаваемых разработчиком;
• данные.