Введение в AJAX

AJAX.
Проверка ошибок ввода формы ДО Submit: на сервер передается

имя пользователя, результат проверки возвращается на страницу.
Быстрая загрузка: браузер обращается к серверу только за данными, а не обновляет весь интерфейс.
Автоматическая "доставка" писем в открытую папку: на сервер периодически отправляется запрос и, если пришли новые письма, они появляются в браузере.
Автодополнение: достаточно ввести первые буквы имени адресата, остальные дополняются автоматически.

загрузить только изменившуюся часть.
Уменьшение нагрузки на сервер: например, на странице

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

браузером в истории посещения страниц;
не функционирует кнопка «Назад»;
невозможно сохранить закладки

на желаемый материал.
Динамически загружаемое содержимое недоступно поисковикам, поэтому необходимо предусматривать альтернативные способы доступа к содержимому сайта.
Становятся неактуальными старые методы учёта статистики сайтов, т.к. многие статистические сервисы ведут учет просмотра новых страниц.
Кроссбраузерность: разные браузеры поддерживают стандарты неодинаково.

AJAX (от англ. Asynchronous Javascript and XML — "асинхронный JavaScript

и XML") — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в "фоновом" обмене данными браузера с веб-сервером.

отправленных с использованием jQuery. Не смотря на то, что функция

$.ajax() может использоваться более гибко, в большинстве случаев в этом нет необходимости. В jQuery существуют такие альтернативные методы как $.get() и .load(), которые проще в использовании.

необязательными. Допускается, но не рекомендовано установить значение по умолчанию для

любого параметра с использованием метода $.ajaxSetup().

отправляется в Accept заголовка запроса. Этот заголовок сообщает серверу, какой

ответ запрос будет принимать в ответ. Обратите внимание, что значение параметра, указанного в dataType (тип данных, которые мы ожидаем от сервера) сопоставляется с указанным в параметре. Кроме того, для корректной обработки ответа от сервера необходимо в параметре converters указать функцию, которая возвращает преобразованное значение ответа.

как обрабатывать ответ
converters: {
"text mycustomtype": function( result

) {
// возвращаем преобразованное значение ответа
return newresult;
}
},
// Ожидаемый тип данных ("mycustomtype")
dataType: "mycustomtype"
});

если вам необходимо организовать синхронные запросы, то установите этот параметр

в false. Обратите внимание, что кроссдоменные запросы и элемент, параметр dataType которого имеет значение "jsonp" не поддерживают запросы в синхронном режиме. Учтите, что используя синхронные запросы вы можете временно заблокировать браузер отключив какие-либо действия пока запрос будет активен.

будет вызвана перед осуществлением AJAX запроса. Функция позволяет изменить объект

jqXHR (в jQuery 1.4.х объект XMLHTTPRequest) до его отправки. Объект jqXHR это надстройка расширяющая объект XMLHttpRequest, объект содержит множество свойств и методов, которые позволяет получить более полную информацию об ответе сервера, а так же объект содержит Promise методы. Если функция beforeSend возвращает false, то AJAX запрос будет отменен. Начиная с версии jQuery 1.5 функция beforeSend будет вызываться независимо от типа запроса.

Boolean.
Если задано значение false, то это заставит запрашиваемые страницы не

кэшироваться браузером. Обратите внимание, что значение false будет правильно работать только с HEAD и GET запросами.

запрос заканчивается (функция выполняется после AJAX событий "success" или "error").

В функцию передаются два параметра: jqXHR (в jQuery 1.4.х объект XMLHTTPRequest) и строка соответствующая статусу запроса ("success", "notmodified", "nocontent", "error", "timeout", "abort", или "parsererror"). Начиная с версии jQuery 1.5 параметр complete может принимать массив из функций, которые будут вызываться по очереди.

будет обрабатывать (парсить) ответ в зависимости от типа содержимого. Добавлен

в версии jQuery 1.5.

которое указывается в запросе при передаче данных на сервер. С

версии с jQuery 1.6 допускается указать значение false, в этом случае jQuery не передает в заголовке поле Content-Type совсем.

является объект window. Параметр context позволяет настроить контекст исполнения функции

