Веб-разработка 27/01/2022

AJAX и jQuery: примеры отправки данных

Автор, розробник та перекладач

Редакция Highload разобралась, как в jQuery отправлять AJAX-запросы POST и GET, а также работать с JSON. В этом материале мы получим базовые сведения о работе с популярной связкой AJAX и jQuery, которая часто встречается в современной веб-разработке.

Содержание:
1. Что такое Ajax jQuery
2. Преимущества Ajax jQuery
3. Синтаксис и методы Ajax jQuery
4. Отправка формы через AJAX
5. Работа с JSON
6. Загрузка JS средствами AJAX
7. Синхронные запросы AJAX
8. Отправка HTTP-заголовков
9. Обработка ошибок
Итоги

1. Что такое Ajax jQuery

AJAX — это технология обмена данных с сервером без обновления страницы. AJAX расшифровывается как Asynchronous JavaScript and XML (асинхронный JavaScript и XML). Более общий обзор по AJAX мы писали вот здесь, а в этом материале сосредоточимся на технике отправки данных.

Как понятно из названия, обмен данными с сервером происходит асинхронно. То есть он не влияет на взаимодействие пользователя со страницей. Это значит, что после отправки запроса пользователь продолжает взаимодействовать со страницей.

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

В jQuery представлен полный набор возможностей для применения AJAX. С помощью этих методов вы можете запросить у сервера текст, код HTML, XML или JSON, отправив запрос HTTP Get или Post. Полученные данные можно вывести в любом элементе HTML. Помочь разобраться в особенностях этого процесса, вам может специальный курс от наших партнеров Mate Academy.

2. Преимущества Ajax jQuery

Несмотря на то, что AJAX — самостоятельная технология, jQuery значительно упрощает работу над кодом для асинхронного взаимодействия с сервером.

С помощью jQuery очень легко писать код для отправки AJAX-запросов. На «чистом» JavaScript приходилось писать большие фрагменты кода.

Ajax jQuery совместим с различными браузерами. Ранее нужно было писать кастомный код, учитывая разную реализацию поддержки AJAX в различных браузерах. Большинство браузеров поддерживали объект XMLHttpRequest, а в Internet Explorer запросы отправлялись через ActiveXObject, причем в зависимости от версии IE это мог быть объект Msxml2.XMLHTTP.6.0, Msxml2.XMLHTTP.5.0, Msxml2.XMLHTTP.4.0, Msxml2.XMLHTTP.3.0, Msxml2.XMLHTTP или Microsoft.XMLHTTP.

В Ajax jQuery реализованы удобные методы и события. Они позволяют контролировать взаимодействие с сервером, загружать данные в различных форматах (текст, JSON, XML, HTML и сценарии). Создавать такой код вручную — сложная и утомительная работа даже для опытных программистов.

Онлайн-курс "Управління фінансами у бізнесі" від Laba.

Розробіть фінансову стратегію для досягнення більшого прибутку.Досвід і фідбек від лектора з 11-річним досвідом у фінансовому управлінні в N-iX, SoftServe та Nestlé.

Детальніше про курс

3. Синтаксис и методы Ajax jQuery

load()

Метод jQuery load() загружает данные с сервера в выбранный элемент.

Его синтаксис таков:

$(selector).load(URL,data,callback);

Здесь selector — это селектор jQuery, а параметры имеют следующее назначение:

Параметр	Описание
`URL`	Обязательный параметр. URL-адрес, который требуется загрузить.
`data`	Необязательный параметр. Данные в формате пар ключей и значений для отправки вместе с запросом.
`callback`	Необязательный параметр. Функция обратного вызова, которую требуется выполнить после завершения работы метода `load()`.

Например, для загрузки содержимого файла data.txt в элемент с идентификатором target код будет таким:

$('#target').load('data.txt');

Приведем полный пример кода. Создадим HTML-документ со ссылкой на jQuery, а также на стили и код JavaScript. Определим в нем элемент div с id="target", в который требуется загрузить новое содержимое в виде кода HTML из текстового файла.

Файл load.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Пример load()</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="load-html.js"></script>
</head>
<body>
    <h1>Метод jQuery load()</h1>
    <div id="target"><h2>Исходный текст</h2><p id="p1">Нажмите кнопку, чтобы обновить данные.</p></div>
    <button type="button" id="btnLoad">Загрузить HTML</button>
</body>
</html>

Выделим элемент с помощью стиля.

Файл style.css

#target {
    margin:  20px 0px;
    padding:  20px;
    width:  400px;
    background-color: lightgreen;
    border: 1px solid green;
}

Назначим действие загрузки для кнопки.

