Ajax Javascript Get Json Response

MUAZHAN

3 min read

·

Jun 23, 2024

33

Share

Memahami AJAX dan Cara Mendapatkan Data JSON

AJAX (Asynchronous JavaScript and XML) adalah teknik yang memungkinkan halaman web untuk memperbarui sebagian kontennya tanpa perlu memuat ulang seluruh halaman. Ini dilakukan dengan mengirimkan permintaan ke server secara asinkron dan menerima respons dari server. AJAX sangat berguna untuk membuat aplikasi web yang lebih responsif dan interaktif.

Salah satu cara umum untuk berinteraksi dengan server menggunakan AJAX adalah dengan menggunakan objek XMLHttpRequest. Objek ini memungkinkan Anda untuk mengirim permintaan HTTP ke server dan memproses responsnya.

Mendapatkan Data JSON dengan AJAX

Ketika bekerja dengan AJAX, data yang dikirim dan diterima biasanya dalam format JSON (JavaScript Object Notation). JSON adalah format data teks yang mudah dibaca dan diproses oleh JavaScript.

Berikut adalah langkah-langkah untuk mendapatkan data JSON dari server menggunakan AJAX:

1. Buat Objek XMLHttpRequest:

const xhr = new XMLHttpRequest();

2. Tetapkan Metode dan URL:

xhr.open('GET', 'https://api.example.com/data'); // 'GET' untuk mengambil data

3. Tetapkan Fungsi onload untuk Memproses Respons:

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    const data = JSON.parse(xhr.response); // Parse respons JSON
    // Lakukan sesuatu dengan data
    console.log(data);
  } else {
    console.error('Error fetching data:', xhr.status);
  }
};

4. Kirim Permintaan:

xhr.send();

Contoh Lengkap

Berikut adalah contoh lengkap bagaimana mendapatkan data JSON dari server menggunakan AJAX:

const xhr = new XMLHttpRequest();

xhr.open('GET', 'https://api.example.com/data');

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    const data = JSON.parse(xhr.response);
    console.log(data);
  } else {
    console.error('Error fetching data:', xhr.status);
  }
};

xhr.send();

Kesimpulan

AJAX dan JSON adalah kombinasi yang kuat untuk membangun aplikasi web yang dinamis dan responsif. Dengan memanfaatkan AJAX, Anda dapat mengambil data dari server secara asinkron tanpa memuat ulang halaman, dan dengan menggunakan JSON, Anda dapat memproses data tersebut dengan mudah di JavaScript.