JSON найчастіше використовується в асинхронних HTTP-запитах. Це де програма отримує дані від іншої програми через HTTP-запит по мережі.
Базовий приклад
У цьому прикладі ми будемо використовувати файл artist.txt, який містить такі дані.
<code data-language="javascript">{ "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() для його надсилання.