Шпаргалка по jquery функциям работающим с ajax

Пример. Gmail.

Раз уж взялись за Google — рассмотрим почтовый сервис той же компании, http://gmail.com.

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

  • Проверка ошибок ввода формы ДО сабмита
    На сервер передается имя пользователя, результат проверки возвращается на страницу.
  • «Мгновенная» загрузка
    Браузер обращается к серверу только за данными, а не обновляет весь громоздкий интерфейс
  • Автоматическая «доставка» писем в открытую папку
    Время от времени отправляется запрос на сервер и, если пришли новые письма, они появляются в браузере.
  • Автодополнение
    Достаточно ввести первые буквы имени адресата, и остальные дополняются автоматически, как в десктоп-приложениях.

Результат: обширная популярность, высокий спрос на account’ы с момента открытия.

Объяснение примера

В приведенном выше примере, когда пользователь вводит символ в поле ввода, выполняется вызываемая функция .

Функция запускается событием.

Вот HTML код:

Пример

<html><body><p><b> Начните вводить имя в поле ввода ниже:</b></p><p> Предложения: <span id=»txtHint»></span></p><form> Имя: <input type=»text» onkeyup=»showHint(this.value)»></form><script>function showHint(str) {  if (str.length == 0) {     document.getElementById(«txtHint»).innerHTML = «»;    return;
  } else {    var xmlhttp = new XMLHttpRequest();    xmlhttp.onreadystatechange = function() {      if (this.readyState == 4 && this.status == 200) {        document.getElementById(«txtHint»).innerHTML = this.responseText;
      }    };    xmlhttp.open(«GET», «gethint.php?q=» + str, true);
    xmlhttp.send();  }}</script>
</body></html>

Объяснение кода:

Сначала проверьте, пусто ли поле ввода (str.length == 0). Если это так, очистите содержимое заполнителя txtHint и выйдите из функции.

Однако, если поле ввода не пустое, сделайте следующее:

Создать объект XMLHttpRequest
Создайте функцию, которая будет выполняться, когда будет готов ответ сервера
Отправьте запрос в файл PHP (gethint.php) на сервере
Обратите внимание, что добавлен параметр gethint.php?q=»+str
Переменная str содержит содержимое поля ввода

PHP

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

ajax.php / 1

// Будем использовать данный класс для определения каждого элемента select

class SelectBox{
	public $items = array();
	public $defaultText = '';
	public $title = '';
	
	public function __construct($title, $default){
		$this->defaultText = $default;
		$this->title = $title;
	}
	
	public function addItem($name, $connection = NULL){
		$this->items = $connection;
		return $this; 
	}
	
	public function toJSON(){
		return json_encode($this);
	}
}

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

ajax.php / 2

/* конфигурация элементов select */

// Продукт

$productSelect = new SelectBox('Что желаете купить?','Выберите категорию продукта');
$productSelect->addItem('Телефоны','phoneSelect')
			  ->addItem('Ноутбуки','notebookSelect')
			  ->addItem('Планшеты','tabletSelect');

// Типы телефонов

$phoneSelect = new SelectBox('Какой тип телефона вы хотите?', 'Выберите тип телефона');
$phoneSelect->addItem('Смартфон','smartphoneSelect')
			->addItem('Обычный телефон','featurephoneSelect');

// Смартфоны

$smartphoneSelect = new SelectBox('Какой смартфон вам нужен?','Выберите модель смартфона');
$smartphoneSelect->addItem('Samsung Galaxy Nexus')
				 ->addItem('iPhone 4S','iphoneSelect')
				 ->addItem('Samsung Galaxy S2')
				 ->addItem('HTC Sensation');

// Обычные телефоны

$featurephoneSelect = new SelectBox('Какой телефон вам нужен?','Выберите модель телефона');
$featurephoneSelect->addItem('Nokia N34')
				   ->addItem('Sony Ericsson 334')
				   ->addItem('Motorola');

// Цвет iPhone

$iphoneSelect = new SelectBox('Какой цвет аппарата вам нравится?','Выберите цвет');
$iphoneSelect->addItem('Белый')->addItem('Черный');

// Выбор ноутбука

$notebookSelect = new SelectBox('Какой ноутбук вы хотите купить?', 'Выберите модель ноутбука');
$notebookSelect->addItem('Asus Zenbook','caseSelect')
			   ->addItem('Macbook Air','caseSelect')
			   ->addItem('Acer Aspire','caseSelect')
			   ->addItem('Lenovo Thinkpad','caseSelect')
			   ->addItem('Dell Inspiron','caseSelect');

// Планшет

$tabletSelect = new SelectBox('Какой планшет является предметом вашей мечты?', 'Выберите модель планшета');
$tabletSelect->addItem('Asus Transformer','caseSelect')
			 ->addItem('Samsung Galaxy Tab','caseSelect')
			 ->addItem('iPad 16GB','caseSelect')
			 ->addItem('iPad 32GB','caseSelect')
			 ->addItem('Acer Iconia Tab','caseSelect');

// Сумка

$caseSelect = new SelectBox('Возьмёте защитный чехол к вашему аппарату?','');
$caseSelect->addItem('Да')->addItem('Нет');


// Регистрируем все пункты выбора в массиве

$selects = array(
	'productSelect'			=> $productSelect,
	'phoneSelect'			=> $phoneSelect,
	'smartphoneSelect'		=> $smartphoneSelect,
	'featurephoneSelect'	=> $featurephoneSelect,
	'iphoneSelect'			=> $iphoneSelect,
	'notebookSelect'		=> $notebookSelect,
	'tabletSelect'			=> $tabletSelect,
	'caseSelect'			=> $caseSelect
);

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

ajax.php / 3

// Будем просматривать данный массив и возвращать выбранный объект в зависимости
// от парметра $_GET передаваемого jQuery

// Вы можете модифицировать код для выбора результата из таблицы

if(array_key_exists($_GET,$selects)){
	header('Content-type: application/json');
	echo $selects]->toJSON();
}
else{
	header("HTTP/1.0 404 Not Found");
	header('Status: 404 Not Found');
}

Вызывая метод toJSON() мы выводим все данные для элементов выбора в формате JSON, который используется клиентской частью jQuery.

Более сложный пример 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-запросов.

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

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

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

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

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

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

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

Объект jqXHR

Метод ajax() возвращает объект jqXHR, который можно использовать для получения подробной информации о запросе и с которым можно взаимодействовать. Объект jqXHR представляет собой оболочку объекта XMLHttpRequest, составляющую фундамент браузерной поддержки Ajax.

При выполнении большинства операций Ajax объект jqXHR можно просто игнорировать, что я и рекомендую делать. Этот объект используется в тех случаях, когда необходимо получить более полную информацию об ответе сервера, чем та, которую удается получить иными способами. Кроме того, его можно использовать для настройки параметров Ajax-запроса, но это проще сделать, используя настройки, доступные для метода ajax(). Свойства и методы объекта jqXHR описаны в таблице ниже:

Свойства и методы объекта jqXHR
Свойство/метод Описание
readyState Возвращает индикатор хода выполнения запроса на протяжении всего его жизненного цикла, принимающий значения от 0 (запрос не отправлен) до 4 (запрос завершен)
status Возвращает код состояния HTTP, отправленный сервером
statusText Возвращает текстовое описание кода состояния
responseXML Возвращает ответ в виде XML (если он является XML-документом)
responseText Возвращает ответ в виде строки
setRequest(имя, значение) Возвращает заголовок запроса (это можно сделать проще с помощью параметра headers)
getAllResponseHeaders() Возвращает в виде строки все заголовки, содержащиеся в ответе
getResponseHeaders(имя) Возвращает значение указанного заголовка ответа
abort() Прерывает запрос

Объект jqXHR встречается в нескольких местах кода. Сначала он используется для сохранения результата, возвращаемого методом ajax(), как показано в примере ниже:

В этом примере мы сохраняем результат, возвращаемый методом ajax(), а затем используем метод setInterval() для вывода информации о запросе каждые 100 мс

Использование результата, возвращаемого методом ajax(), не изменяет того факта, что запрос выполняется асинхронно, поэтому при работе с объектом jqXHR необходимо соблюдать меры предосторожности. Для проверки состояния запроса мы используем свойство readyState (завершению запроса соответствует значение 4) и выводим ответ сервера на консоль