Файл load-html.js

$(document).ready(function () {
    $('#btnLoad').click(function()    {
        $('#target').load('data.txt);
    });
});

Определим новое содержимое, которое будет загружено с сервера.

Файл data.txt

<h2>Ответ в виде HTML</h2>
<p id="p1">Это ответ, полученный от сервера.</p>

Вот результат работы этого кода:

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

Загрузка фрагмента данных

К параметру URL можно добавить селектор jQuery, чтобы указать отдельный элемент, который требуется получить. Например, чтобы получить из файла только абзац без заголовка, можно переписать вызов таким образом:

$('#target').load('data.txt #p1');

После нажатия кнопки в целевом блоке будет только строка из абзаца.

Параметр data

В параметре data можно передать данные на сервер. Если указано строковое значение, то используется метод GET, а если указан объект, то применяется метод POST.

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

Файл load-variant.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Пример load() с данными</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="load-variant.js"></script>
</head>
<body>
    <h1>Метод jQuery load() с данными</h1>
    <div id="target"><h2>Исходный текст</h2><p id="p1">Нажмите кнопку, чтобы обновить данные.</p></div>
    <button type="button" id="btnLoad1">Загрузить код 1</button>
    <button type="button" id="btnLoad2">Загрузить код 2</button>
</body>
</html>

Файл load-variant.js

$(document).ready(function () {
    $('#btnLoad1').click(function()    {
        $('#target').load('get_data.php');
    });
 
    $('#btnLoad2').click(function()    {
        $('#target').load('get_data.php', {'variant': 2});
    });
});

При нажатии первой кнопки будет отправлен запрос без параметра data (если он не указан, применяется метод GET).

Файл get_data.php

<?php
// Получить вариант кода для возврата клиенту
$variant = 1;
if(isset($_REQUEST["variant"])){
    $variant = $_REQUEST["variant"];
}
 
// Получить метод запроса
$method = $_SERVER['REQUEST_METHOD'];
 
if ($variant === 1) {
?>
<h2>Вариант 1</h2>
<p>Код получен с помощью метода <?=$method?>.</p>
<?php
} else {
?><h2>Вариант 2</h2>
<p>Это ответ, полученный с помощью метода <?=$method?>.</p>
<?php
}
?>

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

Параметр callback

Функция обратного вызова выполняется по завершении работы метода load() и имеет три параметра: responseTxt с контентом ответа при успешном вызове, statusTxt с состоянием вызова и xhr с объектом XMLHttpRequest.

Онлайн-курс "Проджект-менеджер креативних індустрій" від Skvot.

Дізнайтесь як балансувати між творчою командою та клієнтом, прораховувати бюджети й ризики та запускатись вчасно.Далі — розпочніть кар’єру PM у креативі.

Детальніше про курс

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

$(document).ready(function () {
  $('#btnLoad').click(function()    {
    $('#target').load('data.html', function(responseTxt, statusTxt, xhr){
      if(statusTxt == "success")
        alert("Код с сервера загружен успешно!");
      if(statusTxt == "error")
        alert("Ошибка: " + xhr.status + ": " + xhr.statusText);
      });
    });
});

Теперь после нажатия на кнопку будет выводиться сообщение с информацией о состоянии вызова.

Как мы уже видели на примере метода load(), запросы к серверу можно отправлять как с помощью метода GET, так и с помощью метода POST. В jQuery есть отдельные методы для каждого HTTP-метода. Рассмотрим их подробнее.

$.get()

Метод jQuery $.get() запрашивает данные с сервера с помощью HTTP-запроса GET. Он принимает два параметра: URL и callback.

URL — адрес, по которому нужно обратиться.
callback — имя функции, которая выполняется в случае успешного выполнения запроса.

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

Файл get.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Пример $.get()</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
 
$(document).ready(function(){
 
 $("#btnGet").click(function(){
   $.get("get.php", function(data, status){
     alert("Данные: " + data + "\nСостояние: " + status);
   });
 });
 
});
 
</script>
</head>
<body>
 <button id="btnGet">Отправить запрос HTTP GET</button>
</body>
</html>

Файл get.php

Онлайн-курс "Ціноутворення для виробників та ритейлу" від Laba.

Масштабуйте бізнес, незалежно від конкурентів, завдяки оптимізації стратегії ціноутворення.Досвід та фідбек від Senior Product Manager Pricing Platform у Zalando.

Детальніше про курс

<?php
// Получить метод запроса
$method = $_SERVER['REQUEST_METHOD'];
?>
Данные получены методом <?=$method?>.

После нажатия кнопки получаем сообщение:

$.post()

Метод jQuery $.post() запрашивает данные с сервера с помощью HTTP-запроса POST. Он принимает три параметра, как и load(): URL, data, callback. Функция callback принимает те же параметры, что и соответствующая функция в методе load().

Приведем простой пример использования метода jQuery $.post().

Файл post.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Пример $.post()</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
 
 $("#btnPost").click(function(){
   $.post("post.php",
   {
     lib: "jQuery",
     req: "$.post()"
   },
   function(data, status){
     alert("Данные: " + data + "\nСостояние: " + status);
   });
 });
 
});
</script>
</head>
<body>
 <button id="btnPost">Отправить запрос HTTP POST</button>
