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

jQuery - Использование сокращённых 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;