Dasar-dasar Bekerja dengan fetch di AJAX

Sekarang mari kita lihat cara memuat sebagian halaman dengan AJAX. Misalnya di halaman kita index.html terdapat div dan tombol (berikut adalah isi dari body):

public/index.html<div></div>
<button>click me</button>

Misalkan kita juga memiliki halaman ajax.html, yang berisi tiga paragraf (tanpa tag halaman, hanya paragraf):

public/ajax.html<p>1</p>
<p>2</p>
<p>3</p>

Mari kita buat agar saat tombol di halaman index.html diklik, isi halaman ajax.html dimuat ke dalam div.

Untuk melakukan ini, pertama-tama dapatkan referensi ke elemen-elemen kita ke dalam variabel:

public/client.jslet div    = document.querySelector('div');
let button = document.querySelector('button');

Mari tambahkan event handler klik ke tombol:

public/client.jsbutton.addEventListener('click', function() {
  // di sini kita akan menjalankan permintaan AJAX
});

Sekarang mari kita jalankan permintaan AJAX. Untuk ini digunakan fungsi fetch, yang menerima alamat halaman yang ingin kita dapatkan isinya. Mari tentukan alamat halaman ajax.html di server kita:

public/client.jsbutton.addEventListener('click', function() {
  let result = fetch('/ajax.html'); 
});

Fungsi fetch akan mengembalikan promise. Masalahnya adalah meminta halaman melalui AJAX adalah operasi asinkron, karena butuh waktu tertentu sebelum halaman merespons kita.

Mari kita dapatkan hasil dari promise:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html'); 
  
  promise.then(function(response) {
    // jawaban server ada di variabel response
  });
});

Mari sederhanakan dengan menghilangkan variabel yang tidak perlu:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(function(response) {
    
  });
});

Mari sederhanakan dengan menggunakan fungsi panah:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(response => {
    
  });
});

Mari kita tuliskan dalam bentuk yang lebih mudah dibaca:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      
    }
  );
});

Variabel response berisi objek kelas Response yang cukup kompleks:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(response => {
    console.log(response); // objek kelas Response
  });
});

Kita akan mempelajari objek ini lebih dalam di pelajaran berikutnya, tapi untuk sekarang kita hanya perlu hal paling sederhana - mendapatkan teks halaman yang diminta. Untuk ini, ada metode text dalam objek ini. Namun, metode ini tidak mengembalikan teks halaman, melainkan promise dengan teks halaman tersebut:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      console.log(response.text()); // akan menampilkan Promise
    }
  );
});

Untuk mendapatkan teks halaman, promise yang didapat dari response.text harus diproses sekali lagi:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      return response.text();
    }
  ).then(
    text => {
      console.log(text); // teks halaman
    }
  );
});

Jadi, akhirnya kita mendapatkan teks halaman yang diminta dan dapat, misalnya, menuliskannya ke div kita:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      return response.text();
    }
  ).then(
    text => {
      div.innerHTML = text;
    }
  );
});