Cокращённые Ajax методы
В этой статье познакомимся с сокращёнными AJAX методами jQuery: load, get, getJSON, getScript, post. Эти методы позволяют очень просто осуществлять необходимые AJAX запросы и в отличие от функции ajax, для их написания требуется меньшее количество строчек кода.
Метод load
Метод load предназначен для получения данных с сервера по указанному адресу URL и помещения их в один или несколько выбранных элементов.
Метод load имеет следующий синтаксис:
.load(url [,data] [,complete])[]параметры в квадратных скобках являются необязательнымиurlстрока, содержащая URL адрес, на который необходимо отправить запросdataданные, которые необходимо послать на сервер в формате строки или объектаcompleteдополнительные действия, которые необходимо выполнить после завершения запроса, указываются посредством функцииFunction(responseText, textStatus, xhr)где:responseTextответ сервераtextStatusстатус ответаxhrXMLHTTPRequest объект
В большинстве случаев для отправки запроса метод load использует GET. Но он также может использовать и метод POST. Это происходит только тогда, когда данные для отправки на сервер указываются не в формате строки, а посредством объекта.
Примеры использования
Вставить содержимое файла asidenav.tpl в блок c id="asidenav" после загрузки DOM страницы:
<div id="asidenav"></div>
...
<!-- После подключения библиотеки jQuery -->
<script>
// после загрузки DOM страницы
$(function() {
// вставить в элемент (#asidenav) контент файла asidenav.tpl
// если файл не находится в той же директории что и HTML документ, то необходимо дополнительно указать путь к нему
$('#asidenav').load('asidenav.tpl');
});
</script>Загрузить часть файла demo.html в элемент при клике по кнопке, расположенной в нём:
<div id="ajaxcontent">
<button id="ajaxclick">Получить контент файла demo.html</button>
</div>
...
<!-- После подключения библиотеки jQuery -->
<script>
$('#ajaxclick').click(function(){
// загрузить в элемент id="content1" часть файла demo.html (#content1)
$(this).parent().load('demo.html #content1');
});
</script>Контент файла demo.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Файл demo.html</title>
</head>
<body>
<div id="content1">...</div><!-- Будет вставлен этот контент -->
<div id="content2">...</div>
</body>
</html>Загрузить в элемент, имеющий id="result" ответ content.php. Данный ответ будет зависеть от значения атрибута data-content, которое имеет кнопка, пославшая AJAX-запрос на сервер.
<button class="load-ajax-content" data-content="content1">Загрузить содержимое 1</button>
<button class="load-ajax-content" data-content="content2">Загрузить содержимое 2</button>
<button class="load-ajax-content" data-content="content3">Загрузить содержимое 3</button>
<!-- Элемент, в который будем загружать данные -->
<div id="result"></div>
...
<!-- После подключения библиотеки jQuery -->
<script>
// при нажатии на кнопку, имеющую класс load-ajax-click
$('.load-ajax-content').click(function(){
// определим значение атрибута data-content
var dataContent = $(this).attr('data-content');
// запросим данные из файла, с использованием значения атрибута data-content, и выведем их в элемент id="result"
if (dataContent) {
$('#result').load('content.php','content='+dataContent);
}
});
</script>На сервере файл content.php:
<?php
// завершим работу php скрипта, если в суперглобальном массиве $_GET не существует ключа content
if (!isset($_GET['content'])) {
exit();
}
// получаем значение GET параметра и очищаем его от не желательного содержимого с помощью фильтра FILTER_SANITIZE_STRING
$content = filter_var($_GET['content'], FILTER_SANITIZE_STRING);
// массив, элементы которого содержат различный контент
$contents = array();
$contents['content1'] = 'Содержимое 1...';
$contents['content2'] = 'Содержимое 2...';
$contents['content3'] = 'Содержимое 3...';
// если значение GET параметра (ключ) присутствует в массиве, то вывести соответствующее ему значение
if (array_key_exists($content, $contents)) {
echo $contents[$content];
}
exit();Рассмотрим вышеприведённый пример, в котором передавать данные будем не в формате строки, а посредством объекта. Кроме этого выведем в консоль браузера дополнительные данные, такие как ответ сервера, статус ответа и объект XMLHTTPRequest.
<!-- ... -->
<div id="error"></div>
<script>
// при нажатии на кнопку, имеющую класс load-ajax-click
$('.load-ajax-content').click(function(){
// определим значение атрибута data-content
var dataContent = $(this).attr('data-content');
// запросим данные из файла, с использованием значения атрибута data-content, и выведем их в элемент id="result"
if (dataContent) {
$('#result').load('content.php', {content: dataContent}, function(responseText, textStatus, xhr) {
console.log('responseText: ' + responseText); // ответ сервера
console.log('textStatus: ' + textStatus); // статус ответа
console.log(xhr); // XMLHTTPRequest объект
if (textStatus == "error") {
var msg = "Извините, но при загрузке произошла ошибка: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});
}
});
</script>На сервере файл content.php:
<?php
// завершим работу php скрипта, если в суперглобальном массиве $_GET не существует ключа content
if (!isset($_POST['content'])) {
exit();
}
// получаем значение POST параметра и очищаем его от не желательного содержимого с помощью фильтра FILTER_SANITIZE_STRING
$content = filter_var($_POST['content'], FILTER_SANITIZE_STRING);Функция get
Функция get предназначена для загрузки данных с сервера посредством HTTP GET запроса.
Синтаксис функции get:
$.get(url [,data] [,success] [,dataType]);[]параметры в квадратных скобках являются необязательнымиurlстрока, содержащая URL адрес, на который необходимо отправить запросdataданные, которые необходимо послать на сервер в формате строки или объектаsuccessфункция обратного вызова, которая выполнится в случае успешного завершения запросаиFunction(data, textStatus, xhr)где:dataответ сервераtextStatusстатус ответаxhrXMLHTTPRequest объектdataTypeпринудительно указать тип данных, который должен прийти с сервера
Синтаксис функции get в формате объекта:
$.get([settings]);По умолчанию функция get пытается автоматически определить формат полученных с сервера данных xml, json, script, text, html. Осуществляет она это на основании MIME-типа ответа.
Например, для того чтобы функция get определила, что формат данных, который она получила с сервера, соответствует JSON, на стороне сервере в скрипте php должен быть установлен соответствующий заголовок:
header('Content-Type: application/json');
echo json_encode(array('test' => 'text...'));В jQuery обработать отложенные события AJAX можно также с помощью Promise методов done при успешном ответе, fail при ошибке, always при успешном ответе или при ошибке.
var xhr = $.get([settings])
.done(function() {
// действия при успехе
})
.fail(function() {
// действия при ошибке
})
.always(function() {
// действия при успехе или при ошибке
});
xhr.always(function() {
// ещё одни действия при успехе или при ошибке
});Примеры использования
Подгрузим в HTML элемент после загрузки страницы содержимое файла content.tpl:
<!-- Элемент, в который будем загружать данные -->
<div id="content"></div>
...
<!-- После подключения библиотеки jQuery -->
<script>
// после загрузки
$(function(){
// выполним AJAX-запрос на сервер, используя метод GET
$.get({
url: 'content.tpl', // URL-запроса
success: function(data) { // при успешном ответе
// добавим в элемент полученные данные
$('#content').empty().append(data);
}
});
});
</script>AJAX получение каждые 5 секунд нового изображения (URL) из определённой директории на сервере и отображения её на странице (вместо предыдущей картинки).
<!-- Элемент, в который будем выводить картинку -->
<div id="random-image"></div>
...
<!-- После подключения библиотеки jQuery -->
<script>
// после загрузки
$(function(){
// создадим функцию, которая будет выполнять AJAX-запрос на сервер
var showRandomImage = function(){
// контент функции
$.get({
url: 'random-image.php', // URL-запроса
success: function(data) { // при успешном ответе
// если в элементе с id="random-image" нет элемента img
if ($('#random-image').find('img').length===0) {
// то добавим его и установим ему в качестве src полученное с сервера значения
$('#random-image').append('<img src="' + data + '" style="max-width: 300px">');
} else {
// если элемент img есть, то просто ему установим значение src
$('#random-image img').attr('src', data);
}
};
});
};
// выполним функцию
showRandomImage();
// будем выполнять функцию каждые 5 секунд
window.setInterval(showRandomImage,5000);
});
</script>Содержимое фала random-image.php:
<?php
// находим изображения с расширением jpeg и png, расположенные в каталоге images относительно текущего пути
$images = glob(dirname(__FILE__).'/images/*.{jpeg,png}', GLOB_BRACE);
// получаем найденное количество файлов
$totalImg = count($images);
// возвращаем случайное число (изображение)
$randomImage = rand(0, $totalImg-1);
// получаем случайное изображение (URL)
$image = $images[$randomImage];
// заменяем обратный слэш на обычный
$imageUrl = str_replace('\\','/',$image);
// удаляем из пути корневую директорию документа
$imageUrl = str_replace($_SERVER['DOCUMENT_ROOT'], '', $imageUrl);
// возвращаем URL картинки
echo $imageUrl;
// завершаем работу
exit();Пример, в котором реализуем AJAX подгрузку контента.
Данные для загрузки представим на сервере в виде массива $contents. Количество загружаемых данных и позицию смещения будем определять соответственно с помощью значений переменных count и offset. Обработку полученных с сервера данных будем осуществлять посредством Promise метода done.
<!-- Элемент, в который будем загружать данные -->
<div id="contents"></div>
<!-- Кнопка для подгрузки данных в блок -->
<button class="load-ajax-content" data-content="content1">Ещё загрузить</button>
...
<!-- После подключения библиотеки jQuery -->
<script>
// после загрузки
$(function () {
// количество элементов для загрузки
var count = 2;
// начальное смещение
var offset = 0;
// выполним AJAX-запрос на сервер, используя метод GET
// contents.php - URL запроса
// count и offset - данные, отправляемые на сервер
// метод done - для обработки успешного ответа от сервера
var getContents = function () {
$.get({
url: 'contents.php',
data: {'count': count, 'offset': offset}
})
.done(function (data) { // при успешном ответе
if (data) {
var output = ''; // результат, который добавим в элемент
offset += count; // увеличиваем смещение
// если у объекта data есть свойство btn-more, то скрываем кнопку
if (data.hasOwnProperty('btn-more')) {
$('.load-ajax-content').hide();
}
// обрабатываем полученные данные
if (data.hasOwnProperty('result')) {
for (var content in data['result']) {
output += '<h2>' + data['result'][content]['pagetitle'] + '</h2>';
console.log(content);
output += '<p>' + data['result'][content]['introtext'] + '</p>';
}
}
// вставляем результат в элемент с id="contents"
$('#contents').append(output);
}
});
};
// получаем первую порцию данных и вставляем их в страницу
getContents();
// добавляем контент на страницу при нажатии на кнопку "Ещё загрузить"
$('.load-ajax-content').click(function () {
getContents();
});
});
</script>Содержимое файла contents.php:
<?php
// набор данных
$contents = array(
array(
'pagetitle' => 'Заголовок_1',
'introtext' => 'Описание_1...'
),
array(
'pagetitle' => 'Заголовок_2',
'introtext' => 'Описание_2...'
),
array(
'pagetitle' => 'Заголовок_3',
'introtext' => 'Описание_3...'
),
array(
'pagetitle' => 'Заголовок_4',
'introtext' => 'Описание_4...'
),
array(
'pagetitle' => 'Заголовок_5',
'introtext' => 'Описание_5...'
),
array(
'pagetitle' => 'Заголовок_6',
'introtext' => 'Описание_6...'
),
);
// получаем значение ключа count из GET массива (+очищающий фильтр)
$count = filter_var($_GET['count'],FILTER_SANITIZE_NUMBER_INT);
// получаем значение ключа offset из GET массива (+очищающий фильтр)
$offset = filter_var($_GET['offset'],FILTER_SANITIZE_NUMBER_INT);
// добавляем порцию данных, соответствующую ключам, в переменную output
$output = array('result' => array_slice($contents, $offset, $count));
// дополнительно добавляем в массив $output ключ btn-more, если больше нет данных
if (($offset+$count)>=count($contents)) {
$output['btn-more'] = 'hide';
}
// устанавливаем заголовок
header('Content-Type: application/json');
// кодируем массив $output в формате JSON
echo json_encode($output);
// завершаем работу скрипта
exit();функция getJSON
Функция getJSON предназначена для загрузки JSON-кодированных данных с сервера посредством HTTP GET запроса.
Функция getJSON - идентична get, у которой в качестве значения параметра dataType установлено значение "json".
Синтаксис функции getJSON:
$.getJSON(url [,data] [,success]);[]параметры в квадратных скобках являются необязательнымиurlстрока, содержащая URL адрес, на который необходимо отправить запросdataданные, которые необходимо послать на сервер в формате строки или объектаsuccessфункция обратного вызова, которая выполнится в случае успешного завершения запросаиFunction(data, textStatus, xhr)где:dataответ сервераtextStatusстатус ответаxhrXMLHTTPRequest объектdataTypeпринудительно указать тип данных, который должен прийти с сервера
Примеры использования
Пример, в котором после загрузки страницы выведем список страниц. Получать данные с сервера будем с помощью AJAX в формате JSON.
<ul id="pages"></ul>
...
<!-- После подключения библиотеки jQuery -->
<script>
// после загрузки
$(function () {
// AJAX-запрос с помощью функции getJSON
// url - адрес запроса
// success - обработка данных при успешном ответе сервера
$.getJSON({
url: 'pages.json',
success: function (data) {
// переменная, для хранения результата
var output = '';
// переберём все страницы
for (var i in data.pages) {
output += '<li><a href="' + data.pages[i].url + '">' + data.pages[i].title + "</a></li>";
}
// вставим список в элемент с id="pages"
$('#pages').empty().append(output);
}
});
});
</script>Содержимое файла pages.json:
{
"pages": [
{"title": "Название статьи 1", "url": "/pages/1.html"},
{"title": "Название статьи 2", "url": "/pages/2.html"},
{"title": "Название статьи 3", "url": "/pages/3.html"},
{"title": "Название статьи 4", "url": "/pages/4.html"},
{"title": "Название статьи 5", "url": "/pages/5.html"}
]
}Функция getScript
Функция getScript предназначена для загрузки JavaScript файла с сервера посредством HTTP GET запроса и его последующего выполнения.
Синтаксис функции getScript:
$.getScript(url [,success]);urlстрока, содержащая URL адрес, на который необходимо отправить запросsuccessфункцияFunction(script, textStatus, xhr), которая будет выполнена после прихода успешного ответа от сервера, где:scriptтекст скриптаtextStatusстатус ответаxhrXMLHTTPRequest объектdataTypeпринудительно указать тип данных, который должен прийти с сервера
Примеры использования
После загрузки страницы получим с помощью AJAX запроса скрипт и выполним его:
<!-- После подключения библиотеки jQuery -->
<script>
// после загрузки
$(function () {
$.getScript('script.js');
});
</script>Содержимое скрипта script.js:
$('body').css('background-color', 'lime');функция post
Функция post предназначена для загрузки данных с сервера посредством HTTP POST запроса.
Синтаксис функции post:
$.post(url [,data] [,success] [,dataType]);[]параметры в квадратных скобках являются необязательнымиurlстрока, содержащая URL адрес, на который необходимо отправить запросdataданные, которые необходимо послать на сервер в формате строки или объектаsuccessфункция обратного вызова, которая выполнится в случае успешного завершения запросаиFunction(data, textStatus, xhr)где:dataответ сервераtextStatusстатус ответаxhrXMLHTTPRequest объектdataTypeпринудительно указать тип данных, который должен прийти с сервера
Синтаксис функции get в формате объекта:
$.post([settings]);Применение post ничем не отличается от использования jQuery-функции get. Единственное отличие между ними - это метод, с помощью которого они отправляют данные на сервер. Функция post отправляет данные в составе тела запроса (метод POST), а get - в составе URL (метод GET).
Примеры использования
Пример, в котором пользователю предложим угадать наш цвет. Для этого ему на выбор предоставим несколько цветов с помощью радиокнопок и кнопку "Угадать". Отправку выбранного цвета на сервер будем осуществлять посредством функции jQuery post. На сервере осуществлять сравнивание "нашего цвета" и цвета, который выбрал пользователь, будем с помощью условия. В зависимости от того равны ли названия цветов, будем возвращать в качестве ответа значение success или error. На клиенте (в браузере) после получения ответа от сервера и в зависимости от его результата, будем выполнять те или иные действия. А именно, при получении ответа success, будем скрывать элементы управления, и выводить сообщение: "Да, вы угадали наш цвет!". В противном случае будем просто выводить текст: "Нет, наш цвет другой!".
<div id="guess-color">
<p>Угадайте наш любимый цвет:</p>
<div>
<input type="radio" name="color" value="orange">Оранжевый<br>
<input type="radio" name="color" value="red">Красный<br>
<input type="radio" name="color" value="green">Зелёный<br>
<input type="radio" name="color" value="blue">Синий<br>
<button id="guess" type="button">Угадать</button>
</div>
<p id="result" style="color: firebrick"></p>
</div>
...
<!-- После подключения библиотеки jQuery -->
<script>
// после загрузки
$(function () {
// при нажатии на кнопку
$('#guess').click(function () {
// в переменную color запишем выбранный цвет
// в переменную result элемент, имеющий id="result"
var color = $('input[name="color"]:checked').val(),
result = $('#result');
// очистим содержимое элемента, имеющего id="result"
result.empty();
// если пользователь не выбрал цвет, то выведем соответствующее сообщение
if (color === undefined) {
result.text('Вы не выбрали цвет!');
return;
}
// ajax-запрос с помощью jQuery-функции post
// url - адрес запроса
// data - отправляемые на сервер данные
// done - Promise метод, с помощью которого будем осуществлять обработку успешнего ответа от сервера
$.post({
url: 'guess-color.php',
data: {'color': color}
}).done(function (data) {
if (data === 'success') {
$('#guess-color *').not('#result').hide();
result.text('Да, вы угадали наш цвет!');
} else {
result.text('Нет, наш цвет другой!');
}
});
});
});
</script>Содержимое файла guess-color.php:
<?php
// переменная, значение которой будем возвращать клиенту
$output = 'error';
// наш цвет
$ourColor = 'green';
// цвет, который выбрал пользователь
$color = $_POST['color'];
// запишем в переменную output строку success, если пользователь угадал цвет
if ($color == $ourColor) {
$output = 'success';
}
// выводим ответ
echo $output;Пример, в котором реализуем систему приветствия пользователя. Пока пользователь не введёт своё имя, будем приветствовать его как гостя. Определять имеет ли текущий пользователь имя, а также его отправку на сервер будем через AJAX (jQuery функцию post). На стороне сервера сохранять имя пользователя будем посредством ссесий.
<div id="user">
<p id="userinfo">Привет, <span id="username" style="font-weight: bold"></span>.</p>
<input type="text" name="name" title="Имя пользователя">
<input type="button" name="send" value="Отправить">
</div>
...
<!-- После подключения библиотеки jQuery -->
<script>
// после загрузки
$(function () {
// функция для получения имени пользователя с помощью AJAX,
// а также для отправки значения поля input с name="name"
var getUserName = function(){
// получаем имя пользователя из поля input
var user = $('input[name="name"]').val();
// выполняем ajax-запрос на сервер
$.post({
url: 'username.php', // адрес зароса
data: {username: user}, // отправляемые данные на сервер
success: function (data) { // обработка данных при успешном ответе сервера
$('#username').text(data); // добавляем в элемент (id="username") имя пользователя
if (data!=='гость') { // скрываем элементы input, если пользователь не гость
$('#user input').hide();
}
}
});
};
// выполнить функцию getUserName
getUserName();
// при нажатию на кнопку "Отправить"
$('input[name="send"]').click(function(){
// выполнить функцию getUserName
getUserName();
});
});
</script>Содержимое файла username.php:
<?php
// стартуем новую сессию
session_start();
// создаём переменную $username и помещаем в неё строковое значение гость
$username = 'гость';
// если существует сессионная переменная username
if (isset($_SESSION['username'])) {
// то присвоим переменной $username её значение
$username = $_SESSION['username'];
}
// если в суперглобальном массиве POST значение ключа username не пустое значение, то
if (!empty($_POST['username'])) {
// сохраним в переменную $username имя пользователя
$username = $_POST['username'];
// сохраним имя пользователя в сессионную переменную username
$_SESSION['username'] = $username;
}
// выведем имя пользователя (ответ, который получит клиент)
echo $username;