Javascript

Введение

Нужно подключить jQuery, чтобы начать использовать AJAX фреймворк. После чего необходимо вставить тег на страницу или в шаблон. Он добавит необходимые JS и CSS файлы. Пример:

Тег имеет необязательный параметр extras, который добавляет индикатор загрузки (отображается вверху страницы).

Как работает AJAX

Вы можете использовать AJAX на любой странице при помощи Data Attributes или JavaScript. Каждый запрос вызывает обработчик событий на сервере и может обновлять элементы страницы при помощи фрагментов. AJAX запросы работают лучше всего с формами, так как данные формы автоматически отправляется на сервер. Последовательность выполнения AJAX запроса:

  1. Клиент создает AJAX запрос, передав имя обработчика и, при необходимости, дополнительные параметры серверу.
  2. Сервер находит обработчик с таким именем и выполняет его.
  3. Обработчик выполняет необходимую бизнес-логику и возвращает результат в переменную страницы, которая выводится в фрагменте при помощи Twig тега.
  4. Сервер подготавливает обновленный фрагмент, который указан в параметре .
  5. Сервер отправляет ответ с содержимым фрагмента.
  6. Framework заменяет элемент страницы ответом сервера.

Ниже приведен пример калькулятора, который использует Data Attributes API. При отправке формы вызывается обработчик , код которого находится ниже. Результат расчета выводится в элементе #result при помощью фрагмента calcresult.

Содержимое фрагмента calcresult:

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

Элементы интерфейса

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

Сейчас – в порядке вещей, что такие действия на сайтах осуществляются без перезагрузки страницы.

Динамическая подгрузка данных

Например, дерево, которое при раскрытии узла запрашивает данные у сервера.

Живой поиск

Живой поиск – классический пример использования AJAX, взятый на вооружение современными поисковыми системами.

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

Код, который это обеспечивает, работает следующим образом.

  1. Код активируется примерно при каждом нажатии клавиши, но не чаще чем раз в 100 мс (примерно).

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

Обычно используются форматы:

  • JSON – для отправки и получения структурированных данных, объектов.
  • XML – если сервер почему-то работает в формате XML, то можно использовать и его, есть средства.
  • HTML/текст – можно и просто загрузить с сервера код HTML или текст для показа на странице.
  • Бинарные данные, файлы – гораздо реже, в современных браузерах есть удобные средства для них.

Включаем кэширование для AJAX запросов

По умолчанию все AJAX запросы НЕ кэшируются браузером для этого PHP устанавливает специальные заголовки функцией nocache_headers().

Чаще всего AJAX запросы кэшировать и не надо, потому что они должны возвращать свежие данные, но бывают случаи когда такое кэширование может сэкономить ресурсы и увеличить скорость работы скрипта. Например, если у нас есть сложный фильтр товаров который юзеры используют постоянно. Тут было бы разумно кэшировать все результаты фильтра например на пару часов, все равно товары не добавляются с такой скоростью…

Как включить кэширование для указанных AJAX запросов смотрите во втором примере функции nocache_headers().

AJAX-подгрузка узлов с сервера

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

...

function load(node) {

	/*
	  код этих трех функций - 
      как в статье по интеграции AJAX в интерфейсы 
    */ 
	function onSuccess(data) {... }
	function onAjaxError(xhr, status) {... }
	function onLoadError(error) { ...}

    /*
	  функция showLoading использует способ 
      AJAX-индикации через CSS из этой же статьи.
    */
	function showLoading(on) {
		var expand = node.getElementsByTagName('DIV')
		expand.className = on ? 'ExpandLoading' : 'Expand'
	}

	function onLoaded(data) {

		for(var i=0; i'
			if (child.isFolder) {
				li.innerHTML += '


}
node.getElementsByTagName(‘UL’).appendChild(li)
}

node.isLoaded = true
toggleNode(node)
}

showLoading(true)

$.ajax({
url: url,
data: node.id,
dataType: «json»,
success: onSuccess,
error: onAjaxError,
cache: false
})
}

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

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

Оригинальная функция здесь, пожалуй, всего одна — это . Она принимает данные с сервера в виде массива объектов-детей:

Из этих объектов создается DOM-структура дерева.

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

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 функция, которая выполняется в случае успешного запроса или ошибки.

Примеры JavaScript API

Подтверждение запроса:

Вызов обработчика и обновление элемента страницы result с фрагментом calcresult:

Вызов обработчика с дополнительной информацией:

Вызов обработчика и выполнение некоторой функции перед обновлением элемента:

Вызов обработчика . При успешном результате происходит выполнение некоторой функции и обновление элемента страницы:

Выполнение запроса без использования формы:

Вызов обработчика . При успешном результате происходит выполнение некоторой функции после вызова функции :