Для данного сценария консольный вывод выглядит так (в вашем браузере он может выглядеть несколько иначе):

Я использую объект jqXHR лишь в редких случаях и не делаю этого вообще, если он представляет собой результат, возвращаемый методом ajax(). Библиотека jQuery автоматически запускает Ajax-запрос при вызове метода ajax(), и поэтому я не считаю возможность настройки параметров запроса сколько-нибудь полезной. Если я хочу работать с объектом jqXHR (как правило, для получения дополнительной информации об ответе сервера), то обычно делаю это через параметры обработчика событий, о которых мы поговорим далее. Они предоставляют мне информацию о состоянии запроса, что избавляет от необходимости выяснять его.

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

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

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

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

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

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

Пример добавления нескольких параметров GET

$.ajax({
    type: "GET",
    url: 'test.php',
    data: {name: 'Wayne', age: 27, country: 'Ireland'},
    success: function(data){
        alert(data);
    }
});

Приведенный выше код отправит запрос GET к test.php?name=Wayne&age=27&country=Ireland

Поэкспериментируйте с кодом, чтобы разобраться в нём. Попробуйте добавлять и удалять параметры, чтобы понять, как отправлять данные с помощью jQuery и Ajax.

А если мы хотим отправить запрос POST к файлу submission.php?

$.ajax({
    type: "POST",
    url: 'submission.php',
    data: {name:'Wayne', age: 27},
    success: function(data){
        alert(data);
    }
});

Я изменил тип метода (с GET на POST) и URL-адрес (на submission.php). В этом примере параметры name и age будут отправлены как переменные POST. Это означает, что на странице submission.php их можно получить с помощью следующего кода:

$name = $_POST;
$age = $_POST;

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

$name = $_GET;
$age = $_GET;

Последней частью паззла является функция success(). Она вызывается, если Ajax-запрос завершается успешно. В примере, приведенном выше, я вывожу результат в сообщении. Но в большинстве случаев вы будете использовать эту функцию для отображения уведомлений на странице. Например, если пользователь отправляет форму с помощью Ajax, тогда эта функция применяется для проверки ответа. А также для вывода сообщения о том, что данные формы успешно отправлены на сервер.

Надеюсь, эта статья помогла вам разобраться с основами Ajax-запросов!

Данная публикация является переводом статьи «Simple Ajax request example with JQuery and PHP» , подготовленная редакцией проекта.

AJAX Example Explained

HTML Page

<!DOCTYPE html><html>
<body>
<div id=»demo»>  <h2>Let AJAX change this text</h2> 
<button type=»button» onclick=»loadDoc()»>Change Content</button>
</div>
</body>
</html>

The HTML page contains a <div> section and a <button>.

The <div>
section is used to display information from a server.

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

«ajax_info.txt» looks like this:

<h1>AJAX</h1><p>AJAX is not a programming language.</p><p>AJAX is a
technique for accessing web servers from a web page.</p><p>AJAX stands for
Asynchronous JavaScript And XML.</p>

Пример. Google suggest.

Google — одна из первых систем, которая предложила «живой поиск», live search. Пользователь печатает поисковую фразу, а система автодополняет ее, получая
список самых вероятных дополнений с сервера.

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

  • Активируется примерно при каждом нажатии клавиши
    • Время посылки последнего запроса отслеживается
    • Для «обычной» скорости печати — запрос отсылается при каждом нажатии
    • Для «программистской» скорости — каждые несколько нажатий
  • Создается скрытый DIV, который показывается при начале печати
  • DIV заполняется ответом сервера
    • Текущий результат подсвечен, можно перемещаться и выбирать
    • При нажатии правой стрелки, поиск в подрезультатах
  • Результаты кэшируются
  • Время на осуществление запроса отслеживается для управления частотой запросов к серверу
    • Обычный модем будет обращаться к серверу меньше,
    • Подключение по выделенной линии — запросы идут чаще.

Получаем данные с сервера

До сих пор мы рассматривали примеры использования $.get() только для отправки запросов на сервер, игнорируя любой ответ, который может сформировать скрипт на серверной стороне. Но в большинстве случаев ваш JavaScript код будет ожидать ответ от скрипта на серверной стороне и обрабатывать полученные данные.

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

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

Как только возвратная функция создана, вы можете передать ее в качестве третьего аргумента в метод $.get() :

Использование вспомогательных методов для работы с конкретными типами данных

Библиотека jQuery предоставляет три вспомогательных метода, которые делают работу с некоторыми типами данных более удобной. Некоторые из них мы рассмотрим далее.

Получение HTML-фрагментов

Метод load() предназначен для получения только HTML-данных, что позволяет совместить запрос HTML-фрагмента, обработку ответа от сервера для создания набора элементов и вставку этих элементов в документ в одном действии. Пример использования метода load() представлен ниже:

В этом сценарии мы вызываем метод load() для элемента, в который хотим вставить новые элементы, и передаем ему URL-адрес в качестве аргумента. Если запрос завершается успешно, а полученный от сервера ответ содержит действительный HTML-фрагмент, элементы вставляются в указанное место в документе, как показано на рисунке:

Вы видите, что все элементы из файла flowers.html добавлены в документ, как мы и хотели, но поскольку у них отсутствует атрибут class, то они не укладываются в табличную компоновку страницы, используемую в основном документе. Поэтому метод load() наиболее полезен в тех случаях, когда все элементы могут быть вставлены в одно место в документе без какой-либо дополнительной обработки.

Получение и выполнение сценариев

Метод getScript() загружает файл JavaScript, а затем выполняет содержащиеся в нем инструкции. Чтобы продемонстрировать работу этого метода, я создал файл myscript.js и сохранил его вместе с файлом test.html на своем веб-сервере. Содержимое этого файла представлено в примере ниже:

Эти инструкции генерируют три ряда элементов, описывающих цветы. Мы обошлись здесь без определения шаблонов и использовали циклы для генерации элементов (хотя, вообще говоря, следовало бы воспользоваться шаблонами данных).

Самое важное, что необходимо знать при работе со сценариям, — между инициализацией Ajax-запроса и выполнением инструкций сценария состояние документа может измениться. В примере ниже приведен сценарий из основного документа, в котором по-прежнему используется метод getScript(), но при этом, еще до завершения Ajax-запроса, модифицируется дерево DOM:. Здесь мы вызываем метод getScript() для основной функции $() и передаем ему в качестве аргумента URL-адрес файла, который хотим использовать

Если сервер способен предоставить указанный файл и этот файл содержит действительный JavaScript-код, то последний будет выполнен

Здесь мы вызываем метод getScript() для основной функции $() и передаем ему в качестве аргумента URL-адрес файла, который хотим использовать. Если сервер способен предоставить указанный файл и этот файл содержит действительный JavaScript-код, то последний будет выполнен.

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

Используя метод getScript(), можно быстро получать запрашиваемую информацию, не доставляя пользователям неудобств, вызванных необходимостью ожидания ответа. Уточню свою мысль. Я вовсе не предлагаю вам использовать этот метод для выполнения каких-либо действий скрытно от пользователя и говорю лишь о том, что следует отодвигать на второй план загрузку и выполнение вполне законной функциональности, если она представляет для пользователей меньшую ценность, чем затрачиваемое на ее ожидание время.

В данном примере после запуска Ajax-запроса с помощью метода getScript() из документа удаляется элемент row2, для чего используется метод remove(). Данный элемент используется в файле myscript.js для вставки новых элементов. Эти элементы отбрасываются незаметным для пользователя образом, поскольку в документе селектору #row2 ничто не соответствует. Итоговый результат представлен на рисунке:

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

Получение данных в формате JSON

Для загрузки данных JSON с сервера предназначен метод getJSON(). Возможно, это наименее полезный из всех трех вспомогательных методов, поскольку он не делает с данными ничего сверх того, что делает базовый метод get().

Индексирование AJAX поисковиками

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

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