таким образом, что $( this ) будет ссылаться на определенный DOM элемент, или объект.

context: $( ".myClass" ), // новый контекст исполнения функции
success:

function(){ // если запрос успешен вызываем функцию
$( this ).html( "Всё ок" ); // добавлем текстовое содержимое в элемент с классом .myClass
}
});

текст
"text html": true, // текст в html
"text json":

jQuery.parseJSON, // текст в JSON
"text xml": jQuery.parseXML // текст в XML
}

преобразования. Значение каждого преобразователя является функцией, которая возвращает преобразованное значение

ответа. Добавлен в версии jQuery 1.5.

true для кроссдоменных запросов).
Тип: Boolean.
Если вы хотите сделать кроссдоменный запрос

находясь на том же домене (например jsonp-запрос), то установите этот параметр в true. Это позволит, к примеру, сделать перенаправление запроса на другой домен с вашего сервера. Добавлен в версии jQuery 1.5.

сервер. Если они не является строкой, то преобразуются в строку

запроса. Для GET запросов строка будет добавлена к URL. Для того, чтобы предотвратить автоматическую обработку вы можете воспользоваться параметром processData со значением false. Если данные передаются в составе объекта, то он должен состоять из пар ключ/значение. Если значение является массивом, то jQuery сериализует несколько значений с одним и тем же ключом (в зависимости от значения параметра traditional, который позволяет задействовать традиционный тип сериализации основанный на методе $.param).

после успешного выполнения AJAX запроса и позволяет обработать "сырые" данные,

полученные из ответа сервера. Возврат данных должен происходить сразу после их обработки. Функция принимает два аргумента: data - данные полученные от сервера в виде строки и type - тип этих данных (значение параметра dataType).

"POST", "GET", "PUT"). Добавлен в версии jQuery 1.9.0.

вызова, которая вызывается если AJAX запрос выполнится успешно. Функции передаются

три аргумента:
data - данные возвращенные с сервера. Данные форматируюся в соответствии с параметрами dataType, или dataFilter, если они указаны
textStatus - строка описывающая статус запроса.
jqXHR - объект jqXHR (до версии jQuery 1.4.x объект XMLHttpRequest).

должны использовать type, если вы используете версии jQuery до 1.9.0.

который отправляется запрос.

при нажатиии на элемент
$.ajax({
method:

"POST", // метод HTTP, используемый для запроса
url: "about.php", // строка, содержащая URL адрес, на который отправляется запрос
data: { // данные, которые будут отправлены на сервер
name: "Denis",
city: "Erebor"
},
success: [function ( msg ) { // функции обратного вызова, которые вызываются если AJAX запрос выполнится успешно (если несколько функций, то необходимо помещать их в массив)
$( "p" ).text( "User saved: " + msg ); // добавляем текстовую информацию и данные возвращенные с сервера
},
function () { // вызов второй функции из массива
console.log( "next function" );
}],
statusCode: {
200: function () { // выполнить функцию если код ответа HTTP 200
console.log( "Ok" );
} } }) });});

Клик

нажатии на элемент (кнопка) выполняем асинхронный AJAX запрос со

следующими параметрами:
method - указываем метод HTTP POST, используемый для запроса.
url - файл, к которому мы обращаемся ("about.php"), он содержит следующий PHP код:
$name = $_POST['name']; // создаем переменную name, которая содержит переданные скрипту через HTTP метод POST данные (с ключом name)
$city = $_POST['city']; // создаем переменную name, которая содержит переданные скрипту через HTTP метод POST данные (с ключом city)
echo $name.", ".$city; // выводим текстовое содержимое (значение выше созданных переменных, перечисленных через запятую)
?>
data - данные, которые будут отправлены на сервер.
success - функции обратного вызова, которые вызываются если AJAX запрос выполнится успешно. Обратите внимание, что если используется несколько функций, то необходимо помещать их в массив. Каждая функция выполняется в свою очередь.
statusCode - объект числовых кодов HTTP и функции, которые будут вызываться, когда код ответа сервера имеет соотвествующее значение (определенный код HTTP). В нашем случае код 200.