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

JavaScript

JavaScript — прототипно-ориентированный сценарный язык программирования. Является диалектом языка ECMAScript.

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

Цель и область применения

Библиотека jQuery

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX.

Возможности

Движок кроссбраузерных CSS-селекторов Sizzle, выделившийся в отдельный проект;
Переход по дереву DOM, включая поддержку XPath как плагина;
События;
Визуальные эффекты;
AJAX-дополнения;
JavaScript-плагины.

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

jQuery, как правило, включается в веб-страницу как один внешний JavaScript-файл:

<head> <script type="text/javascript" src="путь к jQuery.js"></script></head>

Вся работа с jQuery ведётся с помощью функции $. Если на сайте применяются другие JavaScript библиотеки, где $ может использоваться для своих нужд, то можно использовать её синоним — jQuery. Второй способ считается более правильным, а чтобы код не получался слишком громоздким, можно писать его следующим образом:

jQuery(function($) { // здесь код скрипта, где в $ будет находиться объект, предоставляющий доступ к функциям jQuery})

Работу с jQuery можно разделить на 2 типа:

Получение jQuery-объекта с помощью функции $(). Например, передав в неё CSS-селектор, можно получить jQuery-объект всех элементов HTML, попадающих под критерий и далее работать с ними с помощью различных методов jQuery-объекта.
Вызов глобальных методов у объекта $, например, удобных итераторов по массиву.

Типичный пример манипуляции сразу несколькими узлами DOM заключается в вызове $ функции со строкой селектора CSS, что возвращает объект jQuery, содержащий некоторое количество элементов HTML-страницы. Эти элементы затем обрабатываются методами jQuery. Например:

$("div.test").add("p.quote").addClass("blue").slideDown("slow");

находит все элементы div с классом test, а также все элементы p с классом quote, и затем добавляет им всем класс blue и визуально плавно спускает вниз. Здесь методы add, addClass и slideDown возвращают ссылку на исходный объект $("div.test"), поэтому возможно вести такую цепочку.

Методы, начинающиеся с $., удобно применять для обработки глобальных объектов. Например:

$.each([1,2,3], function() { document.write(this + 1);});

добавит на страницу 234.

Пример добавления к элементу обработчика события click с помощью jQuery:

$("a").click(function() { alert("Hello world!"); });

В данном случае при нажатии на элемент <A> происходит вызов alert("Hello world!").

Веб-приложения

JavaScript используется в клиентской части веб-приложений: клиент-серверных программ, в котором клиентом выступает браузер, а сервером — веб-сервер, имеющих распределённую между сервером и клиентом логику. Обмен информацией в веб-приложениях происходит по сети. Одним из преимуществ такого подхода является тот факт, что клиенты не зависят от конкретной операционной системы пользователя, поэтому веб-приложения являются кроссплатформенными сервисами.

AJAX

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

Ajax

AJAX – группа технологий, которая используется в веб разработке для создания интерактивных приложений. AJAX позволяет передавать данные с сервера без перезагрузки страницы. Таким образом можно получать очень впечатляющие результаты. А библиотека jQuery существенно облегчает реализацию AJAX с помощью встроенных методов.

Для реализации технологии используется метод $.ajax или jQuery.ajax:

$.ajax(свойства) или $.ajax(url [, свойства])

Второй параметр был добавлен в версии 1.5 jQuery.

url– адрес запрашиваемой страницы;

properties – свойства запроса.

success (функция) – данная функция вызывается после успешного завершения запроса. Функция получает от 1 до 3 параметров (в зависимости от используемой версии библиотеки). Но первый параметр всегда содержит возвращаемые с сервера данные.

data (объект/строка) – пользовательские данные, которые передаются на запрашиваемую страницу.

dataType (строка) – возможные значения: xml, json, script или html. Описание типа данных, которые ожидаются в ответе сервера.

type (строка) – тип запроса. Возможные значения: GET или POST. По умолчанию: GET.

url (строка) – адрес URL для запроса.

Пример 1

Простая передача текста.

	$.ajax({
	url: 'response.php?action=sample1',

	success: function(data) {
	$('.results').html(data);

	}
	});

Для ответа имеется элемент div .result.

<div class="results">Ждем ответа</div>

Сервер просто возвращает строку:

echo 'Пример 1 - передача завершилась успешно';

Пример 2

Передаем пользовательские данные PHP скрипту.

	$.ajax({
	type: 'POST',

	url: 'response.php?action=sample2',
	data: 'name=Andrew&nickname=Aramis',

	success: function(data){
	$('.results').html(data);

	}
	});

Сервер возвращает строку со вставленными в нее переданными данными:

echo 'Пример 2 - передача завершилась успешно. Параметры: name = ' . $_POST['name'] . ', nickname= ' . $_POST['nickname'];

Пример 3

Передача и выполнение кода JavaScript

	$.ajax({
	dataType: 'script',

	url: 'response.php?action=sample3',
	})

Сервер выполняет код:

echo "$('.results').html('Пример 3 - Выполнение JavaScript');";

Пример 4

Используем XML. Пример можно использовать для работы с внешними XML, например, RSS фидом.

	$.ajax({
	dataType: 'xml',

	url: 'response.php?action=sample4',
	success: function(xmldata){

	$('.results').html('');
	$(xmldata).find('item').each(function(){

	$('
	<li></li>


	').html( $(this).text() ).appendTo('.results');

	});
	}

});

Сервер должен возвращать XML код:

	header ('Content-Type: application/xml; charset=UTF-8');

	echo <<<XML
	<?xml version='1.0' standalone='yes'?>

	<items>
	<item>Пункт 1</item>

	<item>Пункт 2</item>
	<item>Пункт 3</item>

	<item>Пункт 4</item>
	<item>Пункт 5</item>

	</items>
	XML;

Пример 5

Используем данные JSON. Входные параметры можно использовать в качестве атрибутов получаемого объекта.

	$.ajax({
	dataType: 'json',

	url: 'response.php?action=sample5',
	success: function(jsondata){

	$('.results').html('Name = ' + jsondata.name + ', Nickname = ' + jsondata.nickname);
	}

});

Сервер должен возвращать данные в формате JSON:

	$aRes = array('name' => 'Andrew', 'nickname' => 'Aramis');

	require_once('Services_JSON.php');
	$oJson = new Services_JSON();

echo $oJson->encode($aRes);