Usage

Leiningen/Boot:

The client provides an easy way to send Ajax requests to the server using , , and functions. It also provides a simple way using . All requests are asynchronous, accepting callback functions for response and error handling.

There are four formats currently supported for communicating with the server: , , and .
( will send parameters up using normal form submission and return the raw text. does the same, but on the JVM it returns the body’s and doesn’t close it.)

For advice on how to set up the server side in Clojure to work with , please see the page on handling responses on the server.

Плюсы и минусы использования AJAX для формирования страниц

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

Плюсы использования:

  • Экономичность. Ввиду того, что при запросе AJAX-страницы серверу нет необходимости заново «перегружать» весь контент и повторно генерировать всю страницу, а только часть ее (ту, которая изменяется/подгружается AJAX-скриптом), происходит значительная экономия web-трафика и снижается количество запросов-обращений на сервер.
  • Снижение серверной нагрузки. Данное преимущество вытекает из первого, когда за счет снижения количества запросов, посылаемых на сервер, снижается и нагрузка. Это особенно актуально на крупных сайтах, где количество генерируемых запросов пользователями может стать серьезной проблемой, ставящей под угрозу работоспособность.
  • Ускорение загрузки страницы. Отсутствие необходимости в перезагрузке страницы, позволяет добиться того, что конечный пользователь, значительно быстрее увидит результат своего взаимодействия с интернет-ресурсом.

В то же время AJAX может в буквальном смысле «похоронить» всю работу SEO-специалиста при некорректном использовании. Поэтому  о минусах использования данной технологии говорят обычно именно оптимизаторы.

Минусы использования:

  • Страницы сайта не индексируются поисковыми системами. Это одна из основных проблем использования AJAX. Особенно она актуальна, если принимается решение о реализации динамической подгрузки содержимого на уже оптимизированных сайтах. Некорректное использование может привести к тому, что проиндексированные страницы, которые и создают трафик, просто исчезнут из результатов поиска.
  • Искажение данных статистики. Так как поисковые системы перестают «видеть» AJAX-страницы, данные от счетчиков, установленных на них, передаются некорректно. Для крупных ресурсов, особенно работающих в нише e-commerce, это такая же большая потеря, как и исчезновение посадочных страниц из выдачи.

Из-за этих существенных минусов долгое время AJAX был неким «табу» среди оптимизаторов. Однако сегодня есть достаточно простое и логичное решение, которое может убрать негативный эффект от использования данной технологии и прийти к разумному компромиссу между SEO-специалистом, владельцем сайта, разработчиком и конечным пользователем. То есть, в полной мере использовать вышеперечисленные плюсы AJAXи избавиться от недостатков.

Защита: используем nonce и проверяем права

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

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

Существует два вида защиты, которые нужно использовать в AJAX запросах в большинстве случаев.

1. Код nonce (случайный код)

Nonce — это уникальная строка, которая создается и используется один раз — одноразовое число. Nonce проверка используется, когда нужно убедится, что запрос был послан с указанного «места».

В WordPress есть функции wp_create_nonce() и check_ajax_referer() — это базовые функции для создания и последующей проверки nonce кода. С их помощью мы и будем создавать защиту nonce для AJAX запросов.

Для начала создадим nonce код:

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

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

}

twentyfifteen-script это название основного скрипта темы (см. выше), который подключается на сайте с помощью wp_enqueue_script().

Затем, в AJAX запросе добавим переменную с кодом :

var ajaxdata = {
	action     : 'myajax-submit',
	nonce_code : myajax.nonce
};
jQuery.post( myajax.url, ajaxdata, function( response ) {
	alert( response );
});

Теперь, в обработке заброса необходимо проверить код:

add_action( 'wp_ajax_nopriv_myajax-submit', 'myajax_submit' );
add_action( 'wp_ajax_myajax-submit', 'myajax_submit' );
function myajax_submit(){
	// проверяем nonce код, если проверка не пройдена прерываем обработку
	check_ajax_referer( 'myajax-nonce', 'nonce_code' );
	// или так
	if( ! wp_verify_nonce( $_POST, 'myajax-nonce' ) ) die( 'Stop!');

	// обрабатываем данные и возвращаем
	echo 'Возвращаемые данные';

	// не забываем завершать PHP
	wp_die();
}

работает на основе функции wp_verify_nonce() и по сути является её оберткой для AJAX запросов.

Обратите внимание, что в данном случае Nonce код создается в HTML коде. А это значит, что если у вас установлен плагин страничного кэширования, то этот код может и наверняка будет устаревать к моменту очередного AJAX запроса, потому что HTML код кэшируется..

2. Проверка прав доступа

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

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