</body>
</html>

Файл post.php

<?php
// Получить метод запроса
$method = $_SERVER['REQUEST_METHOD'];
?>
Данные получены методом <?=$method?>.
<?php
if ($method === 'POST'){
    $lib = $_REQUEST['lib'];
    $req = $_REQUEST['req'];
?>
Библиотека: <?=$lib?>, метод: <?=$req?>
<?php    
}
?>

После нажатия кнопки получаем сообщение:

4. Отправка формы через AJAX

Отправить форму с помощью jQuery можно несколькими способами. Допустим, есть форма с полями для ввода имени и пароля. Типичная задача: нужно проверить, не пусты ли эти поля (процедура валидации входных данных).

Курс Frontend розробки від Mate academy.

Front-end розробник одна з найзатребуваніших професій на IT ринку. У Mate academy ми навчимо вас розробляти візуально привабливі та зручні інтерфейси. Після курсу ви зможете створювати вебсайти і застосунки, що вразять і користувачів, і роботодавців.

Дізнатися більше про курс

Файл form.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Пример отправки формы</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="form-post.js"></script>
<style type="text/css">
#msg {
 padding-top: 5px;
 color: red;
}
</style>
</head>
<body>
 <form id="form">
   <div>
     <label for="name">Имя:</label><br>
     <input type="text" name="name">
   </div>
   <div>
     <label for="password">Пароль:</label><br>
     <input type="password" name="password">
   </div>
   <div><input type="submit" value="Отправить"></div>
 </form>
 <div id="msg"></div>
</body>
</html>

В этом файле создана форма и предусмотрено поле для вывода ответа сервера.

Файл form.php

<?php
if(empty($_POST['name'])){
    echo 'Укажите имя.';
}elseif(empty($_POST['password'])){
    echo 'Укажите пароль.';
}else{
    echo 'Вход...';
}
?>

На сервер помещена логика проверки заполнения полей.

Мы можем воспользоваться уже знакомым методом $.post().

Файл form-post.js

$(document).ready(function () {
 $("#form").on("submit", function () {
   $.post('form.php', $('#form').serialize(), function(data, status){
     $("#msg").html(data);
   });
 });
});

Данные передаются ему во втором параметре. Это легко делается с помощью метода serialize(), который применяется к форме.

Запомните, что этот метод передает только значения полей, пригодных для передачи (successful controls). Значение кнопки submit не передается, потому что форма передается без ее использования. Чтобы значение элемента формы было включено в сериализованную строку, он должен иметь атрибут name. Значения флажков и переключателей включаются, только если они отмечены.

Также можно воспользоваться методом $.ajax().

Практичний інтенсивний курс з дизайну - Design Booster від Powercode academy.

Навчіться дизайну з нуля за 3 місяці і заробляйте перші $1000, навіть якщо ви не маєте креативного мислення, смаку або вміння малювати. Отримайте практичні навички, необхідні для успішної кар'єри в дизайні.

Зарееструватися

Файл form.js

$(document).ready(function () {
 $("#form").on('submit', function (){
   $.ajax({
     url: 'form.php',
     type: 'post',
     dataType: 'html',
     data: $(this).serialize(),
     success: function(data){
       $('#msg').html(data);
     }
   });
 });
});

В нем можно передать больше параметров запроса. Для использования этого сценария измените ссылку на файл сценария в файле form.html.

Если в результате проверки какое-то поле оказывается пустым, выдается соответствующее сообщение в элементе div с идентификатором msg.

5. Работа с JSON

Для удобной работы с JSON используется метод .getJSON(). Он принимает URL-адрес, данные в виде строки или объекта, а также функцию обратного вызова, выполняемую при успешном выполнении запроса. Этот метод отправляет запрос HTTP GET.

Полученные данные можно использовать прямо в коде JavaScript с точечной записью.

Файл json.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Пример $.getJSON()</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="json.js"></script>
</head>
<body>
    <h1>Метод $.getJSON()</h1>
    <div id="target"><h2>Исходный текст</h2><p id="p1">Нажмите кнопку, чтобы обновить данные.</p></div>
    <button type="button" id="btnGetJSON">Загрузить JSON</button>
</body>
</html>

Файл data.json

{
    "title": "Ответ JSON",
    "message": "Это сообщение из файла, который получен от сервера."
}

Файл style.css используем тот же, что и для примера load().

Файл json.js

$(document).ready(function () {
 $("#btnGetJSON").click(function (){
    $.getJSON('data.json', function(data) {
        $("#target h2").html(data.title);
        $("#target p").html(data.message);
    });
 });
});

Получив данные, сценарий поместит заголовок в заголовок второго уровня, а сообщение — в абзац. Эти данные определены в приведенном выше файле данных (или могут возвращаться серверным сценарием). Обращаться к ним просто: к имени аргумента функции обратного вызова через точку добавляем ключ из файла.

6. Загрузка JS средствами AJAX

Иногда требуется загрузить код JavaScript после загрузки контента страницы или по требованию пользователя. Это можно сделать с помощью метода $.getScript(). Подробнее о нем можно прочитать в документации. Сценарий загружается с помощью запроса HTTP GET.

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

$(document).ready(function () {
 $("#btnGetScript").click(function (){
        $.getScript('/second-script.js');
 });
});

А дополнительный сценарий будет менять контент в заданных элементах:

$("#target h2").html('Подгрузка сценария');
$("#target p").html('Контент изменен с помощью $.getScript().');

7. Синхронные запросы AJAX

Обычно AJAX используется для асинхронного выполнения запросов. Это значит, что пользователь может продолжать работать со страницей, пока параллельно в фоновом режиме выполняется запрос. Если же, наоборот, запрос нужно выполнить синхронно, то следует указать параметр async: false.

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

var message = '';
 
$.ajax({
    url: '/sync.php',
    method: 'get',
    dataType: 'html',
    //async: false,
    success: function(data){
        message = data;
    }
});
 
alert(message);

Но стоит раскомментировать строку async: false, и при перезагрузке страницы будет выдано сообщение с текстом, полученным из sync.php.

8. Отправка HTTP-заголовков

Метод $.ajax() позволяет указывать заголовки HTTP-запроса. Для этого используется параметр headers.

Онлайн-курс "Кібербезпека та захист інформаційних систем" від robot_dreams.

Навчіться вибудовувати захист, прораховувати можливі ризики та грамотно менеджерити процеси безпеки — під менторством експерту з 13-річним досвідом.

Детальніше про курс

В этом примере на сервер отправляется значение, хранящееся в поле ввода текста с id="header".

$(document).ready(function () {
 $("#btnSend").on('click', function (){
   $.ajax({
     url: 'header.php',
     type: 'post',
     dataType: 'html',
     headers: {'x-my-header': $('#header').val()},
     success: function(data){
       $('#target').html(data);
     }
   });
 });
});

Значение передается в заголовке x-my-header, и в файле на сервере к нему можно обратиться так:

$_SERVER['HTTP_X_MY_HEADER'];

Символы переводятся в верхний регистр, и к имени добавляется префикс «HTTP_».

9. Обработка ошибок

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

success: function(data){
    $('#target').html(data);
},
error: function (jqXHR, exception) {
    if (jqXHR.status === 403) {
        alert('Запрещено. У вас нет прав доступа к содержимому. (403)');
    } else if (jqXHR.status == 404) {
        alert('Запрошенная страница не найдена (404).');
    } else if (jqXHR.status == 500) {
        alert('Внутренняя ошибка сервера (500).');
    } else if (exception === 'parsererror') {
        alert('Ошибка анализа JSON.');
    } else if (exception === 'timeout') {
        alert('Тайм-аут.');
    } else if (exception === 'abort') {
        alert('Выполнение запроса Ajax прервано.');
    } else {
        alert('Неизвестная ошибка. ' + jqXHR.responseText);
    }
}

Кроме того, можно назначить общий обработчик ошибок с помощью $.ajaxSetup().

$.ajaxSetup({
    error: function (jqXHR, exception) {
        ...
    }
});

Итоги

jQuery предоставляет удобные средства для работы с запросами AJAX. Благодаря этому вам не придется изобретать велосипед при написании своего кода. Методы Ajax в jQuery легко поддаются освоению, и при небольших усилиях вы сможете довольно быстро найти им подходящее решение.

В заключение напоминаем банальную, но, к сожалению, зачастую игнорируемую новчиками мысль: для более полного знакомства с Ajax jQuery очень желательно хорошее знание JavaScript, поэтому полезно будет повысить свою квалификацию в этом направлении.