Ajax Javascript Get

MUAZHAN

4 min read

·

Jun 22, 2024

19

Share

AJAX: Membuat Request Data Asinkron dengan JavaScript

AJAX (Asynchronous JavaScript and XML) adalah teknik untuk berkomunikasi dengan server secara asinkron, tanpa melakukan reload halaman. Hal ini memungkinkan website untuk menampilkan data dinamis tanpa perlu melakukan refresh halaman yang seringkali memakan waktu.

Mengapa Menggunakan AJAX?

• Meningkatkan Performa: AJAX memungkinkan Anda untuk memuat data secara parsial, mengurangi jumlah data yang perlu dimuat, dan meningkatkan kecepatan website.
• Pengalaman Pengguna Lebih Baik: Dengan AJAX, website Anda dapat lebih responsif terhadap tindakan pengguna, seperti pencarian, formulir, dan interaksi lainnya.
• Data Dinamis: AJAX memudahkan pengambilan data dari server secara dinamis dan menampilkannya di halaman web, tanpa perlu melakukan refresh penuh.

Cara Kerja AJAX dengan JavaScript

AJAX bekerja dengan objek XMLHttpRequest di JavaScript, yang memungkinkan Anda untuk:

1. Membuat permintaan ke server: Anda dapat mengirimkan berbagai jenis permintaan ke server, seperti GET, POST, PUT, dan DELETE.
2. Menerima respons dari server: Server merespons permintaan Anda dengan data dalam format yang Anda tentukan, seperti JSON, XML, atau teks biasa.
3. Memproses dan menampilkan data: Anda dapat memproses data yang diterima dari server dan menampilkannya di halaman web, seperti memperbarui elemen HTML atau menampilkan informasi baru.

Contoh AJAX GET Request

Berikut adalah contoh sederhana bagaimana menggunakan AJAX untuk melakukan permintaan GET ke server:

// Membuat objek XMLHttpRequest
const xhr = new XMLHttpRequest();

// Menentukan URL tujuan
const url = "https://api.example.com/data";

// Menangani event `readystatechange`
xhr.onreadystatechange = function() {
  // Jika status permintaan 200 (OK) dan request selesai
  if (xhr.readyState === 4 && xhr.status === 200) {
    // Mendapatkan data respons
    const data = JSON.parse(xhr.responseText);

    // Menampilkan data
    console.log(data);
  }
};

// Mengirim permintaan GET
xhr.open("GET", url, true); 
xhr.send();

Penjelasan:

• new XMLHttpRequest(): Membuat objek XMLHttpRequest untuk melakukan permintaan ke server.
• xhr.open("GET", url, true): Membuka koneksi ke URL yang ditentukan dengan metode GET (asinkron).
• xhr.send(): Mengirim permintaan ke server.
• xhr.onreadystatechange: Menangani perubahan status permintaan.
• xhr.readyState: Menunjukkan status permintaan.
  • 4 menandakan permintaan selesai.
• xhr.status: Menunjukkan kode status respons server.
  • 200 berarti permintaan berhasil.
• xhr.responseText: Mengandung data respons yang diterima dari server.
• JSON.parse(xhr.responseText): Mengubah data JSON yang diterima dari server menjadi objek JavaScript.

Kesimpulan

AJAX merupakan teknologi yang sangat berguna untuk membuat website lebih interaktif dan responsif. Dengan menggunakan AJAX, Anda dapat mengambil data dari server secara asinkron, memperbarui halaman web tanpa perlu melakukan refresh penuh, dan meningkatkan pengalaman pengguna secara keseluruhan.