![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Подключение обработчика событий через атрибуты тегов ⇐ ПредыдущаяСтр 7 из 7
Пример 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-документа.
элемент текст (разметка)
Методы объекта 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
![]()
– Элемент – Узел
Рис. 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"; } --------------------------------------------------------------------------------------------------------------------
.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 состояний, которые указывают на то, в какой фазе обработка запроса находится:
https://www.comprog.ru/AJAX/article_3224.htm
Таблица 6. Методы объекта XMLHttpRequest
Описание метода open Метод open() не создает соединение с сервером, он только определяет параметры соединения. Он имеет два обязательных параметра и несколько необязательных
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; // Обработать полученный ответ // … // … }
{ // ---- вывести сообщение об ошибке 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 ----------------
{ var xmlHttp; xmlHttp = new XMLHttpRequest(); return xmlHttp; }
// ---- Вызывается для чтения файла с сервера ---------------
{ xmlHttp.open(" GET", " async.txt", true); xmlHttp.onreadystatechange = handleRequestStateChange; xmlHttp.send(null); } // ------- Функция обработки ответа ---------------------------
{ 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, определяет режим исполнения запроса – синхронный или асинхронный
Пример: В листинге иллюстрирующего кода должна быть подсветка трех уровней:
|