Использование JSON для HTTP-запроса

JSON чаще всего используется в асинхронных HTTP-запросах. Это где приложение получает данные от другого приложения через HTTP-запрос по сети.

Базовый пример

В этом примере мы будем использовать файл artist.txt, который содержит следующие данные.

{
  "artists" : [
    { 
      "artistname" : "Leonard Cohen",
      "born" : "1934"
    },
    { 
      "artistname" : "Joe Satriani",
      "born" : "1956" 
    },
    { 
      "artistname" : "Snoop Dogg",
      "born" : "1971"
    }
  ]
}

Ниже показан пример веб-страницы, которая извлекает данные JSON через HTTP, а затем использует JavaScript, чтобы обернуть данные в теги HTML и вывести их в документе. Я добавил много комментариев для пояснения того, что делает каждая часть кода.

<!doctype html>
<title>Пример</title>
<script>
// Сохраняем XMLHttpRequest и адрес JSON-файла в переменных
var xhr = new XMLHttpRequest();
var url = "/example/artist.txt";
  
// Вызываем при изменении атрибута readyState
xhr.onreadystatechange = function() {
  // Проверяем, выполнен ли запрос на получение
  if (xhr.readyState == 4 && xhr.status == 200) {
    // Разбираем строку JSON
    var jsonData = JSON.parse(xhr.responseText); 
    // Вызываем showArtists() и передаём разобранный JSON
    showArtists(jsonData);
  }
};

// Выполняем HTTP-вызов, используя переменную url
xhr.open("GET", url, true);
xhr.send();

// Функция, которая форматирует строку с тегами HTML, а затем выводит результат
function showArtists(data) {
  var output = "<ul>"; // Открываем список
  var i;

  // Перебираем исполнителей и добавляем их как пункты списка
  for (var i in data.artists) {
    output += "<li>" + data.artists[i].artistname + " (Родился: " + data.artists[i].born + ")</li>"; 
  }
  
  output += "</ul>"; // Закрываем список
  // Выводим данные в элементе artistlist
  document.getElementById("artistList").innerHTML = output;
}
</script>
  
<!-- Показываем результаты здесь -->
<div id="artistList"></div>

XMLHttpRequest — это API, который предлагает скриптовые функции клиента для передачи данных между клиентом и сервером. Он позволяет получать данные из внешнего адреса без обновления страницы. Например, пользователь может нажать кнопку, которая приводит к обновлению небольшой части страницы, а не всей страницы целиком.

XMLHttpRequest интенсивно применяется в AJAX. Несмотря на свое название, он может использоваться для извлечения данных любого типа, а не только XML.

XMLHttpRequest включает в себя ряд методов и атрибутов. В приведённом выше примере мы используем open() для инициализации запроса и send() для его отправки.

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 11.10.2019
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты