Передача GET параметра через fetch в JavaScript

Технология AJAX делает сайты интерактивными, позволяя пользователям взаимодействовать с сайтами без перезагрузки страницы. Но при таком взаимодействии практически всегда требуется передавать данные одновременно с запросом. Это можно делать стандартными механизмами, к примеру, передавая данные в адресе страницы (в GET параметрах), которой делается AJAX запрос.

Попробуем модифицировать пример, который получили в конце прошлой статьи "AJAX с помощью fetch в JavaScript". Напомним, что это пример мини-интернет магазина, в котором есть только одна кнопка "Моя корзина". При нажатии на неё происходит загрузка содержимого страницы cart_ajax.html через фоновый запрос:

<!DOCTYPE html>
<html>
   <head>
      <title>Интернет магазин</title>
   </head>
   <body>
      <span onclick="loadCart()">Моя корзина</span>
      <div id="store"></div>
      <script>
         function loadCart(){
            fetch('/cart_ajax.php?show_price=yes').then(
               response => {
                  return response.text();
               }
            ).then(
               text => {
                  document.getElementById('store').innerHTML = text;
               }
            );
         }
      </script>
   </body>
</html>

Как можно заметить, в этот пример мы поставили адрес на исполняемый PHP файл: /cart_ajax.php?show_price=yes. Раньше был HTML файл, но для обработки GET параметра до вывода результата будем использовать именно PHP.

Теперь напишем содержимое этого PHP файла. Будем исходить из такой логики: если GET параметр "show_price" имеет значениее "yes", то нужно вывести цены на товары в списке, иначе не выводить. Получится такой код:

<?php
$showPrice = false;
if($_GET['show_price'] == 'yes') $showPrice = true;
?>

<p>
   Сыр, 1 кг <?php if($showPrice) echo ' - 5 рублей';?>
</p>
<p>
   Молоко, 1 литр <?php if($showPrice) echo ' - 10 рублей';?>
</p>

Попробуйте протестировать этот файл. То есть открыть в браузере его по адресу /cart_ajax.php?show_price=yes . Должен показаться список покупок с ценами. Потом измените GET значение "yes" в адресной строке на любое другое и загрузите страницу - появится список без цен.

С помощью передачи информации в AJAX запросе можно сделать полностью интерактивные сайты. В том числе с отправкой данных формы авторизации/регистрации через AJAX запрос. Но для них никогда не используйте GET передачу! Такие секретные данные можно передавать только POST запросом, о котором читайте в наших следующих статьях.

Поисковые сети умеют определять адреса страниц из скриптов. Поэтому рано или поздно в поисковой выдаче появится /cart_ajax.php?show_price=yes . Чтобы этого не произошло, надо запретить индексацию этого файла в файле robots.txt. А чтобы контент этого файла вообще не отображался, необходимо добавить в начало PHP скрипта проверку типа запроса на соответствие XMLHttpRequest:

<?php
if($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') die();

$showPrice = false;
if($_GET['show_price'] == 'yes') $showPrice = true;
?>

<p>
   Сыр, 1 кг <?php if($showPrice) echo ' - 5 рублей';?>
</p>
<p>
   Молоко, 1 литр <?php if($showPrice) echo ' - 10 рублей';?>
</p>

Теперь если открыть файл браузером, то ничего не будет показано. Но если сделать AJAX запрос, то контент загрузится.