AJAX в Действии: Примеры, Которые Стоит Изучить

AJAX (Asynchronous JavaScript and XML) — это технология, которая позволяет веб-приложениям обмениваться данными с сервером без необходимости перезагружать всю страницу. Это значительно улучшает пользовательский интерфейс, делая его более динамичным и отзывчивым.

Основные особенности AJAX:

1. Асинхронность: Запросы отправляются асинхронно, что позволяет не блокировать интерфейс пользователя и обеспечивает более плавную работу.
2. Обновление данных: Вместо полной перезагрузки страницы обновляется только необходимая часть, что снижает нагрузку на сервер и ускоряет работу приложения.
3. Поддержка различных форматов: Хотя изначально AJAX использовал XML, сейчас чаще применяются JSON, что упрощает обмен данными.

Примеры использования AJAX:

1. Автоматическое обновление данных: Например, в социальных сетях обновления статуса, лайков и комментариев происходят в реальном времени без обновления страницы.
2. Загрузка контента по требованию: В интернет-магазинах карточки товаров подгружаются по мере прокрутки страницы, что улучшает пользовательский опыт.
3. Формы с предварительным заполнением: В формах логина или поиска данные могут автоматически заполняться на основе предыдущих запросов.
4. Чат-системы: Реальное время обмена сообщениями реализуется с помощью AJAX, обновляя содержимое чата без полной перезагрузки страницы.
5. Фильтры и сортировки: В списках элементов (например, списки задач) AJAX позволяет мгновенно обновлять результаты при изменении фильтров.

Преимущества использования AJAX:

1. Повышение производительности: Снижение нагрузки на сервер и улучшение времени отклика.
2. Улучшение пользовательского опыта: Более плавный и отзывчивый интерфейс.
3. Уменьшение задержек: Данные обновляются мгновенно, что делает взаимодействие с приложением более естественным.

Таким образом, AJAX является мощным инструментом для создания современных веб-приложений, обеспечивая динамичность и эффективность взаимодействия с пользователем.

1. GET запрос

Запрос идет на index.php с параметром «text» и значением «Текст» через метод GET. По сути это то же самое что перейти в браузере по адресу – http://site.com/index.php?text=Текст

В результате запроса index.php вернет строку «Данные приняты – Текст», которая будет выведена в сообщении alert.

$.ajax({
	url: '/index.php',         /* Куда пойдет запрос */
	method: 'get',             /* Метод передачи (post или get) */
	dataType: 'html',          /* Тип данных в ответе (xml, json, script, html). */
	data: {text: 'Текст'},     /* Параметры передаваемые в запросе. */
	success: function(data){   /* функция которая будет выполнена после успешного запроса.  */
		alert(data);            /* В переменной data содержится ответ от index.php. */
	}
});

Код можно сократить используя функцию $.get

$.get('/index.php', {text: 'Текст'}, function(data){
	alert(data);
});

Код файла index.php

echo 'Данные приняты - ' . $_GET['text'];

$.ajax({
	url: '/index.php',
	method: 'get',
	cache: false
});

2. POST запросы

$.ajax({
	url: '/index.php',
	method: 'post',
	dataType: 'html',
	data: {text: 'Текст'},
	success: function(data){
		alert(data);
	}
});

Или сокращенная версия – функция $.post

$.post('/index.php', {text: 'Текст'}, function(data){
	alert(data);
});

Код файла index.php

echo 'Данные приняты - ' . $_POST['text'];

3. Отправка формы через AJAX

При отправке формы применяется функция serialize() , подробнее на jquery.com.

Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива – {login: 'ЗНАЧЕНИЯ_ПОЛЯ', password: 'ЗНАЧЕНИЯ_ПОЛЯ'}.

Особенности serialize():

• Кнопки формы по которым был клик игнорируются, в результате функции их не будет.
• serialize можно применить только к тегу form и полям формы, т.е. $('div.form_container').serialize(); – вернет пустой результат.

Пример отправки и обработки формы:

$("#form").on("submit", function(){
	$.ajax({
		url: '/handler.php',
		method: 'post',
		dataType: 'html',
		data: $(this).serialize(),
		success: function(data){
			$('#message').html(data);
		}
	});
	return false;
});

Код файла handler.php

if (empty($_POST['login'])) {
	echo 'Укажите логин';
} elseif (empty($_POST['password'])) {
	echo 'Укажите пароль';
} else {
	echo 'Авторизация...';
}

4. Работа с JSON

Идеальный вариант когда нужно работать с массивами данных.

$.ajax({
	url: '/json.php',
	method: 'get',
	dataType: 'json',
	success: function(data){
		alert(data.text);    /* выведет "Текст" */
		alert(data.error);   /* выведет "Ошибка" */
	}
});

Короткая версия

$.getJSON('/json.php', function(data) {
	alert(data.text);
	alert(data.error);
});

Код файла json.php

header('Content-Type: application/json');
 
$result = array(
	'text'  => 'Текст',
	'error' => 'Ошибка'
);
 
echo json_encode($result);

Возможные проблемы

При работе с JSON может всплыть одна ошибка – после запроса сервер отдал результат, все хорошо, но метод success не срабатывает. Причина кроется в серверной части (PHP) т.к. перед данными могут появится управляющие символы, например:

Из-за них ответ считается не валидным и считается как ошибочный запрос.

В таких случаях помогает очистка буфера вывода ob_end_clean (если он используется на сайте).

...
 
// Очистка буфера
ob_end_clean(); 
		
header('Content-Type: application/json');
echo json_encode($result, JSON_UNESCAPED_UNICODE);
exit();

5. Выполнение JS загруженного через AJAX

В JQuery реализована функция подгруздки кода JS через AJAX, после успешного запроса он будет сразу выполнен.

$.ajax({
	method: 'get',
	url: '/script.js',
	dataType: "script"
});

Или

$.getScript('/script.js');

6. Дождаться выполнения AJAX запроса

По умолчанию в JQuery AJAX запросы выполняются асинхронно. Т.е. запрос не задерживает выполнение программы пока ждет результатов, а работает параллельно.

Простой пример:

var text = '';
 
$.ajax({
	url: '/index.php',
	method: 'get',
	dataType: 'html',
	success: function(data){
		text = data;
	}
});
 
alert(text);  /* Переменная будет пустая. */

Переменная text будет пустая, а не как ожидается текст который вернул index.php

Чтобы включить синхронный режим нужно добавить параметр async: false. Соответственно синхронный запрос будет вешать прогрузку страницы если код выполняется в страницы.

var text = '';
 
$.ajax({
	url: '/index.php',
	method: 'get',
	dataType: 'html',
	async: false,
	success: function(data){
		text = data;
	}
});
 
alert(text); /* В переменной будет результат из index.php. */

7. Отправка HTTP заголовков

Через AJAX можно отправить заголовки HEAD, они указываются в параметре headers.

$.ajax({
	url: '/index.php',
	method: 'get',
	dataType: 'html',
	headers: {'Token_value': 123},
	success: function(data){
		console.dir(data);
	}
});

В PHP они будут доступны в массиве $_SERVER, ключ массива переводится в верхний регистр с приставкой HTTP_, например:

echo $_SERVER['HTTP_TOKEN_VALUE']; // 123

Для отправки заголовков для всех запросов AJAX с помощью jQuery, можно воспользоваться методом $.ajaxSetup():

$.ajaxSetup({
	headers: {
		'X-CSRF-TOKEN': 'Токен',
		'Authorization': 'Bearer token'
	}
});

8. Обработка ошибок

Через параметр error задается callback-функция, которая будет вызвана в случаи если запрашиваемый ресурс отдал 404, 500 или другой код.

$.ajax({
	url: '/index.php',
	method: 'get',
	dataType: 'json',
	success: function(data){
		console.dir(data);
	},
	error: function (jqXHR, exception) {
		if (jqXHR.status === 0) {
			alert('Not connect. Verify Network.');
		} else if (jqXHR.status == 404) {
			alert('Requested page not found (404).');
		} else if (jqXHR.status == 500) {
			alert('Internal Server Error (500).');
		} else if (exception === 'parsererror') {
			alert('Requested JSON parse failed.');
		} else if (exception === 'timeout') {
			alert('Time out error.');
		} else if (exception === 'abort') {
			alert('Ajax request aborted.');
		} else {
			alert('Uncaught Error. ' + jqXHR.responseText);
		}
	}
});

Через метод ajaxError() можно задать обработчик ошибок для всех AJAX-запросов на сайте.

$(document).ajaxError(function(event, xhr, options) {
	 switch (xhr.status){
		case 403:
		   alert('Requested page forbidden (404).');
		break;
		case 404:
		   alert('Requested page not found (404).');
		break;
		case 500:
			alert('Internal Server Error (500).');
		break;
	 }
});