Как использовать ajax в php и jquery

Что такое AJAX и чем он полезен?

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

Обычная веб страница содержит ссылки или формы, которые при нажатии или отправке создают запрос к новому адресу URL на веб сервере. Сервер отправляет полностью новую страницу HTML, которую затем выводит браузер, заменяя оригинальную страницу. Такой подход занимает много времени и плохо действует на посетителя, так как тому приходится ждать загрузки новой страницы.
При использовании технологии AJAX, JavaScript код делает запрос к URL на сервере. Код также может отправить данные вместе с запросом. Затем JavaScript код обрабатывает ответ сервера и действует соответствующим образом. Например, могут быть произведены вычисления с возвращаемыми данными, добавлен или обновлен виджет на странице, выдано сообщение посетителю об обновлении базы данных на сервере.

Так как запрос AJAX выполняется в фоновом режиме, то код JavaScript (и посетитель) может продолжать работу со страницей во время обработки запроса. Процесс скрыт от посетителя, которому не нужно покидать страницу, которую он просматривает в данный момент времени. Такой подход делает страницы с AJAX очень приятными в работе.

Фундаментальным моментом AJAX является объект JavaScript . Он предоставляет ряд методов, таких как , и , которые могут быть использованы при отправке запросов AJAX на сервер и обработке ответов в фоновом режиме.

Разработка кросс-браузерного JavaScript кода AJAX может оказаться довольно нудным процессом. К счастью, jQuery дает вам несколько простых в использовании методов AJAX, которые позволяют абстрагировать большое количество низкоуровневых операций.

Для тех кто более любопытен, слово AJAX является аббревиатурой из первых букв выражения на английском языке «Asynchronous JavaScript And XML» (Асинхронный JavaScript и XML). Однако, термин может ввести в заблуждение — запрос не обязательно должен быть асинхронным и необязательно использовать XML для отправки данных.

Необходимые файлы и папки

3.1 Файловая структура

app/
- assets/
  - css/
  - js/
    - bootbox.min.js
    - jquery.min.js
- products/
  - create-product.js
  - delete-product.js
  - read-products.js
  - read-one-product.js
  - update-product.js
- app.js
index.html

3.3 Подключение Bootstrap

Как вы можете видеть из файла index.html, мы включили Bootstrap через CDN.

Если вам нужно включить Bootstrap через загрузку, то это будет работать также.

3.4 Создание главного CSS файла

Создайте в корне папку app
В ней создайте папку assets
В папке assets создайте папку css
В папке css создайте файл style.css

Файл style.css — это наш главный файл CSS. Вы можете поместить в этот файл любой CSS для дополнительной стилизации веб-страницы. В нашем случае у нас есть следующий код CSS внутри файла style.css.

3.5 Установка JavaScript-библиотек jQuery и Bootbox.js

Откройте папку assets в папке app и создайте папку js

В папку js мы поместим библиотеки jQuery и Bootbox.js.

Библиотека jQuery необходима, чтобы сделать наше простое приложение простым. Скачайте jQuery по этой ссылке.

Библиотека Bootbox.js необходима, чтобы диалоговое окно подтверждения «удаления» выглядело лучше. Загрузите Bootbox.js по этой ссылке.

Также есть CDN для этих JavaScript библиотек. Вы можете использовать их, если хотите. Оба варианта будут работать.

3.6 Создание файла app.js

Файл app.js будет содержать некоторые основные функции HTML и JavaScript, которые могут использоваться другими JS файлами в нашем приложении.

В папке app создайте файл app.js со следующим содержимым.

3.7 Создание папки «products» и файлов для будущих скриптов

Теперь мы создадим несколько JavaScript файлов.

Внутри папки app создайте папку products
В папке products создайте следующие файлы:

read-products.js
create-product.js
read-one-product.js
update-product.js
delete-product.js

Пока мы оставим их пустыми. Но мы заполним их в следующих разделах этого руководства.

Что такое AJAX ? Пример реализации.

AJAX, или, более длинно, Asynchronous Javascript And Xml — технология для взаимодействия с сервером без перезагрузки страниц.

За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.

Например, при нажатии кнопки голосовать — из браузера на сервер будет отправлено сообщение, а сервер ответит браузеру, что голос принят.

Здесь будет ответ сервера

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

Вот код кнопки в примере выше:

<input value="Голосовать!" onclick="vote()" type="button" />

При нажатии она вызывает функцию , которая отправляет запрос на сервер, ждет ответа, а затем показывает сообщение об этом в ‘е под кнопкой:

<div id="vote_status">Здесь будет ответ сервера</div>

Далее мы разберем, как она работает, более подробно.

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

function getXmlHttp(){
  var xmlhttp;
  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      xmlhttp = false;
    }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}

Более подробно о деталях реализации AJAX с использованием XmlHttpRequest и других транспортов можно почитать в разделе про общение с сервером.

Здесь мы не будем на этом останавливаться и перейдем сразу к функции :

// javascript-код голосования из примера
function vote() {
	// (1) создать объект для запроса к серверу
	var req = getXmlHttp()  
       
        // (2)
	// span рядом с кнопкой
	// в нем будем отображать ход выполнения
	var statusElem = document.getElementById('vote_status') 
	
	req.onreadystatechange = function() {  
        // onreadystatechange активируется при получении ответа сервера

		if (req.readyState == 4) { 
            // если запрос закончил выполняться

			statusElem.innerHTML = req.statusText // показать статус (Not Found, ОК..)

			if(req.status == 200) { 
                 // если статус 200 (ОК) - выдать ответ пользователю
				alert("Ответ сервера: "+req.responseText);
			}
			// тут можно добавить else с обработкой ошибок запроса
		}

	}

       // (3) задать адрес подключения
	req.open('GET', '/ajax_intro/vote.php', true);  

	// объект запроса подготовлен: указан адрес и создана функция onreadystatechange
	// для обработки ответа сервера
	 
        // (4)
	req.send(null);  // отослать запрос
  
        // (5)
	statusElem.innerHTML = 'Ожидаю ответа сервера...' 
}

Поток выполнения, использованный vote, довольно типичен и выглядит так:

Функция создает объект
назначает обработчик ответа сервера
открывает соединение
отправляет запрос вызовом (ответ сервера принимается срабатывающей в асинхронном режиме функцией )
показывает посетителю индикатор состояния процесса

Серверный обработчик, к которому обращен AJAX-запрос (в примере это vote.php) по сути ничем не отличается от обычной страницы. AJAX-запрос, отправляемый , ничем не отличается от обычного запроса.

Просто текст, который возвращает сервер, не показывается как HTML, а читается и обрабатывается функцией .

Пример: vote.php для примера с голосованием

<?php
sleep(3);
echo 'Ваш голос принят!';

Технология AJAX использует комбинацию:

(X)HTML, CSS для подачи и стилизации информации
DOM-модель, операции над которой производятся javascript на стороне клиента, чтобы обеспечить динамическое отображение и взаимодействие с информацией
XMLHttpRequest для асинхронного обмена данными с веб-сервером. В некоторых AJAX-фреймворках и в некоторых ситуациях, вместо XMLHttpRequest используется IFrame, SCRIPT-тег или другой аналогичный .
JSON часто используется для обмена данными, однако любой формат подойдет, включая форматированный HTML, текст, XML и даже какой-нибудь EBML

Типичное AJAX-приложение состоит как минимум из двух частей.

Первая выполняется в браузере и написана, как правило, на JavaScript, а вторая — находится на сервере и написана, например, на Ruby, Java или PHP .

Между этими двумя частями происходит обмен данными через XMLHttpRequest(или другой транспорт).

Работаем с Инспектором свойств браузера

Заголовки AJAX-запроса

Помимо того, что мы видим работу запроса в виде таблицы в html-файле, мы можем также проверить наш XHR запрос на вкладке Сеть (Network) в Инструментах разработчика (F12, или CTRL +SHIFT + I) в Chrome или Mozilla Firefox, так как все передаваемые нами данные уходят с помощью специальных заголовков.

Запрос с одним чекбоксом в Chrome

Слева мы видим php-файл, который получил запрос и как-то на него ответил. Справа — данные самого запроса. На скриншоте выше это те отправленные данные, которые заполнил (отметил) в форме пользователь в виде пар .

