Ajax на практике.

Основы передачи данных.

Данную статью начал по просьбам новичков, которые только начинают осваивать JS/jQuery и, рано или поздно, сталкиваются с проблемой, как же на практике использовать технологию Ajax. В этой части, я попробую простым языком (пусть не смущает это пользователей продвинутых) объяснить, как применить данную "фишку" с использованием библиотеки jQuery в своих проектах.

Итак... В jQuery есть несколько методов, которые осуществляют запросы к серверной части сайта без перезагрузки страницы. Мы не будем рассматривать каждый метод отдельно "под микроскопом", по той простой причине, что все они являются урезанными/сокращенными функция метода $.ajax(). Для начала, давайте помотрим на код ниже, а дальше разберем его подробней:

HTML (файл index.html)

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Cool page site</title>
  <script src="/js/jquery.js"></script><!-- Библиотека jQuery -->
  <script src="/js/script.js"></script><!-- Наш JS-код -->
</head>
  <body>
    <button id="btn">Кликни меня!</button><!-- Кнопка для старта AJAX-запроса -->
    <div id="output"></div><!-- Блок для вывода результатов -->
  </body>
</html>

В этом файле у нас подключена библиотека jQuery, файл с нашим JS-кодом, кнопка (id="btn"), по нажатию на которую будет запускаться ajax-запрос и блок (id="output"), в который мы будем выводить результат работы ajax-запроса

JS/jQuery (файл script.js)

$(function(){
  var output = $('#output'); // блок вывода информации
  $('#btn').on('click', function(){
    $.ajax({
      url: 'path/to/handler.php', // путь к php-обработчику
      type: 'POST', // метод передачи данных
      dataType: 'json', // тип ожидаемых данных в ответе
      data: {key: 1}, // данные, которые передаем на сервер
      beforeSend: function(){ // Функция вызывается перед отправкой запроса
        output.text('Запрос отправлен. Ждите ответа.');
      },
      error: function(req, text, error){ // отслеживание ошибок во время выполнения ajax-запроса
        output.text('Хьюстон, У нас проблемы! ' + text + ' | ' + error);
      },
      complete: function(){ // функция вызывается по окончании запроса
        output.append('<p>Запрос полностью завершен!</p>');
      },
      success: function(json){ // функция, которая будет вызвана в случае удачного завершения запроса к серверу
        // json - переменная, содержащая данные ответа от сервера. Обзывайте её как угодно ;)
        output.html(json); // выводим на страницу данные, полученные с сервера
      }
    });
  });
});

Этот код я сразу прокомментировал, поэтому каких-то особых вопросов возникнуть не должно. Единственное, что хочу отметить для любителей копипаста, то что нужно указывать реальный путь к обработчику в параметре url. И еще один момент - в примере мы передаем данные прописанные вручную (ключ "key" со значением "1"), но в реальных проектах, эти данные подхватываются из каких-либо источников, но об этом поговорим дальше.

PHP-обработчик (файл handler.php)

<?php
if(isset($_POST['key'])){
  $req = false; // изначально переменная для "ответа" - false
  $key = (int)$_POST['key']; // мини-защита - приводим к типу INT
  if($key > 0) $req = '<p>Получили значение равное: <strong>' . $key . '</strong></p>'; // присваиваем переменной нужные данные
  echo json_encode($req); // возвращаем данные ответом, преобразовав в JSON-строку
  exit; // останавливаем дальнейшее выполнение скрипта
}

И наконец, PHP-обработчик, в котором обрабатываются данные запроса и формируется ответ, который возвращается обратно на растерзание нашему JS-коду. Тут все предельно просто. Почему мы преобразовываем данные в JSON-строку - потому, что мы указали в параметре dataType, что именно такие данные нужно ожидать в ответе. А почему именно такие - потому, что это наиболее удобный формат для дальнейшей работы: можно передавать как строку, так и массив данных или же сразу подготовленный HTML-код для вставки на страницу.

Что же будет происходить на каждом этапе:

  1. По нажатию на кнопку, начинает работать JS-код
  2. Перед отправкой, сработает функция в beforeSend. Она выведет в блок "output" сообщение о начале запроса
  3. Если что-то пойдет не так (например, путь к обработчику указан не верно), то сработает функция error и в блок выведется ошибка
  4. Если всё нормально, то запустится функция success и в блоке появится результат нашего запроса
  5. На последнем этапе - выполнится функция complete, которая добавит в блок вывода сообщения об окончании AJAX-запроса

*beforeSend и complete можно использовать, например, для вывода какой-нибудь картинки-прелоадера, чтоб давать пользователю понять о том, что процесс идет. И это далеко не все полезные опции метода $.ajax(), но тот необходимый минимум, который позволит правильно и грамотно функционировать методу.

И еще один полезный метод jQuery, который достоин внимания в рамках этой тема - $.ajaxSetup(). Если в вашем проекте будет множество Ajax-запросов, то этот метод, поможет избежать постоянного перечисления одинаковых установок метода $.ajax(). К примеру, если у вас один файл-обработчик, используете один и тот же метод передачи данных, принимаете данные в одинаковом формате и т.д., то это прописывается один раз в методе $.ajaxSetup() и в дальнейшем все эти установки, будут автоматически применены ко всем запросам.

// Описываем общие установки для всех ajax-запросов
$.ajaxSetup({
  url: 'path/to/handler.php', // путь к php-обработчику
  type: 'POST', // метод передачи данных
  dataType: 'json', // тип ожидаемых данных в ответе
  beforeSend: function(){ // Функция вызывается перед отправкой запроса
    output.text('Запрос отправлен. Ждите ответа.');
  },
  error: function(req, text, error){ // отслеживание ошибок во время выполнения ajax-запроса
    output.text('Хьюстон, У нас проблемы! ' + text + ' | ' + error);
  },
  complete: function(){ // функция вызывается по окончании запроса
    output.append('<p>Запрос полностью завершен!</p>');
  }
});

$(function(){
  var output = $('#output');
  $('#btn').on('click', function(){
    // Теперь, вся запись любого запроса, будет сводится 
    // к параметрам data и success: данные, которые передаём 
    // и обработка ответа от сервера
    $.ajax({
      data: {key: 1}, // данные, которые передаем на сервер
      success: function(json){ // функция, которая будет вызвана в случае удачного завершения запроса к серверу
        output.html(json);
      }
    });
  });
});

 


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

Incode Pro logo

19 комментариев

sash 13.12.2014 16:22
Можно в двух словах о формате json? в каких случаях необходимо его использовать?
Incode 07.01.2015 21:36
в каких случаях необходимо его использовать?

@sash, вопрос не корректный. Формат JSON даёт возможность представлять, передавать массивы или объекты в строковом формате. Если уж очень просто, то массив становиться строкой. В каких случаях это применять - решает разработчик в каких-то определенных случаях. К примеру, если нужно в ответ на ajax-запрос вернуть массив, то его нужно предварительно преобразовать в JSON. Или если нужно сохранить массив в БД, то так же можно это сделать, предварительно преобразовав в JSON-строку или сериализовать с помощью функции php serialize(). В общем, всё решается по месту.
Гость 13.01.2015 18:50
День добрый! Получаю вот так данные из кукисов
var vhMap = $.cookie('notepad').split(',');


как мне их правильно запихнуть в data: для отправки на сервер?
Заранее благодарю!
Incode 13.01.2015 20:32
как мне их правильно запихнуть в data: для отправки на сервер?

$.ajax({
    /* прочие параметры */,
    data: {some_key: vhMap}
});
some_key - ключ, по которому будете принимать данные на сервере. Если оставить такое название, то на серере ловим или $_POST['some_key'], или $_GET['some_key'], в зависимости от метода передачи.
Гость 21.07.2015 18:59
Скачал исходник с Вашего сайта и попробовал его запустить но вылезла такая ошибка(((

Хьюстон, У нас проблемы! parsererror | SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Запрос полностью завершен!

Консоль
незакрытый маркер handler.php:1
Incode 21.07.2015 19:05
вылезла такая ошибка
Первое, что попробуйте - это убедиться, что файл-обработчик, в данном случае "handler.php", в кодировке UTF-8 без BOM. Я не знаю, каким редактором вы пользуетесь, но если есть Notepad++, то там можно и проверить, открыв в менюшке "Кодировки", и преобразовать документ в нужный формат: "Преобразовать в UTF-8 без BOM".
Гость 21.07.2015 20:51
"Преобразовать в UTF-8 без BOM".

Все равно не помогает
Incode 21.07.2015 21:30
Все равно не помогает
Еще раз перепроверил код из примера, который даю на скачивание и ошибок не обнаружил. Теперь надо смотреть, что делали вы. Изменяли ли php-код обработчика? Если да, то показывайте. На чем тестировали пример - локальный сервер (сами устанавливали или OpenServer, Denwer, XAMPP и т.д.) или хостинг? Какая кодировка задана для сайта? Желательно для всего сайта UTF-8 и это можно сделать, записав в .htaccess следующую строку:
AddDefaultCharset UTF-8
P.S. В общем и целом, чтоб вы понимали, такая ошибка указывает на не валидную json-строку. Это может быть вызвано как неправильным формированием ответа, так и ошибкой, которая произошла по ходу выполнения сценария на сервере. Откройте консоль и посмотрите, какие данные приходят ответом.
Гость 24.10.2015 20:31
спасибо, всё понятно.
Гость 21.09.2016 22:32
Ошибка в слове "Единсьвенное" :)
Incode 21.09.2016 23:13
Ошибка в слове "Единсьвенное" :)
Спасибо, исправил
Гость 25.09.2016 17:16
Здравствуйте.
Спасибо за пример, однако у меня с ним возникла проблема: php-обработчик ничего не возвращает. Пробовал в нем написать просто
echo ("текст");

но даже и это не выводится. В функцию для sucsess добавил для наглядности:
success: function(json){
        output.html(json);
        alert(json);

- алерт пишет null. Никаких ошибок. Понимаю, что проблема либо в сервере, либо в CMS (использую Wordpress), однако в какую сторону копать уже и не знаю.
Incode 25.09.2016 20:12
Пробовал в нем написать просто echo ("текст");
Если используете код из примера, то возвращать ответ необходимо в JSON-формате. т.е.:
echo json_encode('текст');
Если же ответ будет в другом формате, то его нужно указать в параметре dataType. Нарпимер, dataType: 'html', dataType: 'xml' и т.д. Так же можно вообще не указывать тип ожидаемых данных. В этом случае, парсер должен будет сам определить тип, но всё-таки лучше указывать самому.
однако в какую сторону копать уже и не знаю
В первую очередь, проверьте путь к обработчику, убедитесь, что запрос до него доходит. Отладку делайте обязательно с открытой консолью, чтобы видеть возможные ошибки.
Гость 17.06.2017 23:18
А разве не так нужно обрамлять тело php-обработчика? Ведь об этом четко сказано в сообщении об ошибке "Консоль незакрытый маркер handler.php:1"
<?php
...
?>
Incode 18.06.2017 04:49
А разве не так нужно
Не желательно.
Теги PHP:
Если файл содержит только код PHP, предпочтительно опустить закрывающий тег в конце файла.
Гость 07.07.2017 19:45
Спасибо, только начал учить функцию ajax, благодаря вашему коду, увидел свою ошибку. Я в параметре data поставил двойные кавычки, вместо фигурных. Пол часа мучался)
alex3c04 19.12.2019 19:42
Здравствуйте.
Не могу разобраться...
У меня вот такой код
<form method='post'><button id='btn' name='id' value='".$open[0]."'>Кликни меня!</button></form>


Как мне передать значение value вот сюда
data: {key: 1}
Гость 27.10.2020 14:20
помотрите

отсутствует "с"
посмотрите
Гость 27.10.2020 14:25
Спасибо за замечательное и простое объяснение механизма на примере!!!

От себя добавлю - вместо php скрипта на стороне сервера может быть любая программа, отвечающая на запросы - как вы напишите так и будет.
Это может быть и pyton скрипт и .exe под вин и демон nix написанный на c++
Ваш комментарий:
X