Ajax-запрос в jquery

Содержание:

Создание асинхронного AJAX запроса (метод GET)
2 AJAX POST Example, the jQuery way
- 2.1 Server side code for our AJAX form
Влияние AJAX на ранжирование
Description
Страница сервера AJAX
Делаем запрос GET с помощью $.get()
Делаем запрос POST с помощью метода $.post()
AJAX в действии[править]
Подключение jQuery 3-й версии
AJAX во внешней части WordPress
- Переменная ajaxurl
  - Пример AJAX кода для фронт энда
Элементы кода, которые будут использованы в примерах.
Расширенный подход
- Prefilters
- Converters
xmlHttpRequest
Защита: используем nonce и проверяем права
- - 1. Код nonce (случайный код)
  - 2. Проверка прав доступа
Загрузка части страницы

Создание асинхронного AJAX запроса (метод GET)

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

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

– HTML-страница, которая будет отображаться пользователю. В этой же страницы поместим
скрипт, который будет осуществлять все необходимые действия для работы AJAX на стороне клиента.
– 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):

Подготовим данные, необходимые для выполнения запроса на сервере. Если для выполнения запроса на сервере данные
никакие не нужны, то данный этап можно пропустить.
Создадим переменную, которая будет содержать экземпляр объекта XHR (XMLHttpRequest).
Настроим запрос с помощью метода .

Указываются следующие параметры:
- Метод, с помощью которого будет посылаться запрос на сервер (GET, POST).
- URL-адрес, который будет обрабатывать запрос на сервере.
- Тип запроса: синхронный (false) или асинхронный (true).
- Имя и пароль при необходимости.
Подпишемся на событие объекта XHR и укажем обработчик в виде анонимной или
именованной функции. После этого создадим код внутри этой функции, который будет проверять состояние ответа, и
выполнять определённые действия на странице. Ответ, который приходит с сервера, всегда находится в свойстве
.

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

Если используем для отправки запроса метод 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):

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

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

2 AJAX POST Example, the jQuery way

So let’s get our hands dirty. Here’s our HTML5 and jQuery:

Let’s break down the not-so-clear parts of the method. The setting controls how data we receive from the server is treated. So if we want JSON from the server to be treated as text in our Javascript on the client side, for example, then we set this value as . If we don’t set the value at all, jQuery will try to figure out what the server sent and convert it intelligently. If it thinks it’s JSON, it’ll turn it into a JavaScript object; if it thinks it XML it’ll turn it into a native XMLDocument JavaScript object, and so on.

Next up is , which is the HTTP verb that we want to use. I’ll let you in on a little secret: since jQuery 1.9.0, you can use instead of . It could make things a little bit clearer for newcomers.

Following is . This is where understanding how HTTP requests and responses work helps a lot. What we set here gets sent as part of the HTTP header field . That’s important to note because we’re letting the server know ahead of time what type of content we’re sending, which allows the server to interpret the response correctly. For example, if you see a of you would know to process the content as JSON in your server-side code — it’s as simple as that.

Now, the setting is the data we’re going to send to the server. We can send data to the server in a variety of different formats, but the default is . That means we’ll be sending text to our server with our form data formatted in key-value pairs, like . Most, if not all, web server languages will pick up the key-value pairs and separate them for you either natively or through the use of libraries or frameworks.

Here’s how to do that in a few different languages:

Ruby with Sinatra
Python with web.py
Node.JS with Express and body-parser middleware

Most POST requests from a form will use the content type. I’ll also provide an alternative if you need to POST actual JSON from jQuery — if, for instance, you need to make a call to your own RESTful API.

The method has several events we can hook into to handle our AJAX responses accordingly: , , , and . The ones we care about most are and , so we’ll use these in our example.

One important thing to note is that the data parameter for the function will be dependent on the setting. So it’s completely possible to treat JSON coming from the server as a string by setting to . Many developers, including myself, occasionally get tripped up attempting to output their request in the method and then wonder why nothing is showing up when they try to render JSON as HTML, which doesn’t work at all.