add_action( 'wp_ajax_nopriv_myajax-submit', 'myajax_submit' );
add_action( 'wp_ajax_myajax-submit', 'myajax_submit' );
function myajax_submit(){
	// проверяем nonce код, если проверка не пройдена прерываем обработку
	check_ajax_referer( 'myajax-nonce', 'nonce_code' );

	// текущий пользователь не имеет права автора или выше
	if( ! current_user_can('publish_posts') )
		die('Этот запрос доступен пользователям с правом автора или выше.')

	// ОК. У юзера есть нужные права!

	// Делаем что нужно и выводим данные на экран, чтобы вернуть их скрипту

	// Не забываем выходить
	wp_die();
}

AJAX в админ-панели WordPress

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

#1. Добавляем javascript

Сначала добавляем на страницу админки javascript код, который будет посылать AJAX запрос.

<?php //add_action('admin_print_scripts', 'my_action_javascript'); // такое подключение будет работать не всегда
add_action('admin_print_footer_scripts', 'my_action_javascript', 99);
function my_action_javascript() {
	?><?php }
?>

С версии 2.8 javascript переменная ajaxurl определена глобально на всех страницах админки. Используйте её в js коде, как ссылку на файл обработчик AJAX запроса. Обычно это файл . В теме (шаблоне) эта переменная не определена. Чтобы использовать её во фронт-энде, её нужно определить самостоятельно. Как это сделать смотрите ниже.

#2. Создаем PHP функцию

Теперь, создадим PHP функцию, которая будет обрабатывать переданный AJAX запрос. Для этого добавляем следующий код в (можно в плагин):

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

	$whatever += 10;
	echo $whatever;

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

Тут мы цепляемся на хук — это динамический хук и выглядит он так: , где вместо вставляется значение переменной передаваемой в первом коде: = .

Вот и все.

Примера выше достаточно, чтобы начать использовать AJAX в админ-панели WordPress.

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

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

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

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

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

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

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

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

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

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

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

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

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, довольно типичен и выглядит так:

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

Серверный обработчик, к которому обращен 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 Example Explained

HTML Page

Let AJAX change this text

 
Change Content

The HTML page contains a

section and a .

The

section is used to display information from a server.

The calls a function (if it is clicked).

The function requests data from a web
server and displays it:

Function loadDoc()

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {   
if (this.readyState == 4 && this.status == 200) {    
document.getElementById(«demo»).innerHTML = this.responseText;   
}  };  xhttp.open(«GET», «ajax_info.txt», true); 
xhttp.send();
}

What is AJAX?

AJAX = Asynchronous JavaScript And
XML.

AJAX is not a programming language.

AJAX just uses a combination of:

  • A browser built-in object (to request data from a web server)
  • JavaScript and HTML DOM (to display or use the data)

AJAX is a misleading name. AJAX applications might use XML to transport data,
but it is equally common to transport data as plain text or JSON text.

AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes.
This means that it is possible to update parts of a web page, without reloading the whole page.

How AJAX Works

  • 1. An event occurs in a web page (the page is loaded, a button is clicked)
  • 2. An XMLHttpRequest object is created by JavaScript
  • 3. The XMLHttpRequest object sends a request to a web server
  • 4. The server processes the request
  • 5. The server sends a response back to the web page
  • 6. The response is read by JavaScript
  • 7. Proper action (like page update) is performed by JavaScript

❮ Previous
Next ❯

HOW TO

TabsDropdownsAccordionsSide NavigationTop NavigationModal BoxesProgress BarsParallaxLogin FormHTML IncludesGoogle MapsRange SlidersTooltipsSlideshowFilter ListSort List

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

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 обращенный в объект.

Добавляем AJAX запрос

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

  • – всегда используем компонент ;
  • – передаем имя модуля, в который мы делаем запрос. Важный момент – имя модуля должно быть без префикса ;
  • – указываем формат возвращаемых данных: , или .

Код AJAX запроса мы добавляем в конце точки входа модуля mod_latest_users.php:

Совет. Используйте в качестве возвращаемых данных формат . В таком случае использует класс JResponseJson, который очень удобен в плане обработки возвращенных данных. Подробнее об этом классе вы можете прочитать в материале JResponseJson – возвращаем данные в формате JSON.

Не забудьте добавить в языковые файлы константы:

en-GB

MOD_LATEST_USERS_NO_ARTICLES="This user does not have any articles."MOD_LATEST_USERS_ERROR_PROCESSING_REQUEST="There was an error processing request."

ru-RU

MOD_LATEST_USERS_NO_ARTICLES="У пользователя нет материалов."MOD_LATEST_USERS_ERROR_PROCESSING_REQUEST="Произошла ошибка в процессе запроса."
Ссылка на основную публикацию