Подключение обработчика событий через атрибуты тегов
Пример 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 | Устанавливает или получает содержание элемента | m.innvar contents = elem.innerHTML eleerHTML = '<p>test!</p>' |
Свойство– innerHTML указывает на текст, который вставляется в элемент myDiv html-документа.
myDiv . innerHTML = string;
элемент текст (разметка)
 |  |
Методы объекта document
| Функция | Назначение | Пример |
| getElementById( ) | Возвращает ссылку на элемент записанный в качестве параметра | myDiv = document . getElementById("Pictures ") ; |
Файл 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. Основные функции создания объектной модели документа
| Функция | Назначение |
| createTextNode( ) | Создает узел в документе HTML |
| createElement( ) | Создает элемент в документе HTML |
| appendChild() | Добавляет параметр как дочерний к объекту, стоящему перед функцией |
| getElementById( ) | Возвращает ссылку на элемент, записанный в качестве параметра |
___________________________________________________
Файл 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
| Свойство | Описание |
| onreadystatechange | Используется для установки функции обратного вызова, которая будет обслуживать изменение состояния |
| readyState | Состояние объекта (может принимать 5 значений *) |
| responseText | Обычная строка текста, возвращаемая сервером |
| responseXML | Информация, полученная от сервера в XML-формате |
| status | Статус http-запроса ( 200 = выполнение запроса прошло успешно) |
| statusText | Текстовое сообщение статуса (например, сообщение об ошибке) |
* Свойство readyState имеет 5 состояний, которые указывают на то, в какой фазе обработка запроса находится:
- 0 – «объект не инициализирован»
- 1 – «идет отправка запроса»
- 2 – «запрос отправлен »
- 3 – «идет обмен»
- 4 – «выполнен»
http://www.comprog.ru/AJAX/article_3224.htm
Таблица 6. Методы объекта XMLHttpRequest
| Метод | Описание |
| abort () | Прерывание текущего запроса |
| setRequestHeader ("name", "value") | Установка заголовка в отправляемом запросе |
| getResponseHeader ("name") | Получение заголовка ответа |
| getAllResponseHeaders () | Получение всех заголовков ответа |
| open ( "method", "URL", async) | Присвоение параметров подключения |
| send (data) | Отправка запроса серверу |
Описание метода open
Метод open() не создает соединение с сервером, он только определяет параметры соединения.
Он имеет два обязательных параметра и несколько необязательных
open ("method" , "URL" , async )
метод передачи данных
адрес, куда должен быть отправлен запрос
режим исполнения запроса (синхронный / асинхронный)
1) Метод
Возможные значения параметра – "method" :
· GET;
· POST;
· PUT.
В случае применения метода GET параметры передаются серверу в строке URL.
______________________________________________
2) Адрес
http://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”, “http://localhost?ajax/test.php? param1=x & param2 =y” , true) ;
xmlHttp.onreadystatechange = handleRequestStateChange ;
xmlHttp.send(null);
…
Если параметры передаются методом POST, то они не присоединяются к строке URL запроса, а передаются методом send() в виде параметров метода send.
Пример:
xmlHttp . open(“POST”, “http://localhost?ajax/test.php” , true) ;
xmlHttp . onreadystatechange = handleRequestStateChange ;
xmlHttp . send ( param1=x & param2 =y );
Метод GET может быть ограничен по количеству передаваемых данных.
Метод POST не ограничивает объем передаваемой информации.
Код, выполняющий запросы HTTP, можно оформить в виде функции, например – process().
function process()
{
xmlHttp.open(“GET”, “http://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() – это внешняя функция, создаваемая для организации экземпляра объекта
http://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
| № | Метод / свойство | Описание |
| abort() | Останавливает исполнение текущего запроса | |
| getResponseHeader(“headerLabel”) | Возвращает заголовки ответов в виде строки | |
| open (“method”, “URL”[, async- Flag[,”username”[,”password”]]]) | Инициализирует параметры запроса | |
| send (content) | Выполняет запрос HTTP | |
| setRequestHeader(“label”, “value”) | Назначает пару label / value в заголовке запроса | |
| onreadystatechange | Используется для установки функции обратного вызова, которая будет обслуживать изменение состояния запроса | |
| readyState | Возвращает состояние запроса: 0 = не инициализирован 1 = идет отправка запрос 2 = запрос отправлен 3 = идет обмен 4 = обмен завершен | |
| responseText | Возвращает ответ сервера в виде строки | |
| responseXML | Возвращает ответ сервера в виде документа XML | |
| status | Возвращает код состояния запроса | |
| statusText | Возвращает сообщение о состоянии запроса |
Параметры метода open
| № параметра | Параметр | Возможные варианты | Назначение |
| GET POST PUT | |||
| URL | |||
| async | true | (Асинхронный режим) После вызова метода send() управление возвращается сценарию (не дожидаясь получения ответа от сервера | |
| false | Метод send() будет ожидать ответа от сервера, прежде чем вернуть управление, приостанавливая работу веб-страницы. |
Первый аргумент указывает метод, который будет применяться для передачи данных серверу, и может принимать значения GET, POST или PUT.
Второй аргумент URL, определяет адрес, по которому должен быть отправлен запрос. URL может быть как полным, так и относительным.
Если URL говорит о том, что доступ к ресурсу будет осуществляться НЕ через HTTP, то значение первого аргумента игнорируется.
Третий аргумент, async, определяет режим исполнения запроса – синхронный или асинхронный
Пример:
В листинге иллюстрирующего кода должна быть подсветка трех уровней:
- слова, зарезервированные синтаксисом языка;
- имена переменных, функций, констант и т. п., создаваемых разработчиком;
- данные.
Дата добавления: 2015-11-06; просмотров: 632;