В случае, когда пользователь отметил 1, 2 и более чекбокса, мы видим, что в Google Chrome передаются данные массива.

Запрос с несколькими чекбоксами в Chrome

В инспекторе свойств браузера Firefox подобная картина, хоть и несколько иначе отображаемая.

Запрос с одним чекбоксом в Firefox

Запрос с несколькими чекбоксами в Firefox

Ответ сервера

В той же вкладке Сеть (Network) Инспектора свойств вы найдете и ответ сервера, который был сформирован нашим php-файлом. И в Chrome, и в Firefox мы можем видеть строки таблицы с отправленными данными.

Результат из php-файла в Chrome

Результат из php-файла в Firefox

10 ответов

Лучший ответ

Конечно, вы можете показать его перед выполнением запроса и скрыть после его завершения:

Я обычно предпочитаю более общее решение связать его с глобальными событиями ajaxStart и ajaxStop, чтобы оно отображалось для всех событий ajax:

249

Zack Bloom
13 Янв 2011 в 20:14

-1

Narendra Reddy
12 Янв 2019 в 13:05

HTML-код:

Может кто-нибудь объяснить, почему это не работает?

Код JQUERY:

sumityadavbadli
30 Ноя 2016 в 07:30

Я думаю, что это может быть лучше, если у вас есть тонны вызовов $ .ajax

ПРИМЕЧАНИЕ.

Если вы используете CSS. Элемент, который вы хотите показать, когда ajax извлекает данные из вашего внутреннего кода, должен быть таким.

The Terrible Child
18 Апр 2018 в 04:12

Вы можете добавить ajax start и complete, это работает, когда вы нажимаете на событие кнопки.

Roshan Vishwakarma
8 Дек 2018 в 04:54

Перед вашим вызовом либо вставьте загрузочное изображение в div / span, а затем в функции успеха удалите это изображение. В качестве альтернативы вы можете настроить класс CSS, например загрузка, которая может выглядеть следующим образом

А затем назначьте этот класс span / div и очистите его в функции успеха

Vadim
13 Янв 2011 в 20:13

«Изображение», которое люди обычно показывают во время вызова AJAX, представляет собой анимированный GIF. Поскольку невозможно определить процент выполнения запроса ajax, используемые анимированные картинки представляют собой неопределенные счетчики. Это просто изображение, повторяющееся снова и снова, как шарик из кругов разных размеров. http://ajaxload.info/. Хороший сайт для создания собственного настраиваемого блесна.

jEremyB
13 Янв 2011 в 21:19

Используйте beforeSend объекта ajax и завершите функции. Лучше показать gif изнутри beforeSend, чтобы все поведение было заключено в один объект. Будьте осторожны, скрывая гифку с помощью функции успеха. Если запрос не выполнен, вы, вероятно, все равно захотите скрыть GIF. Для этого используйте функцию Complete. Это будет выглядеть так:

jEremyB
13 Янв 2011 в 21:06

Это позволяет блокировать определенные элементы страницы или всю страницу во время выполнения запроса ajax.

matt
13 Янв 2011 в 20:15

Что-то вроде этого:

Andy
13 Янв 2011 в 20:12

Отправка формы со всеми данными ajax-запросом через jQuery

Примерный код html-формы:

<form id="myform" action="" method="POST">
  <label for="user_name">Ваше имя:</label>
  <input name="user_name" value="" type="text" />
  <input type="submit" value="Отправить">
</form>

JavaScript код:

$('#myform').submit(function(e) {
  e.preventDefault();
  $.ajax({
    type: $(this).attr('method'),
    url: '<url-адрес>',
    data: $(this).serialize(),
    async: false,
    dataType: "html",
    success: function(result){
      alert('Форма отправлена');
    }
  });
});

Для того чтобы страница не перезагружалась при нажатии на кнопку «submit», сначала отменяем стандартые действия браузера использовав e.preventDefaults().

В параметре data мы передаем все поля формы использовав $(this).serialize() — эта функция преобразует все input-ы и select-ы в строку, пригодную для отправки на сервер.

Так же, здесь использован параметр async: false, чтобы пока форма не отправится на сервер больше ничего нельзя было нажать или сделать.

Как передать файл через ajax:

$('#js-send-form').on('submit', function(){
		if (!$(this).hasClass('normal')) {

			var $dataForm = new FormData();
			$dataForm.append('comment', $('#comment').val());
			$dataForm.append('type', $('#types option:selected').val());

			jQuery.each(jQuery('#file').files, function(i, file) {
				$dataForm.append('file-'+i, file);
			});

			$.ajax({
				url: "/local/components/ready/main.documents/templates/.default/ajax_soap.php",
				data: $dataForm,
				cache: false,
				contentType: false,
				processData: false,
				method: 'POST',
				type: 'POST', // For jQuery < 1.9
				success: function(data){
					console.log(data);
				}
			});

			return false;
		}
	});

Как реализовать поиск данных с помощью jQuery AJAX?

9.2 Создание файла products.js

Файл products.js будет содержать любые функции, которые могут использоваться другими компонентами продукта, такими как наши файлы «read-products.js» или «search-products.js».

Откройте app/products и создайте файл products.js. Откройте его и добавьте следующий код.

9.3 Создание файла search-product.js

Файл search-product.js будет содержать код, который перехватывает отправку формы поиска продукта.

Откройте app/products, создайте файл search-products.js и введите в него следующий код.

9.4 Изменение файла read-products.js

Мы хотим, чтобы «список товаров» и «поиск товаров» имели один и тот же шаблон таблицы HTML. Для этого мы будем использовать функцию readProductsTemplate() файла products.js.

Откройте папку app/product. Откройте файл read-products.js. Измените функцию showProducts() на следующий код.

Как работает AJAX с использованием библиотеки jQuery

В предыдущем разделе мы обсуждали, как можно выполнять вызовы AJAX, используя ванильный JavaScript. В этом разделе мы будем использовать библиотеку jQuery, чтобы продемонстрировать это. Я предполагаю, что вы знаете основы библиотеки jQuery.

Библиотека jQuery предоставляет несколько различных методов для выполнения вызовов AJAX, хотя здесь мы рассмотрим стандартный метод , который используется чаще всего.

Посмотрите на следующий пример.

Как вы уже знаете, знак используется для ссылки на объект jQuery.

Первым параметром метода является URL-адрес, который будет вызываться в фоновом режиме для получения содержимого со стороны сервера. Второй параметр имеет формат JSON и позволяет указывать значения для некоторых различных параметров, поддерживаемых методом .

В большинстве случаев вам нужно будет указывать функции обратного вызова (коллбеки) для успешного выполнения и для ошибок. Функция обратного вызова для успеха будет вызвана после успешного завершения вызова AJAX. Ответ, возвращенный сервером, будет передан коллбеку для успеха. С другой стороны, коллбек для ошибки будет вызван, если что-то пойдет не так, и возникла проблема при выполнении вызова AJAX.

Итак, как вы можете видеть, AJAX-операции легко выполнять с помощью библиотеки jQuery. Фактически, процесс более или менее одинаков, независимо от библиотеки JavaScript, с которой вы решаете выполнять вызовы AJAX.

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

Х — это JSON

Термин AJAX был придуман в 2005 году для описания метода извлечения данных с сервера без необходимости обновления страницы. Тогда данные, передаваемые сервером были, как правило, в формате XML, но в наши дни большинство современных приложений использует JSON в качестве формата для данных с сервера.

JSON является строковым представлением данных; он выглядит как обычный объект JavaScript, но может быть использован только для представления подмножества данных, из которых состоит обычный объект JavaScript. Например, JSON не может представлять функции или объекты

Вот пример строки JSON, обратите внимание, что все свойства в кавычках:

Важно помнить, что JSON является строковым представлением объекта — перед работой строка должна быть преобразована в действительный объект JavaScript. Когда вы работаете с ответом JSON в XHR, то jQuery заботится об этой задаче за вас, но важно понимать разницу между JSON-представлением объекта и самим объектом

Если вам требуется создать строку JSON из объекта JavaScript или разобрать её за пределами jQuery, современные браузеры предлагают методы JSON.stringify() и JSON.parse(). Их функциональность может быть добавлена в старые браузеры с помощью библиотеки json2.js. jQuery также предлагает метод jQuery.parseJSON, который обеспечивает такую же функциональность как JSON.parse() во всех браузерах. Однако в jQuery нет методов соответствующих JSON.stringify().

Ajax-запросы функциями GET и POST

Эти функции осуществляют отправку ajax запроса http-методами get и post. Приведу пару примеров их использования.

$.get(
  '<url-адрес>',          // адрес отправки запроса
  {par1:val1, par2:val2, ...},  // передача с запросом каких-нибудь данных
  function(data) {              
    // какие-то действия с полученными от сервера данными data
  }
);

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

Тип получаемых от сервера данных можно указать, добавив dataType (см.ниже) — по-умолчанию определяется автоматически.

Использование post аналогично, но в следующем примере использую вызов функции после получения ответа от сервера.

$.post(
  '<url-адрес>',
  {par1:val1, par2:val2, ...},
  onSuccess
);

function onSuccess(data) {
  // какие-то действия с полученными от сервера данными data
}

На самом деле, функции get и post являются сокращенными вариантами функции ajax, которую рассмотрю ниже.

Обработчики событий

Настройки beforeSend, error, dataFilter, success and complete позволяют установить обработчики событий, которые происходят в определенные моменты выполнения каждого ajax-запроса.

beforeSend происходит непосредственно перед отправкой запроса на сервер;
error происходит в случае неудачного выполнения запроса;
dataFilter происходит в момент прибытия данных с сервера. Позволяет обработать «сырые» данные, присланные сервером;
success происходит в случае удачного завершения запроса;
complete происходит в случае любого завершения запроса.

Пример простого использования. Выведем сообщение при удачном выполнении запроса:

$.ajax({
  url: 'ajax/test.html',
  success: function(){
    alert('Данные успешно отправлены.');
  }
});

Внимание! Рассмотренные выше настройки .success(), .error() и .complete() были добавлены в jQuery-1.5 помимо стандартных для объекта deferred методов .done(), .fail() и .then(), с помощью которых можно устанавливать обработчики, однако начиная с jQuery-1.8 эти три метода станут нежелательными для использования

Виды методов jQuery для выполнения AJAX-запросов

В следующей таблице перечислены все AJAX-методы. доступные в библиотеке jQuery, причем, если в первой колонке вы видите ссылку на метод, то на сайте есть статья, которая ему посвящена:

Метод	Описание
	Выполняет асинхронный AJAX-запрос
$.ajaxPrefilter()	Обработка пользовательских Ajax -параметров или изменение существующих параметров перед отправкой каждого запроса и до того, как они будут обработаны методом
$.ajaxSetup()	Устанавливает значения по умолчанию для будущих AJAX-запросов
$.ajaxTransport()	Создает объект, который обрабатывает фактическую передачу данных Ajax
$.get()	Загружает данные с сервера с помощью AJAX-запроса методом GET
$.getJSON()	Загружает данные в кодировке JSON с сервера с помощью HTTP-запроса GET.
$.parseJSON()	Принимает правильно сформированную строку JSON и возвращает полученное значение JavaScript. Не рекомендуется в версии 3.0, используйте вместо этого метод JSON.parse().
$.getScript()	Загружает (и выполняет) JavaScript с сервера с помощью AJAX и GET-запроса
$.param()	Создает сериализованное представление массива или объекта (может использоваться как строка запроса URL для запросов AJAX)
$.post()	Загружает данные с сервера с помощью HTTP POST-запроса
ajaxComplete()	Задает функцию, запускаемую после завершения AJAX-запроса
ajaxError()	Задает функцию, запускаемую, когда AJAX-запрос завершается с ошибкой
ajaxSend()	Задает функцию, запускаемую перед отправкой AJAX-запроса
ajaxStart()	Задает функцию, запускаемую при первом AJAX-запросе
ajaxStop()	Определяет функцию, запускаемую, когда все запросы AJAX завершены
ajaxSuccess()	Задает функцию, запускаемую при успешном завершении AJAX-запроса
load()	Загружает данные с сервера и помещает возвращенные данные в выбранный элемент
	Кодирует набор элементов формы как строку для отправки данных в виде пар «имя1=значение1&имя2=значение2»
serializeArray()	Кодирует набор элементов формы как массив имен и значений

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

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

Чтобы лучше понимать как пользоваться jQuery Ajax, давайте рассмотрим несколько популярных примернов использования этой технологии.

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

Пожалуй самый популярный способ связи клиента с менеджером сайта, это контактная форма. Однако каждый раз перезагружать страницу после отправки формы — утомительно. Вот тут нам как раз и поможет jQuery Ajax. И так возьмём простую форму:

Как видите всё работает как надо, форма отправляет данные по Ajax без перезагрузки страницы.

Подгрузка элементов на страницу

Частой задачей с использованием ajax является подгрузка элементов на страницу или бесконечный скролл. Давайте рассмотрим простой пример реализации такого функционала. Возьмём простой «Список товаров»:

Как прочитать данные в формате JSON с помощью jQuery

4.1 Показать товары на странице при загрузке

В папке products откройте файл read-products.js

Следующий код вызовет метод showProducts() при первой загрузке веб-страницы.

Функция showProducts() покажет список продуктов в виде HTML-таблицы. Поместите следующий код в файл read-products.js.

4.2 Показать товары при клике на кнопку

Следующий код вызовет метод showProducts() при нажатии кнопки с классом кнопки read-products-button.

Кнопку можно найти в HTML-шаблонах «Создать товар и «Обновить товар. Мы увидим это в следующих разделах.

Поместите следующий код под showProducts(); предыдущего раздела.

4.3 Создание функции showProducts()

Теперь мы создадим метод showProducts(). Замените комментарий // здесь будет метод showProducts() в файле read-products.js следующим кодом.

4.4 Получение списка товаров

Следующий код свяжется с нашим API, чтобы получить список продуктов в формате JSON. Поместите следующий код после открывающей фигурной скобки предыдущего раздела.

4.5 Создание кнопки «Добавить товар»

Мы должны добавить кнопку «Создать продукт» в списке товаров. Мы заставим эту кнопку работать позже в этом руководстве.

Поместите следующий код после открывающей фигурной скобки предыдущего раздела.

4.6 Создание HTML-таблицы

Мы должны начать строить HTML-таблицу, в которой появится список продуктов.

Следующий код создаст HTML-таблицу с ее заголовком. Разместите его после кода предыдущего раздела.

4.7 Построение строки таблицы для каждой записи

Мы пройдемся по каждой записи, возвращаемой API. Для каждой записи мы создадим строку таблицы.

Помимо данных о товаре, строка таблицы также будет иметь кнопки «Действие». К ним относятся кнопки «Просмотр», «Редактировать» и «Удалить».

Замените комментарий // здесь будут строки следующим кодом.

4.8 Вставка контента на страницу

Мы должны сделать так, чтобы HTML-таблица появилась на нашей веб-странице. Мы сделаем это, выводя таблицу в div page-content.

Поместите следующий код после закрывающего тега table

4.9 Изменение заголовка страницы

Следующий код изменит «заголовок» на веб-странице и «заголовок» на вкладке браузера.

Поместите следующий код после кода предыдущего раздела.

Data attributes API

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

Атрибут	Описание
data-request	имя AJAX обработчика.
data-request-confirm	сообщение с подтверждением. Окно показывается до того, как запрос будет отправлен. Если пользователь нажмет «Отмена», то запрос не будет отправлен.
data-request-redirect	после того, как запрос будет успешно отправлен, пользователь перейдет на эту страницу.
data-request-update	список фрагментов и элементов страницы, которые нужно обновить. Пример: . — добавить результат перед содержимым элемента, — после.
data-request-data	дополнительные параметры для передачи. Формат записи: .
data-request-before-update	JavaScript код, который необходимо выполнить до обновления содержимого элемента. Доступные переменные: , , , ,.
data-request-success	JavaScript код, который необходимо выполнить после того, как запрос будет успешно завершен. Доступные переменные: , , , , .
data-request-error	JavaScript код, который выполняется при возникновении ошибки. Доступные переменные: , , , .
data-request-complete	JavaScript код, который выполняется после окончания запроса. Доступные переменные: , , , .
data-request-loading	CSS селектор элемента, который будет показан во время выполнения запроса. Вы можете использовать эту опцию для отображения индикатора загрузки. Эта функция использует jQuery функции и для управления видимостью элемента.
data-track-input	применяется для тега типа или и вызывает обработчик при изменении значения пользователем. Имеет необязательный параметр — время до отправления запроса (в миллисекундах).

Атрибут можно использовать в:

Элемент	Событие
Формы	при отправке.
Ссылки, кнопки	при нажатии.
Поля типа , и	когда изменяется значение и добавлен атрибут .
Select, checkboxes, radios	когда выбран один из элементов.

Примеры Data Attributes API

Использование обработчика при отправке формы и обновлением элемента, имеющего идентификатор , фрагментом calcresult:

Вызов окна с подтверждением запроса:

Перенаправление на другую страницу после успешного запроса:

Вызов окна после успешного запроса:

Отправка параметра со значением :

jqXHR

$.ajax() (и связанные с ним удобные методы) возвращает объект jqXHR (jQuery XML HTTP Request), который содержит множество мощных методов. Мы можем сделать запрос через $.ajax(), а затем передать возвращаемый объект jqXHR в переменную.

Мы можем использовать этот объект, чтобы к запросу прикрепить функции обработчика, даже после завершения запроса. Например, мы можем использовать метод .then() объекта jqXHR, чтобы привязать функции успеха и ошибки. Метод .then() принимает одну или две функции в качестве аргументов — первая функция будет вызываться если запрос успешен, вторая если запрос не удался.

Мы можем вызывать .then() в запросе сколько угодно раз, они обслуживаются по очереди.

Если мы не хотим прикреплять функции успеха и ошибки одновременно, то можем использовать методы .done() и .fail() для объекта запроса.

Если мы хотим прикрепить функцию обработчика, которая выполняется при успехе или неудаче, то можем использовать метод .always() для объекта запроса.

Настройка REST API

В этом руководстве мы будем использовать REST API, созданный на PHP.

Но если у вас уже есть собственный REST API, который будет работать с этим руководством, это тоже хорошо.

В моем случае, один из примеров, где я могу получить доступ к REST API.

По этой ссылке будет показан список продуктов из базы данных в формате JSON. Похоже на следующий скриншот.

Данные выше будут использованы нашим AJAX приложением. Список товаров будет отображаться в Bootstrap таблице с помощью кнопок «Просмотр», «Редактировать» и «Удалить». Вы увидите это в разделе данного урока «Как читать данные JSON с помощью jQuery AJAX?».

Чтобы сделать JSON-данные читаемыми в браузере Chrome, можете использовать расширение JSONView

$.ajax

Мы можем использовать метод $.ajax() несколькими путями: можем передать объект конфигурации в качестве единственного аргумента или можем передать адрес и необязательный объект конфигурации. Давайте посмотрим в первом приближении:

Конечно, вы можете быть менее многословны, просто передавая литеральный объект в метод $.ajax() и применяя анонимные функции для success и error. Такая версия проще для написания и её, вероятно, проще поддерживать:

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

В этой версии обязателен только адрес, но объект конфигурации позволяет нам сказать jQuery какие данные мы хотим передать, какой использовать метод HTTP (GET, POST и др.), какие данные мы ожидаем получить, как реагировать когда запрос успешен или нет и многое другое.

Смотрите по $.ajax() для получения полного списка параметров конфигурации.

Запрос html-данных с помощью функции Load

Это самый простой ajax-запрос через jQuery с получением html-данных и их вставкой в dom-элемент с id=»result» (содержимое элемента заменяется):

$('#result').load('<url-адрес>');

Более продвинутый вариант использования load:

$('#result').load('<url-адрес>', {par1:val1, par2:val2, ...}, function(response, status, xhr) {
  if (status == 'success') {
    alert('Готово');
  } else {
    alert('Ошибка: ' + xhr.status + ' ' + xhr.statusText);
  }
});

В этом примере серверу так же передаются параметры, а после получения ответа проверяется не было ли ошибки (например, ответ от сервера не был получен) и выполнение различных действий.

Что такое AJAX?

AJAX расшифровывается как асинхронный JavaScript и XML и позволяет асинхронно извлекать контент с внутреннего сервера без обновления страницы. Таким образом, он позволяет обновлять содержимое веб-страницы без перезагрузки.

Давайте рассмотрим пример, чтобы понять, как вы можете использовать AJAX в повседневной разработке приложений. Скажем, вы хотите создать страницу, которая отображает информацию профиля пользователя, с различными разделами, такими как личная информация, социальная информация, уведомления, сообщения и так далее.

С другой стороны, вы также можете использовать AJAX для создания интерфейса, который загружает всю информацию без обновления страницы. В этом случае вы можете отобразить разные вкладки для всех разделов, и, нажав на вкладку, он извлекает соответствующее содержимое с внутреннего сервера и обновляет страницу, не обновляя браузер. Это поможет вам улучшить общее восприятие конечного пользователя.

Общий вызов AJAX работает примерно так:

Давайте быстро пройдемся по обычному потоку AJAX:

Сначала пользователь, как обычно, открывает веб-страницу синхронным запросом.
Затем пользователь нажимает на элемент DOM — обычно кнопку или ссылку — который инициирует асинхронный запрос к серверу. Конечный пользователь не заметит этого, поскольку вызов выполняется асинхронно и не обновляет браузер. Однако вы можете распознать эти AJAX-вызовы с помощью такого инструмента, как Firebug.
В ответ на запрос AJAX сервер может вернуть данные строки XML, JSON или HTML.
Данные ответа анализируются с использованием JavaScript.
Наконец, проанализированные данные обновляются в DOM веб-страницы.

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

В следующем разделе мы расскажем, как реализовать AJAX с использованием ванильного JavaScript.

Что я могу сделать с помощью AJAX ?

Смысл AJAX — в интерактивности и быстром времени отклика.

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

Например, дерево, узлы которого подгружаются по мере раскрытия.

Например, при редактировании статьи — каждые 10 минут результаты автосохраняются на сервере.

Самый типичный пример — чат. В окошко постоянно поступают все новые сообщения, непрерывно подгружаемые с сервера. И, опять же, через AJAX, без перезагрузки страницы, пользователь может
отсылать сообщения на сервер.

Существуют другие предложения подобного рода, например, отображающие биржевые котировки в реальном времени.

JavaScript API

JavaScript API является более мощным инструментом, чем Data Attributes API. Метод может использоваться с любым элементом внутри формы или с самой формой.

Метод имеет один обязательный параметр — имя обработчика. Пример:

Второй параметр метода — объект с настройками. Вы можете использовать любые настройки и методы, которые совместимы с jQuery AJAX function. Следующие параметры используются Октябрем:

Параметр	Описание
update	объект со списком фрагментов и элементов страницы для обновления: {‘partial’: ‘#select’, ‘partial2’: ‘@#select2’, ‘partial3’: ‘^#select3’}. — добавить результат перед содержимым элемента, — после.
confirm	объект со списком фрагментов и элементов страницы для обновления: {‘partial’: ‘#select’, ‘partial2’: ‘@#select2’, ‘partial3’: ‘^#select3’}. — добавить результат перед содержимым элемента, — после.
data	необязательный параметр. Объект с дополнительной информацией, который будет отправлен на сервер: {var: ‘value’}.
redirect	адрес, на который будет перенаправлен пользователь после успешного запроса.
beforeUpdate	callback функция, которая выполнится перед тем, как элемент страницы будет обновлен. Принимает три параметра: , , . Переменная является объектом и имеет два свойства: и .
success	callback функция, которая выполняется в случае успешного запроса. Она перекрывает функцию фреймворка, а элемент страницы не обновляется. Также не вызываются следующие события: , , . Функция принимает три параметра: , и . Однако, Вы можете обновить элемент, вызвав .
error	callback функция, которая выполняется в случае ошибки. По умолчанию показывается окно с ошибкой. Функция принимает три параметра: , и — см. jQuery AJAX function.
complete	callback функция, которая выполняется в случае успешного запроса или ошибки.