Ajax Javascript Get Result

MUAZHAN

4 min read

·

Jun 23, 2024

26

Share

Menggunakan AJAX untuk Mengambil Data di JavaScript

AJAX (Asynchronous JavaScript and XML) adalah teknik yang memungkinkan halaman web untuk memperbarui konten tanpa perlu memuat ulang seluruh halaman. Dengan AJAX, kita dapat mengirim permintaan ke server dan menerima data kembali tanpa mengganggu interaksi pengguna dengan halaman web.

Bagaimana Cara Kerja AJAX?

AJAX memanfaatkan objek XMLHttpRequest (XHR) untuk berkomunikasi dengan server. Objek ini memungkinkan kita untuk:

1. Membuka koneksi ke server: Kita menggunakan metode open() untuk menentukan metode permintaan (misalnya, GET atau POST), URL server, dan apakah permintaan tersebut bersifat asynchronous.
2. Mengirim permintaan: Metode send() digunakan untuk mengirimkan permintaan ke server.
3. Menerima respon: Objek XHR memiliki beberapa event listener yang dapat kita gunakan untuk menangani respon server, seperti onload dan onerror.

Contoh Penggunaan AJAX GET

Berikut contoh sederhana menggunakan AJAX untuk mengambil data dari server menggunakan metode GET:

function getData() {
  const xhr = new XMLHttpRequest();

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

  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // Data berhasil diterima
      const data = JSON.parse(xhr.response);
      console.log(data); 
    } else {
      // Terjadi kesalahan
      console.error('Terjadi kesalahan:', xhr.status, xhr.statusText);
    }
  };

  xhr.onerror = function() {
    console.error('Terjadi kesalahan saat melakukan permintaan.');
  };

  xhr.send();
}

getData(); // Panggil fungsi untuk mendapatkan data

Penjelasan:

• getData(): Fungsi ini berisi kode AJAX.
• XMLHttpRequest: Objek ini digunakan untuk membuat permintaan ke server.
• open('GET', 'https://example.com/data'): Membuka koneksi ke server menggunakan metode GET dan alamat https://example.com/data.
• onload: Event listener ini akan dijalankan ketika respon diterima dari server.
  • xhr.status: Berisi kode status respon dari server.
  • xhr.response: Berisi data yang diterima dari server.
  • JSON.parse(xhr.response): Mengubah data dari format JSON menjadi objek JavaScript.
• onerror: Event listener ini akan dijalankan jika terjadi kesalahan saat melakukan permintaan.
• send(): Mengirimkan permintaan ke server.

Keuntungan Menggunakan AJAX

• Pengalaman pengguna yang lebih baik: Halaman web tidak perlu dimuat ulang sepenuhnya, sehingga interaksi pengguna tetap lancar.
• Permintaan data yang lebih efisien: AJAX memungkinkan kita untuk mengambil data yang diperlukan tanpa perlu memuat seluruh halaman.
• Pembaruan konten dinamis: AJAX dapat digunakan untuk memperbarui konten di halaman web secara real-time tanpa perlu memuat ulang halaman.

Kesimpulan

AJAX adalah teknik yang sangat berguna untuk membuat halaman web yang lebih interaktif dan dinamis. Dengan memahami dasar-dasar AJAX, Anda dapat memanfaatkan kemampuannya untuk meningkatkan pengalaman pengguna dan membuat aplikasi web yang lebih modern.