Использование dom

Полученные новые данные нужно включить в состав документа, уже отображающегося на экране, воспользовавшись структурой объектов DOM. От свойства responseText лучше отказаться, так как его применение потребует дополнительного синтаксического разбора. Гораздо полезнее свойство responseXML, в котором информация изначально представляется в совместимом с DOM виде. В структуре текущего документа необходимо выбрать узел, в состав которого следует включить возвращенные данные, и вызвать метод replaceChild(), заменив старое поддерево новым, прочитанным из responseXMLсле этого осталось задать внешний вид полученных данных посредством каскадных таблиц стилей. Выполнив упомянутые выше действия, мы получим Ajax-приложение.

Рассмотрим пример:

//В теле HTML файла пишем скрипт:

function checkName(input, response)

{

if (response != ''){

// Response mode

message = document.getElementById('nameCheckFailed');

if (response == '1'){

message.className = 'error';

}else{

message.className = 'hidden';

}

}else{

// Input mode

url = 'http://localhost/xml/checkUserName.php?q=' \\

+ input;

loadXMLDoc(url);

}

}

В данном примере в файле localhost/xml/checkUserName.php обраба­тываются данные, полученные из командной строки в переменной q. А результат сохраняется в XML структуре, которая хранится в этом же файле. Так можно получить из БД и обработать данные, которые необ­ходимо обновить.

Cookies

Cookie является решением одной из проблем HTTP протокола. HTTP транзакция завершается после того, как браузер сделал запрос, а сервер выдал ответ. После этого сервер "забывает" о пользователе и каждый следующий запрос считает новым пользователем. Используя cookie, можно запомнить первое значение, а при каждом последующем запросе это значение читается из переменной окружения HTTP_COOKIE и обрабатывается. Например, при каждом последующем входе на странице появляется либо именное приветствие, либо первоначальная форма с запросом имени пользователя, если значение cookie не установлено.

Cookie - это небольшая порция текстовой информации о предыдущем сеансе клиента, которую сервер передает браузеру для хранения в файле 'cookies.txt'. Браузер затем будет передавать ее серверу с каждым запросом как часть HTTP заголовка. Сервер на основании ее анализа будет совершать те или иные действия. Например, в случае авторизованного доступа в cookies может сохраняться login и password в течение сессии, что позволяет пользователю не вводить их снова при запросах каждого документа. В рекламном бизнесе на Интернет cookie используются для определения целевой аудитории по географическому положению пользователей, отслеживания интересов пользователей.

Работа с cookie

Полное описание поля Set-Cookie HTTP заголовка:

Set-Cookie: NAME=VAL; expires=DATE; path=PATH; domain= DOM_NAME;

NAME -имя, VAL – значение, expires время до которого хранится cookie. Если атрибут не указан, то cookie хранится в течение одного сеанса; DOM_NAME - домен, для которого значение cookie действительно. Если атрибут опущен, по умолчанию используется доменное имя сервера, на котором было задано это значение cookie. path=PATH - устанавливает подмножество документов, для которых действительно значение cookie. Чтобы cookie отсылались при каждом запросе к серверу, необходимо указать корневой каталог сервера, например, "path=/". Если атрибут не указан, то значение cookie распространяется только на документы в той же директории, в которой было установлено значение cookie.

Когда запрашивается документ с HTTP сервера, браузер проверяет свои cookie на предмет соответствия домену сервера. Если найдены подходящие значения cookie, браузер посылает их в серверу в виде пары. Cookie: NAME1=OPAQUE_STRING1; NAME2=OPAQUE_STRING2 ...

Клиент (браузер) имеет ограничения для cookies, например:

• всего может храниться до 300 значений cookies

• каждый cookie не может превышать 4Кбайт

• с одного сервера может храниться до 20 значений cookie

Наиболее часто используются три способа задания значений - через META-теги языка HTML, JavaScript и серверные-скрипты.

1. Задание cookie с помощью META-тегов:

<META HTTP-EQUIV="Set-Cookie" CONTENT="NAME=val; EX­PIRES=date; DOMAIN=dom_name; PATH=path; SECURE">

2. Задание cookie с помощью функции JavaScript setcookie()

function setCookie(name, value, expires, path, domain, secure) {

var curCookie = name + "=" + escape(value) +

((expires) ? "; expires=" + expires.toGMTString() : "") +

((path) ? "; path=" + path : "") +

((domain) ? "; domain=" + domain : "") +

((secure) ? "; secure" : "")

if (!caution || (name + "=" + escape(value)).length <= 4000)

document.cookie = curCookie

else

if (confirm("Cookie превышает 4KB и будет вырезан !"))

document.cookie = curCookie

}

Пример. Функция чтения значения cookie. Возвращает значение или пустую строку, если cookie не существует.

// name - имя считываемого cookie

function getCookie(name) {

var prefix = name + "="

var cookieStartIndex = document.cookie.indexOf(prefix)

if (cookieStartIndex == -1)

return null

var cookieEndIndex = document.cookie.indexOf

(";", cookieStartIndex + prefix.length)

if (cookieEndIndex == -1)

cookieEndIndex = document.cookie.length

return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex))

}

Пример. Функция удаления значения cookie. cookie устанавливается с устаревшим параметром expires, например 1 января 1970 года.

function deleteCookie(name, path, domain) {

if (getCookie(name)) {

document.cookie = name + "=" +

((path) ? "; path=" + path : "") +

((domain) ? "; domain=" + domain : "") +

"; expires=Thu, 01-Jan-70 00:00:01 GMT"

}

5.7. JQuery

jQuery — это библиотека (фреймворк) JavaScript, облегчающая работу с DOM, CSS, AJAX и визуальными приложениями. Это бесплатное и открытое ПО, создан­ное Джоном Резигом в 2006 году. Функциональность обеспечивается файлом JQuery.js, который загружается с сайта jQuery.com. В скачивании файла в пользовательский каталог js/ и, затем, в его подключении состоит основной способ загрузки:

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

Во втором способе загрузка происходит в онлайн режиме, при котором файл можно не скачивать, а подгрузить с сайта jQuery.com по сервису загрузки контента CDN

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

Рассмотрим пример, в котором мы хотим изменить цвет заголовка h1 на сайте <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>prjq1 -Demo</title> <!—Подключаем библиотеку--> <script type="text/javascript" src="js/jquery-1.8.3.js"> </script> </head> <body> <a href="http://jquery.com/">jQuery</a>//Здесь ссылки <h1> Использование jQuery</h1> <script> jQuery(document).ready(function(){ jQuery("h1").css("color", "green");//находит элемент h1 });//вызывает css и меняет цвет h1 на зеленый </script> </body></html>

Вызов функции Jquery(document).ready() означает, что функция будет дожидаться окончания загрузки страницы клиента (onload). Затем она выполнит анонимную функцию, содержащую обращение к jQuery. Функция jQuery() находит ссылку на элемент по строке описания элемента. Аргументы функций в jQuery() берутся в ковычки. Это позволяет осуществлять поиск элементов по правилам регулярных выражений. Затем обращаемся к CSS. Синонимом JQuery() является функция $() которая позволяет обращаться к элементам DOM по их естественным именам.

В следующем примере находятся элементы <p>подчеркиваются, текст с id=’idname’ выводится в окно, изменяется цвет шрифта в<h1>:

<!DOCTYPE html>

<html> <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>prjq1 - Jquery</title>

<script type="text/javascript" src="js/jquery-1.8.3.js"> </script>

<style type="text/css">

body{color: green;}

p{text-align:center;}

h1{text-align:center;}

</style>

<script type="text/javascript">

jQuery(document).ready(function(){// ждём загрузки документа, jQuery("h1").css("color", "yellow");

$("p").after("<hr/>") ;

alert($("p"));

alert($('#idname').text());

});

</script >

</head>

<body > <!--Это тело документа-->

<h1>Заголовок страницы</h1>

<p >Основной текст.</p>

<div id='idname'>Это div </div>

<a href="http://jquery.com">познавательно</a>

<a href="http://jsapi.com">познавательно тоже</a>

</body> </html>

Чтобы код сработал верно, нужно поместить его вниз страницы либо вызывать после загрузки документа с помощью jQuery(document).ready(). Сокращением для последней функции является функция Query();

Доступ к элементам DOM

Одной из основных областей применения JQuery является DOM. Функция JQuery() (сокращение $()) возвращает ссылку на массив элементов, выбранных из документа на основе заданных параметров. Рассмотрим несколько вариантов: $('tagname') — доступ к указанному тегу. Например $('span') возвратит все ссылки на теги <span>; $('*') — доступ ко всем элементам документа. Функция JQuery позволяет также выбирать элементы по «id» либо «className»: $('#idname') — доступ к элементу с id='idname'; $('.classname') — доступ к элементу по имени класса class=' classname'; Например $(".bebe")- выбираем элементы с class=bebe, $("div.wrap") - выбираем div с class=wrap. Выбираемые элементы можно перечислить через запятую: $('img, .myclass') получит все элементы <img>, а также элементы с классом myclass. Однако $('img#myPort') получит элемент <img id="myPort" />. Кроме этого можно указывать: $('element:first')—первый элемент, $('element:last')—последний элемент. $('element:even')— чётные элементы, $('element:odd')— нечётные элементы. $("in­put:text")-элементы input с type="text", $("input:checkbox:checked")-все чекбоксы с checked=true.

Другие методы библиотеки jQuery, вызываемые через точку, имеют приклеи­вающийся функционал, т.е. применяются к объекту, после которого были вызваны и возвращают новый или модифицированный массив. Рассмотрим пример:

$("div") //вернул все div

.not('.red') //отсек div с классом red и вернул остальные

.add('span.green') //добавил к выборке span'ы c классом green

.addClass('mycl')//добавил класс mycl каждому элементу.

$("div").filter(".red, :first") – все дивы, из них первый с классом red.

Методы выполняются слева направо. Рассмотрим пример перемещения по дереву, соответствующему таблице:

<!DOCTYPE html>

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>prjq3 - "Элементы JQuery</title>

<script type="text/javascript" src="js/jquery-1.8.3.js"> </script>

<style type="text/css">

body{color: green;}

h1{text-align:center;}

</style>

</head>

<body > <!--Это тело документа-->

<h1>Заголовок страницы</h1>

<div id='idname'>Это второй div </div>

<table width="75%" border="1" >

<tr>

<td>здесь текст</td>

<td>этот текст будет удален</td>

<td>а этот нет</td>

<td><a id="myid">del</a></td>

</tr>

</table>

<script>

$("#myid").click(function (){

$(this).parent().prev().prev().empty();

});

</script>

</body></html>

В примере использовались функции для родственных связей: $("p").parent() - выбор всех прямых предков элементов p, $("p").parents("div") - выбор всех предков эле­мента p, которые есть div. В поиске элементов заключается большая часть работы с jQuery.

Управление атрибутами

Ещё одна возможность JQuery — управление атрибутами тегов: alt, src, href, width, style, title, class и др для найденного элемента.Чтобы задать, удалить, изменить любой элемент или атрибут, используются методы двух видов. Методы, которые позволяют получить информацию об элементе и не имеют значения, называют getters, а методы, позволяющие установить заданные значения свойств - setters.

Функция(getters) .attr(имя_атрибута) — возвращает значение атрибута, .attr(имя_атрибута, значение_атрибута) — устанавливает новое значение атрибута (setters). .removeAttr(имя_атрибута) — удаляет атрибут, .addClass(имя_класса) — до­бавляет, .removeClass(имя_класса) — удаляет класс; .html() — возвращает HTML-код(getters). Например, $('h1').html(); .html(код) — устанавливает HTML-код(- setters). $('h1').html('hello world'); .val() — возвращает значение, .val(значение) — устанавливает значение эле­мента.

Рассмотрим пример поиска по документу всех тегов h2 которые являются непосредственными потомками тега article (выбор всех потомков элементов p)

<!DOCTYPE html>

<html ><head>

<meta charset="UTF-8"/>

<title>prjq4 - "Элементы JQuery</title>

<script type="text/javascript" src="js/jquery-1.8.3.js"> </script>

<style type="text/css">

body{color: green;}

p{text-align:center;}

h1{text-align:center;}

</style>

</head>

<body >

<div id='idname'>Это второй div </div>

<div id="content" class="wrapper box">

<hgroup><h1>Page Title</h1> <h2>Page Description</h2> </hgroup>

<article id="stick"> <h2>Article Title</h2>

<p>Заголовок статьи</p> </article>

<article> <h2>Article Description</h2>

<p>Описание текста</p> </article>

</div>

<script>

var a=$("article").find("h2").html(); // // выбираем теги h2 - потомки тега article

alert("h2.html=" +a);

$("div").find("article").find("h2") //

$("article > h2").html("NEWHTML");

var a= $("article").children().css('fontsize', '100px'); //

alert(a);

$("#stick").prev() // выбор предыдущего элемента от найденного

$("#stick").next() // выбор следующего элемента от найденного

</script>

<footer> <p>©copyright 2013</p> </footer>

</body> </html>

Кроме атрибутов, у элементов имеются также свойства, такие как selectedlndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked и defaultSelected. Для работы со свойствами используем функции prop():prop(propName) — получение зна­чения свойства, prop(propName, propValue) — установка значения свойства. removeProp(propName) — удаление свойства. Для отключения элементов формы и для изменения состояния чекбоксов используется функция pnop().