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() для его отправки.