As long as you know that the parameter can be transformed into a different data type, fixing that problem will be easy. If your AJAX server responses for the form will always be of one type — for instance, JSON — and you will always treat it as JSON, then it makes sense to set to . If you need to juggle between different data types, omit to allow jQuery to intelligently convert the data.

Our function is where we do things after we get a successful AJAX response, like updating a message in our page or search results in a table. Here is a good live example of jQuery AJAX and POST from one of my clients, a free keyword suggestion tool for advanced SEO marketers.

Now, on to the server side. From the client side, all we need to worry about is sending the right Content Type and Request body (the content we send along like the form data). On the server side we pick this up, process it, and respond accordingly.

It’s important to note that we need to format the response data correctly according to the we want to send back. If we want to send a simple text message we would respond with . If we want to respond with JSON, we’ll send a and a properly formatted JSON string without any extra characters before or after the string, like so:

This will allow jQuery to convert the string into JSON. Please do not try to build a JSON string manually; use your language’s built-in JSON function or libraries to do it for you. Trust me, it will save you time and headaches.

2.1 Server side code for our AJAX form

If you’re running PHP 5.4 or above, you can fire up a server by going into your terminal running the following commands:

If you’re on Mac, install Mac Ports and then php55 with:

Then run the development server:

Now open up your browser to http://localhost:8111.

Влияние AJAX на ранжирование

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

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

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

Динамические страницы можно кэшировать и отображать их в качестве статических. Для вызова AJAX лучше воспользоваться классическим якорем, чем событием «onClick».

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

Description

When making an Ajax request to the server, DataTables will construct a data object internally, with the data it requires to be sent to the server for the request. What this data contains will depend upon the processing mode DataTables is operating in:

For client-side processing no additional data is submitted to the server
For server-side processing () the draw request parameters are submitted — see the server-side processing manual.

The option provides the ability to add additional data to the request, or to modify the data object being submitted if required.

In principle it operates in exactly the same way as jQuery’s property, in that it can be given as an object with parameters and values to submit, but DataTables extends this by also providing it with the ability to be a function, to allow the data to be re-evaluated upon each Ajax request (see above).

Страница сервера AJAX

Страница на сервере, вызываемая приведенным выше кодом JavaScript, представляет собой файл PHP с именем «getcustomer.php».

Исходный код в «getcustomer.php» выполняет запрос к базе данных и возвращает результат в виде таблицы HTML:

<?php$mysqli = new mysqli(«servername», «username»,
«password», «dbname»);if($mysqli->connect_error) {
exit(‘Не удалось подключиться’);}$sql = «SELECT customerid, companyname,
contactname, address, city, postalcode, countryFROM customers WHERE
customerid = ?»;$stmt = $mysqli->prepare($sql);
$stmt->bind_param(«s», $_GET);
$stmt->execute();$stmt->store_result();$stmt->bind_result($cid,
$cname, $name, $adr, $city, $pcode, $country);$stmt->fetch();$stmt->close();echo «<table>»;echo «<tr>»;echo «<th>CustomerID</th>»;echo
«<td>» . $cid . «</td>»;echo «<th>CompanyName</th>»;echo «<td>» . $cname
. «</td>»;echo «<th>ContactName</th>»;echo «<td>» . $name . «</td>»;
echo «<th>Address</th>»;echo «<td>» .
$adr . «</td>»;echo «<th>City</th>»;
echo «<td>» . $city . «</td>»;echo «<th>PostalCode</th>»;echo «<td>» .
$pcode . «</td>»;echo «<th>Country</th>»;echo «<td>» . $country .
«</td>»;echo «</tr>»;echo «</table>»;?>

Делаем запрос GET с помощью $.get()

Метод jQuery $.get() предоставляет легкий и удобный способ сделать простой запрос AJAX. Он выполняет запрос с помощью метода HTTP GET (используется для получения URL, например страниц и изображений), вместо метода POST (который традиционно используется для отправки данных формы).

В простейшей форме можно вызвать метод так:

. где url является адресом URL ресурса, от которого ожидается ответ. Обычно это скрипт на стороне сервера, который выполняет какие-нибудь действия и может возвращать некие данные:

. хотя можно также запросить статический документ:

При запросе URL, вы можете отправить данные с запросом. Вы можете передать данные в строке запроса, так же как и при обычном запросе GET:

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

В качестве альтернативы вы можете передать данные методу $.get() как строку:

Делаем запрос POST с помощью метода $.post()

В то время как метод позволяет делать запросы AJAX с помощью метода HTTP GET, метод реализует запросы с помощью метода HTTP POST. Синтаксис вызова аналогичен методу .

Например, изменим нашу демонстрацию с передачей прогноза погоды из предыдущего урока на использование метода :

$.post( "getForecast.txt", data, success, "json" );

Пробуем запустить демонстрацию и получаем такое же окно, как и в предыдущем уроке.

Метод HTTP POST обычно используется для отправки данных формы. Причина заключается в том, что позволяет отправлять небольшие объемы данных (обычно несколько сот символов), а метод POST может пересылать столько данных, сколько вам нужно. Поэтому, если требуется переслать большой объем данных в запросе AJAX, используйте метод .

AJAX в действии[править]

Действие AJAX легче всего показать на портальном сценарии: просмотр сообщений электронной почты. Большинство веб-порталов позволяют пользователям предварительно просматривать содержимое почтового ящика с основной страницы. Однако, чтобы просмотреть содержимое сообщения, необходимо отдельно щелкнуть на каждом сообщении, при этом страница должна обновляться каждый раз. На этом примере можно увидеть возможность осуществления более богатого поведения, подобно аналогичному в Outlook Express и Mozilla Thunderbird, при этом задействовав существующие веб-технологии AJAX.

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

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

@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  if ("1".equals(req.getParameter("message_id"))) {
    resp.getWriter().println( "John Doe,Greetings,10 10-2005,Hi.I am doing good" ) ;
  } else if ("2".equals(req.getParameter("message_id"))) {
    resp.getWriter().println( "Joanna Doe,Hi,10-10-2005,Document is complete." );
  } else if ("3".equals(req.getParameter("message_id"))) {
    resp.getWriter().println("Joanna Doe,Hi,10-10-2005,Meeting is at 3.");
    ...
  } else {
    resp.getWriter().println( "NA,NA,NA,Nothing to display" );
  } //end else
} //end service

Следующий пример на С# для ASP.NET

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

public class service System.Web.UI.Page
{
  private void Page_Load(object sender, System.EventArgs e)
  {
    if (Request.Params"message_id" != null)
    {
      switch (Request.Params"message_id"])
      {
        case "1"
          Response.Write("John Doe,Greetings,10-10-2005,Hi.I am doing good");
          break;
        case "2"
          Response.Write("Joanna Doe,Hi,10-10-2005,Document is complete.");
          break;
        case "3"
          Response.Write("Joanna Doe,Hi,10-10-2005,Meeting is at 3.");
          break;
      }
    }
    else
    {
      Response.Write(",NA ,NA ,NA ,Nothing to display");
    }
  }
.....
}

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

Подключение jQuery 3-й версии

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

Подключение jQuery 3.4.1

1
2
3

<!—илитак—>

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

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.

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

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

Расширенный подход

Начиная с jQuery-1.5 появились три новых направления, позволяющие использовать $.ajax() еще более глубоко. Первый из них (Prefilters) позволяет провести дополнительные манипуляции, непосредственно перед отправкой запроса. С помощью второго подхода (Converters) можно указать jQuery, как следует конвертировать полученные от сервера данные, если они не соответствуют ожидаемому формату. Третий подход (Transports) является наиболее низкоуровневым, он позволяет самостоятельно организовать запрос к серверу.

Prefilters

Этот подход состоит в установке обработчика, вызываемого перед выполнением каждого ajax-запроса. Этот обработчик предшествует выполнению любых других обработчиков ajax. Устанавливается он с помощью функции $.ajaxPrefilter():

$.ajaxPrefilter(function(options, originalOptions, jqXHR){
  // Изменяем настройки (options), проверяем базовые настройки (originalOptions) и объект jqXHR
});

Гдеoptions — настройки текущего запроса,originalOptions — настройки по умолчанию,jqXHR — jqXHR-объект данного запроса.

В Prefilters удобно обрабатывать пользовательские настройки (т.е. новые, неизвестные библиотеке настройки, указанные в запросе). Например, можно ввести собственную настройку abortOnRetry, при включении которой незавершенные запросы будут сбрасываться, в случае, если на этот-же url поступает следующий запрос:

var currentRequests = {};
 
$.ajaxPrefilter(function(options, originalOptions, jqXHR){
  if(options.abortOnRetry){
    if(currentRequestsoptions.url){
      currentRequestsoptions.url.abort();
    }
    currentRequestsoptions.url = jqXHR;
  }
});

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

$.ajaxPrefilter(function(options){
  if(options.crossDomain){
    options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url );
    options.crossDomain = false;
  }
});

Кроме этого, можно указывать значения dataType на которых сработает prefilter. Так, к примеру, можно указать типы json и script:

$.ajaxPrefilter( "json script", function(options, originalOptions, jqXHR){
  // Изменяем настройки (options), проверяем базовые настройки (originalOptions) и объект jqXHR
});

И наконец, можно изменить значение dataType, вернув необходимое значение:

$.ajaxPrefilter(function(options){
  // изменим dataType на script, если url соответствует определенным условиям
  if (isActuallyScript(options.url)){
    return "script";
  }
});

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

Converters

Этот принцип заключается в установке обработчика, который сработает, если указанный в настройках dataType не совпадет с типом данных, присланных сервером.

Converters является настройкой ajax, поэтому может быть задан глобально:

// так можно задать обработчик, который сработает, если вместо
// указанного вами в dataType типа mydatatype придут данные типа text
$.ajaxSetup({
  converters{
    "text mydatatype"function( textValue ){
      if(valid( textValue )){
        // обработка переданного текста
        return mydatatypeValue;
      } else {
        // если присланные сервером данные совсем не соответствуют ожидаемым,
        // можно вызвать исключение.
        throw exceptionObject;
      }
    }
  }
});

Converters поможет при введении собственного (пользовательского) dataType

Важно отметить, что в названии такого dataType должны использоваться только строчные буквы! Запрос данных, упомянутого выше типа «mydatatype», мог бы выглядеть следующим образом:

$.ajax( url,{
  dataType"mydatatype"
});

Converters может быть задан и не глобально (т.е. для конкретного запроса). В следующем примере, будет продемонстрирован запрос к серверу, ответ от которого должен будет прийти в xml, после чего конвертирован в обычный текст (способ конвертации будет задан нами в параметре converters и будет действовать только для этого запроса), а из текста в «mydatatype» (используя заданный глобально converters):

$.ajax( url, {
  dataType "xml text mydatatype",
  converters {
    "xml text" function( xmlValue ) {
      // здесь будут вытащены нужные текстовые данные из предоставленного xml
      return textValue;
    }
  }
});

xmlHttpRequest

Вы знаете что такое xmlHttpRequest? XmlHttpRequest — это
объект, позволяющий браузеру делать запросы к серверу без перезагрузки
страницы. Да и это, собственно, понятно из названия: http request —
запрос по http протоколу. А вот с xml интересней: несмотря на указание
этого языка в названии, объект XHR (это сокращение от xmlHttpRequest)
работает с данными произвольного формата, не только с XML. Собственно,
технология Ajax и основана на этом компоненте. Более углублённо о нём
можно почитать на сайте xmlhttprequest.ru, посмотреть примеры
использования можно в статье о CURLe, но это нас сейчас мало интересует. Сейчас разберем Ajax с помощью JQuery.

Защита: используем 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')
		)
	);

}

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

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

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

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

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();
}

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

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

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

Тут AJAX запросы будут срабатывать только для пользователей с правом указанным правом, например author. Для всех остальных, включая неавторизованных пользователей, 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();
}

Загрузка части страницы

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

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

Например:

$('#articleContainer').load( "newArticle.html #articleBody" );

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