Tutorial JavaScript membaca JSON dari URL menunjukkan cara membaca data dalam format JSON dari URL yang disediakan. Kami menggunakan JQuery, Fetch API, dan XMLHttpRequest
Uniform Resource Locator [URL], adalah referensi ke sumber daya web yang menentukan lokasinya di jaringan komputer dan mekanisme untuk mengambilnya. Sumber daya web adalah data apa pun yang dapat diperoleh melalui web, seperti dokumen HTML, file PDF, gambar PNG, data JSON, atau teks biasa
URL generik memiliki bentuk berikut
scheme:[//[user:password@]host[:port]][/]path[?query][#fragment]
Tanda kurung siku menunjukkan bahwa bagian itu opsional. Skema adalah cara pengalamatan sumber daya, seperti http, ftp, mailto, atau file
Bagian yang mengikuti dua garis miring disebut bagian otoritas. Bagian otoritas berisi 1] bagian autentikasi opsional dari nama pengguna dan kata sandi, dipisahkan dengan titik dua, diikuti dengan simbol at [@] 2] sebuah host, yang merupakan nama host atau alamat IP, 3] sebuah
Jalur adalah jalan menuju sumber daya di host. Ini mungkin mirip atau tidak mirip atau memetakan persis ke jalur sistem file. String kueri digunakan untuk menambahkan beberapa kriteria ke permintaan sumber daya. Ini sering merupakan urutan pasangan kunci/nilai. Bagian terakhir adalah fragmen opsional, yang menunjuk ke sumber daya sekunder, seperti heading. Itu dipisahkan dari string kueri dengan hash [#]
JSON [JavaScript Object Notation] adalah format pertukaran data yang ringan. Mudah bagi manusia untuk membaca dan menulis dan bagi mesin untuk mengurai dan menghasilkan. Jenis media Internet resmi untuk JSON adalah
{ "time": "11:27:26 AM", "milliseconds_since_epoch": 1494934046126, "date": "05-16-2017" }4. Ekstensi nama file JSON adalah
{ "time": "11:27:26 AM", "milliseconds_since_epoch": 1494934046126, "date": "05-16-2017" }5
Dalam contoh kami, kami menggunakan data JSON dari
{ "time": "11:27:26 AM", "milliseconds_since_epoch": 1494934046126, "date": "05-16-2017" }6
{ "time": "11:27:26 AM", "milliseconds_since_epoch": 1494934046126, "date": "05-16-2017" }_
Permintaan GET mengembalikan string JSON ini
jQuery adalah pustaka JavaScript yang digunakan untuk memanipulasi DOM. Dengan jQuery, kita dapat menemukan, memilih, melintasi, dan memanipulasi bagian dari dokumen HTML
Metode JQuery
{ "time": "11:27:26 AM", "milliseconds_since_epoch": 1494934046126, "date": "05-16-2017" }_7 memuat data yang dikodekan JSON dari server menggunakan permintaan GET HTTP
jQuery.getJSON[ url [, data ] [, success ] ]_
Ini adalah tanda tangan metode. Parameter
{ "time": "11:27:26 AM", "milliseconds_since_epoch": 1494934046126, "date": "05-16-2017" }8 adalah string yang berisi URL tujuan pengiriman permintaan.
{ "time": "11:27:26 AM", "milliseconds_since_epoch": 1494934046126, "date": "05-16-2017" }9 adalah objek atau string biasa yang dikirim ke server dengan permintaan.
jQuery.getJSON[ url [, data ] [, success ] ]0 adalah fungsi panggilan balik yang dijalankan jika permintaan berhasil
$.ajax[{ dataType: "json", url: url, data: data, success: success }];
{ "time": "11:27:26 AM", "milliseconds_since_epoch": 1494934046126, "date": "05-16-2017" }_7 adalah singkatan untuk panggilan di atas
JavaScript - read JSON from URL
Dalam contoh, kita membaca data JSON dari
{ "time": "11:27:26 AM", "milliseconds_since_epoch": 1494934046126, "date": "05-16-2017" }6. Objek yang dikembalikan memiliki tiga atribut. tanggal, waktu, dan zaman unix
var text = `Date: ${data.date}
Time: ${data.time}
Unix time: ${data.milliseconds_since_epoch}`
Kami membuat pesan menggunakan string template JavaScript
$[".mypanel"].html[text];
Dengan metode
jQuery.getJSON[ url [, data ] [, success ] ]_3 JQuery, kami menambahkan teks ke tag
jQuery.getJSON[ url [, data ] [, success ] ]4Angka. Membaca JSON dari URL dengan JQuery
Pada gambar kita dapat melihat tanggal, waktu, dan waktu Unix saat ini
Membaca JSON dengan Fetch API
Ambil API adalah antarmuka untuk mengambil sumber daya. Ini mirip dengan
jQuery.getJSON[ url [, data ] [, success ] ]_5 tetapi API-nya menyediakan rangkaian fitur yang lebih kuat dan fleksibel
Contoh membaca data JSON dengan Fetch API dan mencetak data yang dikembalikan ke konsol. Untuk melihat hasilnya, kita perlu mengaktifkan konsol pengembang browser kita
Metode
jQuery.getJSON[ url [, data ] [, success ] ]6 mengambil satu argumen wajib, jalur ke sumber daya yang ingin kita ambil. Itu mengembalikan janji yang menyelesaikan respons permintaan
XMLHttpRequest API menyediakan fungsionalitas klien untuk mentransfer data antara klien dan server. Ini memungkinkan cara mudah untuk mengambil data dari URL tanpa harus melakukan penyegaran halaman penuh. Konsekuensinya, sebuah halaman web harus memperbarui hanya sebagian dari halaman tanpa mengganggu apa yang sedang dilakukan pengguna.
jQuery.getJSON[ url [, data ] [, success ] ]_5 banyak digunakan dalam pemrograman AJAX