Чтобы минимизировать негативное влияние AJAX на SEO, сайт можно оптимизировать следующим образом:

  1. Перепишите ссылки в URL. После каждой # необходимо поставить восклицательный знак.
    Например, ссылку http://www.site.ru/#uslugi необходимо преобразовать в http://www.site.ru/#!uslugi.
  2. Для всех страниц AJAX версию HTML следует сделать доступной по определенному адресу. В нем установленное нами сочетание «#!» Необходимо заменить на «?_escaped_fragment_=». (В нашем примере http://www.site.ru/?_escaped_fragment_=uslugi).
  3. На странице AJAX нужно проставить тег: <meta name=»fragment» content=»!»>.
  4. Карта сайта в формате .xml ускорит индексацию его страниц.
  5. После индексации ресурса сравните его версию AJAX с сохраненной копией. Это позволит увидеть, все ли страницы проиндексированы ботами.

AJAX пример №2 — отправка POST запроса на сервер

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

  • GET — передаёт пользовательских данные заданному ресурсу по URI.
  • POST — передаёт пользовательских данные заданному ресурсу по протоколу.
  • HEAD — аналогичен методу GET, за исключением того, что сервер ничего не посылает в информационной части ответа.
  • TRACE — возвращает всё, что было введено при запросе, включая HTTP-заголовки.
  • DELETE — Удаляет указанный ресурс.
  • PUT — загружает содержимого запроса на указанный в запросе URI.

Причем это относится не только к технологии AJAX, а в принципе ко всему протоколу HTTP. Самыми распространенными являются два типа GET и POST, как правило, они широко используемы в отправке данных на сервер посредствам HTML элемента form. Именно с этими типами запроса я и приведу примеры работы веб приложения на АЯКСЕ.

Для того чтобы с помощью АЯКС технологии отправить POST запрос, нужно использовать три метода объекта request:

  • open – открывает соединение с сервером с указанием метода передачи данных.
  • setRequestHeader — устанавливает заголовок запроса.
  • send — отправляет запрос.

Откройте код примера №1 и замените в нем строки:

jQuery.get( url [, data ] [, success ] [, dataType ] )Возвращает: jqXHR

Описание: Загружает данные с сервера при помощи HTTP GET запроса

    • url
      Тип:

      Строка содержащая URL-адрес куда будет отправлен запрос.

    • data
      Тип: или

      Плоский объект или строка, которая будет отправлена на сервер с запросом.

    • success
      Тип: ( data, textStatus, jqXHR )
      Функция обратного вызова, выполняемая если запрос успешен. Требуется если предоставлен , но Вы можете использовать значение или .
    • dataType
      Тип:

      Тип данных ожидаемый с сервера. Используются по умолчанию: xml, json, script, text, html в зависимости от заданного URL-адреса.

  • Ассоциативный массив (ключ/значение) настраивающий Ajax. Все поля кроме url не обязательны и могут быть установлены по умолчанию припомощи метода $.ajaxSetup(). Полный список параметров смотрите в описании метода jQuery.ajax( settings ). Метод запроса автоматически будет установлен в значение GET.

Это сокращенная функция Ajax, эквивалентна коду:

1
2
3
4
5
6

The callback function is passed the returned data, which will be an XML root element, text string, JavaScript file, or JSON object, depending on the MIME type of the response. It is also passed the text status of the response.

As of jQuery 1.5, the callback function is also passed a (in jQuery 1.4, it was passed the object). However, since JSONP and cross-domain GET requests do not use XHR, in those cases the and parameters passed to the success callback are undefined.

Most implementations will specify a success handler:

1
2
3
4

This example fetches the requested HTML snippet and inserts it on the page.

The jqXHR Object

As of jQuery 1.5, all of jQuery’s Ajax methods return a superset of the object. This jQuery XHR object, or «jqXHR,» returned by implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see Deferred object for more information). The (for success), (for error), and (for completion, whether success or error; added in jQuery 1.6) methods take a function argument that is called when the request terminates. For information about the arguments this function receives, see the section of the documentation.

The Promise interface also allows jQuery’s Ajax methods, including , to chain multiple , , and callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Deprecation Notice

The , , and callback methods are removed as of jQuery 3.0. You can use , , and instead.

  • Due to browser security restrictions, most «Ajax» requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.
  • If a request with jQuery.get() returns an error code, it will fail silently unless the script has also called the global .ajaxError() method. Alternatively, as of jQuery 1.5, the method of the object returned by jQuery.get() is also available for error handling.
  • Script and JSONP requests are not subject to the same origin policy restrictions.

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.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector