Сейчас мы с вами разберем работу с AJAX с помощью библиотеки jQuery. Мы будем разбирать jQuery версии 3. В ней работа с AJAX отличается от предыдущих версий. Будьте внимательны.

Внимание: для тех, кто на менторстве: этот урок желательно провести очно через скайп. Напишите мне, мы с вами назначим время занятия.

Что такое AJAX

Технология AJAX - это способ обновления части страницы без ее полной перезагрузки.

Как это происходит: в определенный момент, например, по какому-либо действию пользователя, JavaScript шлет запрос на сервер по определенному url. Через некоторое время сервер присылает ответ в виде кусочка HTML кода. Этот кусочек HTML можно затем вставить в любое место страницы.

Запросы, которые шлет JavaScript, бывают синхронными и асинхронными.

При синхронном запросе страница замирает в ожидании ответа сервера, а при асинхронном пользователь может спокойно продолжать работу со страницей, а когда придет ответ сервера - страница обновит какой-либо кусочек.

Чаще всего используются асинхронные запросы.

Использовать AJAX можно на чистом JavaScript, а можно на jQuery. Мы разберем второй вариант, так как он проще.

Простые запросы через jQuery

С помощью jQuery отправить AJAX запрос очень просто - вся работа делается через метод $.ajax(). Этот метод принимает параметром объект с настройками.

Самая главная настройка - url: адрес страницы, на который отправляется запрос.

Давайте, например, отправим запрос на страницу ajax.html:

$.ajax({
	url: 'ajax.html',
});

Запрос отправится, но результата мы не дождемся - мы просто не сказали, что делать, когда страница ajax.html ответит нам.

Для этого существует метод .done - параметром он принимает функцию, которая выполнится после ответа страницы (в нашем случае страницы ajax.html).

Эта функция в свою очередь ожидает параметром переменную - в нее положится ответ страницы.

Итак, давайте пошлем AJAX запрос на страницу ajax.html, полученный ответ положим в переменную text и запишем его в блок #result:

$.ajax({
	url: 'ajax.html',
})
.done(function(text) {
	$('#result').html(text);
});

По умолчанию метод $.ajax() шлет запросы асинхронно. Это значит, что окно браузера не замирает в ожидании ответа страницы, а продолжает свою работу. А когда через некоторое время страница ответит - тогда и выполнится метод done.

Если же произошла какая-то ошибка и страница по этому url нам не отвечает - мы можем отловить это событие с помощью метода fail:

$.ajax({
	url: 'ajax.html',
})
.done(function(text) {
	$('#result').html(text);
})
.fail(function() {
	$('#result').html('Ошибка загрузки');
});

При запросе выполнится или метод done при успехе или метод fail при ошибке.

Существует также метод always, который выполнится в любом случае:

$.ajax({
	url: 'ajax.html',
})
.always(function(html) {
	$('#result').html(html);
});

Отправка форм

Предыдущие запросы отправлялись методом GET. Это значит, что мы просто обращались на определенный адрес и ожидали ответа.

Можно также отправлять запросы методом POST. В этом случае мы кроме обращения на определенный url можем еще отправить туда некоторые данные, например, данные из формы, которую заполнил пользователь.

Как отправить такой запрос: для этого необходимо добавить еще две настройки в наш объект: свойство method указать 'POST' и тогда в data можно положить данные, которые отправятся на сервер методом POST:

$.ajax({
	url: 'ajax.html',
	method: 'POST',
	data: {name: 'Вася', age: 25}
})
.done(function(text) {
	$('#result').html(text);
});

Больше информации

Больше информации вы можете найти в официальной документации jQuery по AJAX: $.ajax, все методы по AJAX.

Чистый JS

Работа с AJAX также доступна на чистом JavaScript. Смотрите ее по следующим ссылкам: learn.javascript.ru, xmlhttprequest.ru.