Cокращённые Ajax методы jQuery
В этой статье познакомимся с сокращёнными AJAX методами jQuery: load, get, getJSON, getScript и post. Эти методы позволяют очень просто осуществлять необходимые AJAX запросы и в отличие от функции ajax, для их написания требуется меньшее количество строчек кода.

jQuery - метод load
Метод load
предназначен для получения данных с сервера по указанному адресу URL и помещения их в один или несколько выбранных элементов.
Метод load
имеет следующий синтаксис:
.load(url [,data] [,complete]) // параметры в квадратных скобках являются необязательными //url - строка, содержащая URL адрес, на который необходимо отправить запрос //data (необязательный параметр) - данные, которые необходимо послать на сервер (в формате строки или объекта) //complete – дополнительные действия, которые необходимо выполнить после завершения запроса (указываются посредством функции Function(responseText, textStatus, xhr)) // responseText - ответ сервера // textStatus - статус ответа // xhr - XMLHTTPRequest объект
В большинстве случаев для отправки запроса метод load
использует GET. Но он также может использовать и метод POST. Это происходит только тогда, когда данные для отправки на сервер указываются не в формате строки, а посредством объекта.
Примеры использования метода load
1. Вставить содержимое файла asidenav.tpl
в блок c id="asidenav"
после загрузки DOM страницы:
<div id="asidenav"></div> ... <!-- После подключения библиотеки jQuery --> <script> // после загрузки DOM страницы $(function() { // вставить в элемент (#asidenav) контент файла asidenav.tpl // если файл не находится в той же директории что и HTML документ, то необходимо дополнительно указать путь к нему $('#asidenav').load('asidenav.tpl'); }); </script>
2. Загрузить часть файла 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>
3. Загрузить в элемент, имеющий 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();
4. Рассмотрим вышеприведённый пример, в котором передавать данные будем не в формате строки, а посредством объекта. Кроме этого выведем в консоль браузера дополнительные данные, такие как ответ сервера, статус ответа и объект 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); //...
jQuery - функция get
Функция get
предназначена для загрузки данных с сервера посредством HTTP GET запроса.
Синтаксис функции get
:
$.get(url [,data] [,success] [,dataType]); // назначение параметров url и data аналогичны тем, которые приведены в описании функции load // success - функция обратного вызова, которая выполнится в случае успешного завершения запроса: function(data, textStatus, xhr): // data - ответ сервера // textStatus - статус ответа // xhr - XMLHTTPRequest объект // dataType - принудительно указать тип данных, который должен прийти с сервера. // 2 способ передачи параметров функции 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() { // ещё одни действия при успехе или при ошибке });
Примеры использования функции get
1. Подгрузим в 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>
2. 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();
3. Пример, в котором реализуем 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();
jQuery - функция getJSON
Функция getJSON
предназначена для загрузки JSON-кодированных данных с сервера посредством HTTP GET запроса.
Функция getJSON
- идентична get
, у которой в качестве значения параметра dataType
установлено значение "json".
Синтаксис функции getJSON
:
$.getJSON(url [,data] [,success]); // назначение параметров url, data и success аналогичны тем, которые приведены в описании функции get
Пример c использованием функции getJSON
Пример, в котором после загрузки страницы выведем список страниц. Получать данные с сервера будем с помощью 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"} ] }
jQuery - функция getScript
Функция getScript предназначена для загрузки JavaScript файла с сервера посредством HTTP GET запроса и его последующего выполнения.
Синтаксис функции getScript
:
$.getScript(url [,success]); // url - URL-адрес скрипта // success - функция Function(script, textStatus, xhr), которая будет выполнена после прихода успешного ответа от сервера // script - текст скрипта // textStatus - статус ответа // xhr - объект XMLHTTPRequest
Пример c использованием функции getScript
После загрузки страницы получим с помощью AJAX запроса скрипт и выполним его:
<!-- После подключения библиотеки jQuery --> <script> // после загрузки $(function () { $.getScript('script.js'); }); </script>
Содержимое скрипта script.js
:
$('body').css('background-color', 'lime');
jQuery - функция post
Функция post предназначена для загрузки данных с сервера посредством HTTP POST запроса.
Синтаксис функции post
:
$.post(url [,data] [,success] [,dataType]); // назначение параметров url, data, success, dataType аналогичны тем, которые приведены в описании функции get // 2 способ передачи параметров функции post (в формате объекта) $.post([settings]);
Применение post
ничем не отличается от использования jQuery-функции get
. Единственное отличие между ними - это метод, с помощью которого они отправляют данные на сервер. Функция post
отправляет данные в составе тела запроса (метод POST), а get
- в составе URL (метод GET).
Примеры c использованием функции post
1. Пример, в котором пользователю предложим угадать наш цвет. Для этого ему на выбор предоставим несколько цветов с помощью радиокнопок и кнопку "Угадать". Отправку выбранного цвета на сервер будем осуществлять посредством функции 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;
2. Пример, в котором реализуем систему приветствия пользователя. Пока пользователь не введёт своё имя, будем приветствовать его как гостя. Определять имеет ли текущий пользователь имя, а также его отправку на сервер будем через 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;
Текущие шаблон- заготовки нужны чтобы не дублировать в каждой js-функции нужный подгружаемый кусок кода.
Я конечно использую другой вариант: это в success обращаюсь по id к скрипту, а точнее к После уже данные обрабатываются и возвращаются обратно в js, далее вывожу на страницу в блок с заданным id.
Подскажите, как более правильно, оптимально и грамотно подойти к решению данной задачи?
Можно, например, выполнить так:
1. Шаблон (page.tpl):
2. PHP-сценарий, возвращающий некоторые данные в формате JSON:
3. HTML-страница (JavaScript сценарий):
а следом .done добавляет обработчик при успешном выполнении запроса.
В данной ситуации лучше использовать get, а не post?
прокручиваю массив чтобы при каждой итерации обращаться по нужному ключу к присвоенному массиву уже с нужными данными.
Далее использую Я в не могу обратиться к data.result?
Дело в том что, мне приходится получить в первую очередь пакет данных от сервера, а потом в цикле подставить в путь имя вызываемого файла которое хранится в массиве приходящем от сервера.
И обязательно добавлять знак-% в ключи приходящие с сервера? Без них ключи не отработают на странице и значение ключей нормально не вывести?
Как правильно можно сделать в данной ситуации?
Знак процента добавлять в начало и конец не обязательно, можете придумать свои плейсхолдеры.