Ajax-запрос к серверу через jquery

Содержание раздела:

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

6.1 Обработчик кнопки «Просмотр товара»

Кнопка «Просмотр товара» отображается в общем списке. При клике должны отображаться полные сведения о товаре.

Откройте файл read-one-product.js в папке app/products.

Добавьте следующий код.

6.2 Получение ID товара

Наш скрипт должен идентифицировать запись для чтения. Мы сделаем это путем получения идентификатора товара.

Вместо комментария // здесь будет получение ID товара внесите следующий код.

6.3 Чтение одной записи с API

Мы отправим ID товара в API. Он вернет данные на основе данного идентификатора.

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

6.4 Добавление кнопки «Все товары»

Нам нужна кнопка «Все товары» вернуться к списку всех товаров.

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

6.5 Показ полных данных о товаре в таблице

Мы будем выводить информацию о товаре, возвращаемую из API, в HTML таблицу.

Вставьте следующий код после кода предыдущего раздела.

6.6 Вывод таблицы «Просмотр товара» и изменение заголовка страницы

Мы должны сделать так, чтобы кнопка «Все товары» и таблица появлялись на нашей веб-странице. Изменим заголовок страницы.

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

AJAX во внешней части WordPress

Первое в чем нужно убедиться — установлена ли на сайте библиотека jQuery.

Во фронт-энде (внешней части сайта) нужно использовать еще один хук для обработки AJAX запросов: wp_ajax_nopriv_(action). Этот хук в отличии от wp_ajax_(action), срабатывает для неавторизованных пользователей.

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

add_action( 'wp_ajax_(action)', 'my_action_callback' );
add_action( 'wp_ajax_nopriv_(action)', 'my_action_callback' );

‘wp_ajax_nopriv_(action)’ можно не указывать, если не нужно, чтобы AJAX запрос обрабатывался для неавторизованных пользователей.

Переменная ajaxurl

Напомню, что переменная есть только в админке и её нет в лицевой части сайта (фронт-энде), поэтому её нужно определить (создать). Но мы назовем её по-другому — , для фронта так удобнее, потому что так в объект myajax можно будет добавить еще данные связанные с AJAX запросом.

Правильный способ создать такую переменную — это использовать функцию wp_localize_script().

// Подключаем локализацию в самом конце подключаемых к выводу скриптов, чтобы скрипт
// 'twentyfifteen-script', к которому мы подключаемся, точно был добавлен в очередь на вывод.
// Заметка: код можно вставить в любое место functions.php темы
add_action( 'wp_enqueue_scripts', 'myajax_data', 99 );
function myajax_data(){

	// Первый параметр 'twentyfifteen-script' означает, что код будет прикреплен к скрипту с ID 'twentyfifteen-script'
	// 'twentyfifteen-script' должен быть добавлен в очередь на вывод, иначе WP не поймет куда вставлять код локализации
	// Заметка: обычно этот код нужно добавлять в functions.php в том месте где подключаются скрипты, после указанного скрипта
	wp_localize_script( 'twentyfifteen-script', 'myajax', 
		array(
			'url' => admin_url('admin-ajax.php')
		)
	);  

}

В результате, получим в head части сайта прямо перед скриптом ‘twentyfifteen-script’:

<script type='text/javascript'>
/* <![CDATA[ */
var myajax = {"url":"http://wptest.ru/wp-admin/admin-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='http://wptest.ru/wp-content/themes/twentyfifteen/js/functions.js?ver=20150330'></script>

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

Пример AJAX кода для фронт энда

<?php

add_action( 'wp_enqueue_scripts', 'myajax_data', 99 );
function myajax_data(){

	wp_localize_script('twentyfifteen-script', 'myajax', 
		array(
			'url' => admin_url('admin-ajax.php')
		)
	);  

}

add_action('wp_footer', 'my_action_javascript', 99); // для фронта
function my_action_javascript() {
	?>
	<script type="text/javascript" >
	jQuery(document).ready(function($) {
		var data = {
			action: 'my_action',
			whatever: 1234
		};

		// 'ajaxurl' не определена во фронте, поэтому мы добавили её аналог с помощью wp_localize_script()
		jQuery.post( myajax.url, data, function(response) {
			alert('Получено с сервера: ' + response);
		});
	});
	</script>
	<?php
}

add_action('wp_ajax_my_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_action', 'my_action_callback');
function my_action_callback() {
	$whatever = intval( $_POST );

	echo $whatever + 10;

	// выход нужен для того, чтобы в ответе не было ничего лишнего, только то что возвращает функция
	wp_die();
}

Код рассчитан на тему . Вставлять код можно в functions.php темы.

Этот код будет работать для любой темы, единственное что для этого нужно — это поменять название основного скрипта темы , который подключается после jquery.

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

Изменение URL-адреса JSON

Чтобы сделать нумерацию страниц, нам нужно изменить URL-адрес JSON. Содержимое этих новых данных JSON будет включать узел «пагинации». Похоже на следующее.

Поэтому мы изменим URL JSON с:

На:

Это означает, что мы должны что-то изменить в нашем коде. Смотрите изменения в следующем разделе.

10.3 Добавим пагинацию HTML

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

Вам так же необходимо изменить URL домашней страницы из предыдущего руководства в соответствии с вашим URL.

Файл находится ваша_корневая_папка/api/config/core.php.

В моём случае я изменяю

На:

Порядок подключения и настройка дополнительных мониторов в Windows

Физическое соединение устройств

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

При создании двухмониторной конфигурации по возможности задействуйте одинаковые интерфейсы, например, только DisplayPort или только HDMI, чтобы качество изображения на двух экранах различалось не сильно. Если одинаковых портов на вашей видеокарте нет, подключайте через разные, например, DVI и HDMI или HDMI и VGA. Использовать переходники с одного интерфейса на другой допустимо лишь в крайних случаях, поскольку конвертация сигнала всегда сопровождается его потерями, иногда значительными. То же самое касается сплиттеров. Если есть возможность обойтись без них, старайтесь обходиться.

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

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

Мультидисплейные адаптеры

Если качество картинки на основном и дополнительных дисплеях сильно различается, а также, если вам нужно подключить к ноутбуку не один, а 2 добавочных монитора, выручит специализированное устройство — мультидисплейный адаптер. Это небольшая коробочка с процессором внутри, напоминающая многопортовый сплиттер, и несколько кабелей в комплекте. Одним кабелем коробочку соединяют с выходом видеокарты, остальные подключают ко входам мониторов. Питание она получает от USB-порта или внешнего адаптера.

Пример такого устройства — Matrox DualHead2Go Digital SE.

Настройка дополнительных экранов в Windows 10 и 8.1 и 7

После первого включения изображение на дополнительном мониторе, как правило, дублирует основной. Иногда рабочий стол растягивается сразу на 2 экрана. Для выбора нужного режима нажмите комбинацию клавиш Windows+P (латинская) — это откроет панель проецирования.

В Windows 10 и 8.1 она выглядит так:

В Windows 7 — так:

Опция «Дублировать» (Повторяющийся) воспроизводит одну и ту же картинку на всех дисплеях. «Расширить» — делает второй экран продолжением первого.

Если система не смогла автоматически распознать второй дисплей, откройте через контекстное меню рабочего стола «Параметры экрана».

Нажмите кнопку «Обнаружить» (В Windows 7 — «Найти»).

Если аппарат физически исправен и правильно подключен, система, скорее всего, сразу его распознает. Если нет, откройте список «Несколько дисплеев» и выберите «Пытаться в любом случае подключиться…» к монитору, который не определяется.

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

Кнопка «Определить» в этом же разделе позволяет выбрать, какой из двух дисплеев будет основным (первым), а какие — дополнительными (вторым, третьим и т. д.).

Чтобы изменить настройки одного из дисплеев многомониторной системы — размеры отображаемых элементов, уровень яркости, ориентацию, разрешение, цветопередачу и прочее, кликните по прямоугольнику с его порядковым номером на сером поле под заголовком «Настройте ваш экран».

Изменения вступят в силу после сохранения. Перезагружать компьютер для этого не нужно.

Дополнительные настройки конфигурации с несколькими дисплеями содержатся в меню панели управления NVIDIA и AMD Catalyst.

Настройка дополнительных экранов в Windows XP

Для доступа к параметрам экрана в Windows XP также откройте контекстное меню рабочего стола и кликните «Свойства». Следом перейдите на вкладку «Параметры».

Если второй монитор корректно распознан, на сером поле отобразятся 2 значка дисплея с порядковыми номерами. Опции «Найти», как в современных версиях Windows, здесь нет.

По умолчанию на оба экрана выводится одно и то же изображение рабочего стола. Если вы хотите его растянуть, кликните по значку второго дисплея и поставьте флажок «Расширить рабочий стол на этот монитор».

Настройка каждого экрана в отдельности выполняется так же, как в Windows 10: щелкаем по иконке монитора на сером поле и устанавливаем желаемые параметры. Опции «Разрешение экрана» и «Качество цветопередачи» находятся здесь же, а остальное — масштаб, свойства адаптера и т. д., скрыто за кнопкой «Дополнительно».

Основная часть параметров вступает в действие сразу, но некоторые — только после перезагрузки компьютера.

jqXHR

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

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

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

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

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

Напутствие по выбору

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

XMLHttpRequest, — это класс, для работы AJAX.

request – это переменная или константа в которой будет хранится, — экземпляр класса XMLHttpRequest, объект с набором методов.

url – это путь до файла на сервере, который будет обрабатывать наш запрос. В примерах с GET методом, в нем будут передаваться данные со стороны клиента.

.open() – это метод где мы задаем, первым параметром, — метод передачи данных, а вторым url.

.setRequestHeader() – это метод для указания передаваемых заголовков, здесь мы можем указать что данные идут в url либо закрытым способом, либо хотим получить данные от сервера в json формате.

.send() – это последний этап создания http запроса. С помощью него также можно передать тело запроса т.е. данные от браузера к серверу. Можно не чего не передавать или прямо указать null.

onreadystatechange – это событие которое случится когда нам придет ответ от сервера.

readyState – это метод экземпляра, который сообщает статус HTTP-запроса, вот возможные значения которые он может дать:

Значение	Описание
Метод open() не вызван
1	Метод open() вызван
2	Получены заголовки ответа
3	Получено тело ответа
4	Передача ответа выполнена

status или statusText – возвращают статус http заголовков, нам нужен ответ 200. Хотя бывают и 404 или 500.

.responseText – данные, которые придут от сервера в виде строки.

.response – данные вернуться в json формате, тут как бы мы преобразуем сразу в объект, и дальше работаем уже как с объектом.

.text() – используется в запросе fetch, возвращает строку.

.json() – используется в запросе fetch, возвращает json обращенный в объект.

Указание ожидаемого типа данных

При использовании методов get() и post() библиотеке jQuery приходится определять тип данных, получаемых от сервера в ответ на запрос. Данными может быть все что угодно, начиная от HTML-кода и заканчивая файлами JavaScript. Для определения типа данных библиотека jQuery использует содержащуюся в ответе информацию, и в частности — заголовок Content-Type. Как правило, этого вполне достаточно, но иногда jQuery приходится оказывать небольшую помощь. Обычно необходимость в этом возникает из-за указания сервером неверного MIME-типа в ответе.

Можно изменить информацию, поставляемую сервером, и сообщить jQuery, какой тип данных ожидается, передавая методам get() и post() дополнительную информацию. Аргумент может принимать одно из следующих значений:

• xml
• json
• jsonp
• script
• html
• text

В примере ниже показано, как задать ожидаемый тип данных для метода post():

Теперь, если вы удалите из серверного сценария строку, с явной установкой заголовка, пример все равно будет работать корректно:

Реальный пример AJAX с PHP

В этом разделе мы создадим пример, который извлекает контент JSON из файла PHP на стороне сервера, используя AJAX.

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

Файл index.php представляет собой довольно стандартную HTML-форму, которая содержит поля имени пользователя и пароля. Он также содержит фрагмент JavaScript jQuery, который следует схеме, которую мы видели выше.

Мы использовали событие элемента формы, которое будет срабатывать, когда пользователь нажимает кнопку отправки. В этом обработчике событий мы инициировали вызов AJAX, который отправляет данные формы в файл login.php, используя метод POST асинхронно. Получив ответ от сервера, мы анализируем его, используя метод объекта . И наконец, основываясь на успехе или неудаче, мы предпринимаем соответствующие действия.

Давайте также посмотрим, как выглядит login.php.

Файл login.php содержит логику аутентификации пользователей и возвращает ответ JSON, основанный на успешном или неудачном входе в систему.

jQuery синтаксис:

Синтаксис 1.0:
$( selector ).load( url, data, complete );

url - String
data - PlainObject, или String 
complete - Function( String responseText, String textStatus,  jqXHR jqXHR )

Метод .load() является самым простым способом для получения данных с сервера, он эквивалентен $.get( url, data, success ), за исключением того, что он является методом, а не глобальной функцией и имеет неявную функцию обратного вызова. При обнаружении успешного ответа от сервера (когда свойство textStatus имеет значение «success», или «notmodified»), метод .load() задает возвращаемые от сервера данные (HTML содержимое) соответствующему элементу, или элементам. Метод .load() имеет только один обязательный параметр, что делает его достаточно простым и удобным в использовании:

$( selector ).load( "url" );

Обратите внимание, что если ни один элемент в документе не соответствует заданному селектору, то AJAX запрос не будет отправлен

Метод запроса

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

Загрузка фрагмента страницы

Метод .load(), в отличии от функции $.get(), позволяет определить часть удаленного документа, который должен быть вставлен. Это достигается с помощью специального синтаксиса, используемого в параметре url:

$( selector ).load( "url selector" );

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

Библиотека jQuery использует свойство браузера .innerHTML для разбора полученного документа и вставки его в текущий документ. Во время этого процесса, браузеры часто фильтруют такие элементы как <html>, <title>, и <head>. Учтите, что в результате этого, отображение элементов, полученных с использованием метода .load() может отличаться от того, если документ был получен (открыт) непосредственно в браузере.

Выполнение cкриптов

Когда метод .load() используется для загрузки фрагмента страницы (в парметре url указан селектор), то в этом случае все скрипты (HTML тег <script>) удаляются из документа, даже если они расположены в этом фрагменте, в обратном случае скрипты будут выполнены до загрузки содержимого. Пример обоих случаев можно увидеть в конце страницы.

Как реализовать поиск данных с помощью 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 запроса (метод GET)

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

Для этого необходимо создать на сервере 2 файла в одном каталоге:

1. – HTML-страница, которая будет отображаться пользователю. В этой же страницы поместим
   скрипт, который будет осуществлять все необходимые действия для работы AJAX на стороне клиента.
2. – PHP-файл, который будет обрабатывать запрос на стороне сервера, и формировать ответ.
   Начнём разработку с создания основной структуры файла

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Пример работы AJAX</title>
</head>
<body>
  <h1>Пример работы AJAX</h1>
  <div id="welcome"></div>
  <script>
  // Здесь поместим код JavaScript, который будет отправлять запрос на сервер, получать его и обновлять содержимое страницы. Всё это будет работать без перезагрузки страницы

</script>
</body>
</html>  

Рассмотрим последовательность действий, которые необходимо выполнить на стороне клиента (в коде JavaScript):

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

2. Создадим переменную, которая будет содержать экземпляр объекта XHR (XMLHttpRequest).

3. Настроим запрос с помощью метода .

   Указываются следующие параметры:

   • Метод, с помощью которого будет посылаться запрос на сервер (GET, POST).
   • URL-адрес, который будет обрабатывать запрос на сервере.
   • Тип запроса: синхронный (false) или асинхронный (true).
   • Имя и пароль при необходимости.

4. Подпишемся на событие объекта XHR и укажем обработчик в виде анонимной или
   именованной функции. После этого создадим код внутри этой функции, который будет проверять состояние ответа, и
   выполнять определённые действия на странице. Ответ, который приходит с сервера, всегда находится в свойстве
   .

   Дополнительно с проверкой значения свойства числу 4, можно проверять и значение свойства
   . Данное свойство определяет статус запроса. Если оно равно 200, то всё . А
   иначе произошла ошибка (например, 404 – URL не найден).

5. Отправим запрос на сервер с помощью метода .

   Если используем для отправки запроса метод GET, то передавать данные в параметр данного метода не надо. Они
   передаются в составе URL.

   Если используем для отправки запроса метод POST, то данные необходимо передать в качестве параметра методу
   . Кроме этого, перед вызовом данного метода необходимо установить заголовок Content-Type, чтобы
   сервер знал в какой кодировке пришёл к нему запрос и смог его расшифровать.

Содержимое элемента :

// 2. Создание переменной request
var request = new XMLHttpRequest();
// 3. Настройка запроса
request.open('GET','processing.php',true);
// 4. Подписка на событие onreadystatechange и обработка его с помощью анонимной функции
request.addEventListener('readystatechange', function() {
  // если состояния запроса 4 и статус запроса 200 (OK)
  if ((request.readyState==4) && (request.status==200)) {
    // например, выведем объект XHR в консоль браузера
    console.log(request);
    // и ответ (текст), пришедший с сервера в окне alert
    console.log(request.responseText);
    // получить элемент c id = welcome
    var welcome = document.getElementById('welcome');
    // заменить содержимое элемента ответом, пришедшим с сервера
    welcome.innerHTML = request.responseText;
  }
}); 
// 5. Отправка запроса на сервер
request.send();

В итоге файл будет иметь следующий код:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Пример работы AJAX</title>
</head>
<body>
  <h1>Пример работы AJAX</h1>

  <div id="welcome"></div>

<script>
window.addEventListener("load",function() {
  var request = new XMLHttpRequest();
  request.open('GET','processing.php',true);
  request.addEventListener('readystatechange', function() {
    if ((request.readyState==4) && (request.status==200)) {
      var welcome = document.getElementById('welcome');
      welcome.innerHTML = request.responseText;
    }
  });
request.send();
});
</script>

</body>
</html>

На сервере (с помощью php):

1. Получим данные. Если данные посланы через метод , то из глобального массива
   . А если данные переданы с помощью метода , то из глобального
   массива .
2. Используя эти данные, выполним некоторые действия на сервере. В результате которых получим некоторый ответ.
   Выведем его с помощью .

<?php
$output = 'Здравствуйте, пользователь! ';
if ($_SERVER) {
  $output .= 'Ваш IP адрес: '. $_SERVER;
}
else {
 $output .= 'Ваш IP адрес неизвестен.';
}
echo $output;

Получение json-данных с помощью getJSON

getJSON — укороченный вариант ajax-запроса методом GET и получением данных в виде json. Способ удобен, например, для получения какого-то массива с данными и последующей работы с ним.

$.getJSON('<url-адрес>', {par1:val1, par2:val2, ...}).success(function(data) {
  // что-то делаем с данными, например, обходим их в цикле и выводим:
  for (var i=0; i<data.length; i++) {
    console.log(data.text);
  }
}).error(function(xhr, textStatus, errorThrown) {
  alert('Ошибка: ' + textStatus+' '+errorThrown);
});

На стороне сервера программа формирует массив и преобразовывает его в json-строку, например, так:

$arr = array();
$arr = array('id' => 10, 'text' => 'тестовая строка 1');
$arr = array('id' => 20, 'text' => 'тестовая строка 2');
$arr = array('id' => 30, 'text' => 'тестовая строка 3');
echo json_encode($arr);

Точно так же можно передать с сервера и объекты stdClass, преобразовав их в json-строку.

Что такое AJAX?

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

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

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

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

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

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

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

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

Более сложный пример ajax-запроса через jQuery

Пример выполнения запроса функцией ajax с передачей данных post методом и обработкой событий. Ниже опишу дополнительные параметры, которые чаще всего применяются.

$.ajax({
  url: '<url-адрес>',
  type: 'post',
  data: '<отправляемые_данные>', // можно строкой, а можно, например, так: $('input, input:checked, input:checked, select, textarea')
  dataType: 'json',
  beforeSend: function() {
    $('#sendajax').button('loading');
  },
  complete: function() {
    $('#sendajax').button('reset');
  },
  success: function(json) {
    // какие-то действия с полученными данными
  },
  error: function(xhr, ajaxOptions, thrownError) {
    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
  }
});

Кнопка отправки данных:

<button class="btn btn-primary" data-loading-text="Отправка..." id="sendajax" type="button">Отправить</button>

В приведенном примере при нажатии на кнопку button, сначала меняется состояние кнопки (текст на ней меняется на «Отправка…» и она становится не активной), что делается при помощи параметра beforeSend. Затем происходит отправка запроса с передачей нужных данных. После того, как получен ответ от сервера состояние кнопки возвращается в прежнее (текст меняется на «Отправить», становится активной). Ответ получается в виде json-данных.

Коротко опишу параметры отправки ajax-запроса, которые чаще всего могут пригодиться:

url	Адрес отправки ajax-запроса
type	Способ отправки запроса GET или POST
data	Отправляемые серверу данные. Может быть строка с параметрами и их значениями в формате par1=val1&par2=val2&…, объект jQuery, например, $(‘input’) или другие данные.
dataType	Тип получаемых от сервера данных. Может быть html, json, text, script и xml.
cache	Кэширование браузером запроса (false — не кэшировать).
async	Асинхронное выполнение запроса, т.е. программа продолжает выполняться не дожидаясь ответа сервера. Если указать false, то запрос будет выполнен синхронно, при этом страница не будет ни на что реагировать, пока не будет получен ответ от сервера.
processData	Преобразование отправляемых данных в url-формат. Если нужно чтобы данные не преобразовывались, установить в false. Например, при отправке изображения на сервер или xml-данных.
contentType	Тип передаваемых данных, по умолчанию «application/x-www-form-urlencoded; charset=utf-8». Если указать false, то в заголовке не будет передаваться тип, что может быть необходимо, например, при отправке изображения на сервер.
beforeSend	Функция, выполняемая перед отправкой ajax-запроса.
complete	Функция, выполняемая после получения ответа от сервера (любого, успешного или нет).
success	Функция, выполняемая при удачном выполнении запроса.
error	Функция, выполняемая в случае ошибки.

Ниже приведу еще несколько примеров использования ajax-запросов.

Метод jQuery.Ajax()

Это основной метод с которым вам придётся работать, остальные методы, такие как $.get() или $.post() являются лишь частным случаем метода $.ajax(). Давайте рассмотрим основные атрибуты и события метода:

Параметр	Описание параметра	Тип данных
async	Асинхронность запроса, по умолчанию true	логический
cache	Флаг кеширование данных браузером, по умолчанию true	логический
contentType	по умолчанию «application/x-www-form-urlencoded»	строка
data	передаваемые данные, могут быть представлены в виде объекта, например JavaScript {name: ‘Иван Иванов’, age: 25} 1 {name’Иван Иванов’,age25} или в виде строки: name=Иван&age=25 1 name=Иван&age=25	объект или строка
dataFilter	фильтр для входных данных (по сути callback функция позволяющая отфильтровать данные перед отправкой)	функция
dataType	тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default), чаще всего это json	строка
global	тригер — отвечает за использование глобальных событий Ajax, по умолчанию true	логический
ifModified	тригер — проверяет были ли изменения в ответе сервера, чтобы не отправлять запрос повторно, по умолчанию false	логический
type	GET либо POST	строка
url	url запрашиваемой страницы/скрипта	строка

Есть также ряд стандартных событий, на которые вы можете подвесить собственные обработчики:

Параметр	Описание параметра	Тип данных
beforeSend	callback функция вызываемая перед отправкой запроса (например можно запустить анимацию показывающую пользователю что запрос отправляется и/или заблокировать кнопку отправки, чтобы он не нажимал на неё несколько раз)	функция
success	callback функция вызываемая в случае успешной отправки данные и получения ответа с сервера	функция
error	вызывается в случае ошибки HTTP запроса	функция
complete	срабатывает после завершения запроса (т.е. после success или error)	функция

Рассмотрим самый базовый пример работы jQuery Ajax:

Запрашиваем информацию о погоде

JavaScript

$.ajax({
url: ‘/ajax.php’, //Адрес страницы или скрипта
type: ‘GET’, // HTTP метод
data: { action: ‘get_weather’ }, // Данные для отправки (в данном случае в видео объекта)
success: function (data, status, xhr) { //callback на случай успешного выполнения запроса
$(‘.result’).append(data); //Показываем результат на странице
}
});

1 2 3 4 5 6 7 8

$.ajax({ url’/ajax.php’,//Адрес страницы или скрипта type’GET’,// HTTP метод data{action’get_weather’},// Данные для отправки (в данном случае в видео объекта) successfunction(data,status,xhr){//callback на случай успешного выполнения запроса $(‘.result’).append(data);//Показываем результат на странице } });

В приведённом выше скрипте, мы будем запрашивать информацию о погоде обращаясь к скрипту /ajax.php методом GET. Чтобы ajax.php «понял» что мы от него хотим, мы передаём объект с командой { action: ‘get_weather’ } т.е. «Действие = получить погоду». После успешного выполнения запроса полученный результат (условимся, что это будет строка) добавляем на страницу в блок с классом result.

Работа данного примера может выглядеть так:

Давайте рассмотрим другие методы jQuery для работы с Ajax запросами.

Заключение

Теперь, когда вы познакомились со всеми основными методами Ajax с использованием jQuery, легко убедиться, что библиотека Ajax jQuery повышает качество разработки, значительно упрощая ее, требуя меньше кода и обеспечивая дополнительные возможности контроля.
Эти усовершенствования составляют основу для быстрого создания сложных Ajax-приложений без написания длинного кода или продления сроков разработки.
Примеры из этой статьи демонстрируют, как с использованием jQuery можно легко и быстро создавать сложные Ajax-взаимодействия в самые короткие сроки – даже работая с несколькими языками программирования.

Похожие темы

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

Вывод данных о запросе в Инструментах разработчика в браузере

Вы можете посмотреть, какой именно запрос вы отправляли с помощью AJAX, какие данные были отправлены на сервер, и какой ответ был получен. Для этого откройте Инструменты разработчика, например, в браузере Chrome, нажав клавишу F12. Затем щелкните на вкладке Network (Сеть) и выделите тот php-файл, на который вы отправляли данные.

При успешной отправке данных, вы увидите рядом, что статус вашего запроса 200, т.е. все ОК.

В браузере Mozilla Firefox вы получите аналогичный результат, перейдя на вкладку Сеть и нажав на заголовок POST.

В Chrome в блоке Headers (Заголовки), прокрутив вниз, вы увидите, что запрос был отправлен через XMLHttpRequest и на вкладке FormData (данные формы) можете отследить, какие переменные и с какими значениями были переданы на сервер из вашего html-файла.

На вкладке view source вы увидите закодированную информацию, которая заключается в преобразовании кириллических и специальных символов в цифровой код в UTF-8 со знаком % и выглядит примерно так:

Информация на вкладке view source

name=%D0%98%D0%B3%D0%BE%D1%80%D1%8C&phone=(099)+333-4445

1	name=%D0%98%D0%B3%D0%BE%D1%80%D1%8C&phone=(099)+333-4445

В Firefox вы отдельно можете посмотреть на заголовки, отдельно — на переданные данные на вкладке Параметры. Рядом с ней будет находится вкладка Ответ, на которой будет виден текст ответа сервера.

В Firefox сразу видно, сколько времени занял запрос и ответ. Для получения более подробной информации можно открыть вкладку Тайминг.

Аналогичные данные вы получите и в консоли браузера Chrome, переключаясь между вкладками Response (Ответ) и Timing (Тайминг):

Просмотров:
954