Приветствую вас, уважаемый читатель моего блога.

Данная статья посвящена изучению основ работы с Ajax посредством jQuery.

Ajax — технология, позволяющая получать данные с сервера без перезагрузки страницы (ну вы это и так знаете). Реализуется данная технология нашими браузерами: в них вшиты классы, обладающие рядом свойств и методов, благодаря которым можно осуществлять асинхронные запросы к серверу (Ajax-запросы).

Видеоурок Ajax jQuery:

Скачать видеоурок (*.wmv, 52.5 МБ).

Скачать исходники (*.zip, 10.93 кБ).

Дамп базы данных (*.sql, 1.36 кБ)

В первой статье курса по ООП в PHP я пояснял термины класс, метод и свойство. Для совершенствования понимания работы с объектами рекомендую просмотреть весь видеокурс по PHP и Kohana.

Работать с Ajax можно двумя способами:

• Чистый Ajax (создание экземпляра класса, реализующего функции Ajax в выбранном браузере и манипуляция его методами и свойствами). Данный способ интересен с точки зрения полного контроля и понимания происходящего процесса. Однако он обладает существенным минусом — необходимо учитывать множество специфических фич различных браузеров. Избавиться от данного минуса позволяет второй способ.
• Взаимодействие с Ajax-возможностями браузера посредством библиотеки jQuery. В этом случае соблюдение всех браузерных особенностей мы оставляем на откуп разработчикам jQuery. При этом программный код значительно упрощается.

Я придерживаюсь мнения, что гораздо правильнее воспользоваться готовым продуманным решением, учитывающим все скользкие моменты, нежели пытаться обойти особенности самому. Ведь попросту можно не заметить/не знать проблему, которая вылезет в самый неподходящий момент.

Итак, наш выбор пал на библиотеку jQuery и ее видение Ajax.

Первое, что нужно сделать — это подключить библиотеку к нашему проекту. Как это реализовать я рассказывал в первом видеоуроке по jQuery. Единственное дополнение — лучше будет не пользоваться библиотекой на серверах Google, а скачать ее себе на компьютер.

Чуть-чуть теории Ajax

Ajax работает следующим образом:

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

Практика использования Ajax+jQuery

Постановка задачи: загрузка определенной страницы инициирует получение информации из MySQL-базы данных. Полученная посредством PHP-скрипта информация асинхронно передается в определенную страницу и подставляется в поля ввода.

Листинг 1: PHP-скрипт, получающего из базы данных значения и передающего их ajax-запросу:

<?
if (!mysql_connect(localhost, root, root))
{
	exit;
}
mysql_select_db("test");
$q = mysql_query("SELECT * FROM test_table");
$res = mysql_fetch_assoc($q);
echo json_encode($res);

Пояснение к коду:

2-я строка — соединились с базой данных (пользователь: root, пароль: root).

4-я строка — в случае безуспешной попытки соединения прекратить выполнение скрипта.

6-я строка — выбираем базу данных test.

7-я строка — выбираем все из таблицы test_table базы данных test (визуально структура test_table представлена на рис. 1).

8-я строка — текущая строка выборки из базы данных возвращается в виде ассоциативного массива.

9-я строка — выводится перекодированный в формат json ассоциативный массив.

Структура таблицы test_table:

Рис. 1: Струтура таблицы test_table.

Все, что отправляется на вывод PHP-скрипта, будет передано ajax-запросу (Листинг 2), в том числе и содержимое базы данных, преобразованное в json в виде объекта с именем data. Для доступа к полям id и content таблицы базы данных необходимо обратиться к соответствующим полям объекта data: data.id и data.content

Листинг 2: Ajax jQuery-код определенной страницы (раздел head HTML-документа):

<script type="text/javascript">
$(document).ready(function(){
	$.ajax({
	  type: "POST",
	  url: "/ajax.php",
	  dataType: "json",
	  success: function(data)
	  {
		$("#inp1").val(data.id);
		$("#p1").text(data.content);
	  }
	});
});
</script>

Пояснения к коду:

2-я строка — дожидаемся загрузки всего документа и лишь после этого выполняем код асинхронного запроса (пояснение необходимости ожидания загрузки документа см. в первом видеоуроке по jQuery).

4-я строка — способ отправки данных в файл с PHP-скриптом (POST или GET) (пока мы PHP-скрипту ничего отправлять не будем, но тип глобального массива отправки все равно укажем).

5-я строка — путь к файлу с PHP-скриптом (PHP-скрипт представлен в Листинге 1).

6-я строка — тип принимаемых от PHP-скрипта данных. Да-да, именно json.

7-я строка — если запрос к серверу успешно обработан (PHP-скрипт вернул данные), то метод success выполнит инструкции, расположенные в инициализируемой на лету функции. Обратите внимание, в качестве аргумента функции передается массив data, именно он будет содержать данные, полученные из PHP-скрипта (так уж устроен jQuery).

9-я строка — размещение значения поля id объекта data в строке ввода с идентификатором inp1 (см. рис. 2). Для решения данной задачи применяется синтаксис селектора языка jQuery: я нахожу в документе элемент с id=”inp1” и, благодаря методу val, вписываю в него значение id объекта data.

10-я строка — в абзац с id=”p1” подставляется значение поля conten объекта data.

Рис. 2: Структура проекта.

Ajax-отправка данных PHP-скрипту

Постановка задачи: после нажатия на кнопку организовать отправку данных методом POST из поля ввода формы PHP-скрипту и получить асинхронный ответ.

Немного преобразуем наш HTML (jquery.html) — добавим поле ввода <input type=”text” id=”inp0”>. Из него мы будем забирать значение для отправки PHP-скрипту.

Ajax-запрос будет запускаться после нажатия на вновь добавленную кнопку <input type=”button” id=»btn0″>.

Листинг 3: раздел BODY HTML-документа

<body>
	<p>Входные значения:</p>
	<p><input type="text" id="inp0"> <input type="button" value="Отправить запрос" id="btn0"></p>
	<p>Результаты обработки запроса:</p>
	<p><input type="text" id="inp1"></p>
	<p id="p1"></p>
</body>

Листинг 4: PHP-скрипт, отвечающий на Ajax-запрос

<?
if (isset($_POST["key"])) $key = $_POST["key"];
if (!mysql_connect(localhost, root, root))
{
	exit;
}
mysql_select_db("test");
$q = mysql_query("SELECT * FROM test_table");
$res = mysql_fetch_assoc($q);
$res['key'] = $key;
echo json_encode($res);

Пояснения к коду листинга 4:

2-я строка — получение содержимого поля key глобального массива POST (переданного Ajax-запросом) в переменную $key.

10-я строка — к массиву $res добавляется поле key, в которое записывается значение переданного методом POST параметра.

11-я строка — сформированный массив, включая поле key, отправляется в Ajax-запрос.

Листинг 5: Ajax-запрос с отправкой данных методом POST:

<script type="text/javascript">
	function runajax()
	{
		var inp0 = $("#inp0").val();
		$.ajax({
		  type: "POST",
		  data: "key=" + inp0,
		  url: "/ajax2.php",
		  dataType: "json",
		  success: function(data)
		  {
			$("#inp1").val(data.id);
			var temp = data.content + " " + data.key;
			$("#p1").text(temp);
		  }
		})
	}
	$(document).ready(function(){
		$("#btn0").click(runajax);
	});
</script>

Обратите внимание, теперь код Ajax-запроса спрятан внутри функции runajax(). Это приведет к тому, что Ajax-запрос будет обрабатываться только после вызова данной функции, а не сразу после загрузки документа, как это было в предыдущем примере.

Пояснение к коду листинга 5:

4-я строка — получение содержимого поля ввода с id=“inp0”. Для получения данных я использую все те же рекомендации официального сайта jQuery.

7-я строка — формируются данные для отправки PHP-скрипту. В глобальном массиве пост создается поле key со значением равным содержимому поля ввода id = “inp0”, именно его мы получали во 2-й строке Листинга 3.

13-я строка — сохраняем в переменную $temp содержимое полей data.content и data.key, разделенных пробелами.

14-я строка — содержимое переменной $temp выводится в абзац id=“p1”.

18-я строка — дожидаемся загрузки всего документа полностью.

19-я строка — демонстрируется интересный подход к обработке клика по кнопке id=“btn0”. Данный подход не требует создания обработчика событий в HTML-верстке, достаточно указать id нужного элемента и jQuery обработает требуемое событие.

Дело в том, что задачу можно решить установкой обработчика событий onClick кнопке: <input type=»button» value=»Отправить запрос» id=»btn0″ onClick=»runajax()»>, но такой подход смешивает во едино JavaScript и HTML, что философски неправильно.

Отправка Ajax-формы при помощи jQuery Form Plugin

Постараемся решить задачу номер 2 более простым способом. Для этого существует дополнение jQuery Form Plugin.

Скачаем и подключим данное дополнение к нашему проекту:

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

Необходимо изменить HTML-код раздела BODY (добавить тег формы и кнопке id=»btn0″ изменить атрибут type=»submit»):

Листинг 6: Изменение jQuery-кода для применения jQuery Form Plugin

<script type="text/javascript">
	$(document).ready(function()
	{
		$('#myForm').ajaxForm(
		{
			dataType: "json",
			success: function(data)
			{
				$("#inp1").val(data.id);
				var temp = data.content + " " + data.key;
				$("#p1").text(temp);
			}
		});
	});
</script>

Пояснение к листингу 6:

4-я строка — под идентификатором id=“myForm” скрывается тег формы, добавленной в раздел BODY. Применение метода ajaxForm() не допускает перезагрузку страницы после нажатия кнопки id = «btn0″, вместо этого выполняется Ajax-запрос к файлу PHP-скрипта, указанного в теге формы myForm.

Остальной код без изменений.

С уважением, Андрей Морковин.