AJAX - Objek XMLHttpRequest

Objek XMLHttpRequest adalah dasar AJAX.

  1. Membuat objek XMLHttpRequest
  2. Definisi fungsi balik (callback)
  3. Membuka objek XMLHttpRequest
  4. Mengirim permintaan ke server

Objek XMLHttpRequest

Semua browser modern mendukungnya Objek XMLHttpRequest.

Objek XMLHttpRequest dapat digunakan untuk berkomunikasi dengan server web di latar belakang. Ini berarti dapat memperbarui bagian konten halaman web tanpa perlu memuat kembali halaman seluruhnya.

Membuat objek XMLHttpRequest

Semua browser modern (Chrome, Firefox, IE, Edge, Safari, Opera) memiliki Objek XMLHttpRequest.

Sintaks untuk membuat objek XMLHttpRequest:

variable = new XMLHttpRequest();

Definisi fungsi balik (callback)

Fungsi balik (callback) adalah fungsi yang dipasang sebagai parameter ke fungsi lain.

Dalam kasus ini, fungsi balik (callback) harus mengandung kode yang akan dieksekusi saat tanggap balik siap.

xhttp.onload = function() {
  // Apa yang harus dilakukan saat tanggap balik siap
}

Kirim permintaan

Untuk mengirim permintaan ke server, Anda dapat menggunakan objek XMLHttpRequest. open() dan send() Metode:

xhttp.open("GET", "ajax_info.txt");
xhttp.send();

Contoh

// Buat objek XMLHttpRequest
const xhttp = new XMLHttpRequest();
// Definisi fungsi balik (callback)
xhttp.onload = function() {
  // Anda dapat menggunakan data di sini
}
// Kirim permintaan
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

Coba Sendiri

Akses Antar Domain (Cross Domain Access)

Karena alasan keamanan, browser modern saat ini tidak mengizinkan akses antar domain.

Artinya halaman web dan berkas XML yang dia coba muat harus berada di server yang sama.

Contoh di CodeW3C.com membuka berkas XML yang berada di domain CodeW3C.com.

Jika Anda ingin menggunakan contoh di salah satu halaman web Anda, berkas XML yang Anda muat harus berada di server pribadi Anda.

Metode objek XMLHttpRequest

Metode Deskripsi
new XMLHttpRequest() Buat objek XMLHttpRequest baru.
abort() Batalkan permintaan saat ini.
getAllResponseHeaders() Kembalikan informasi header.
getResponseHeader() Kembalikan informasi header khusus.
open(method, url, async, user, psw)

Tentukan permintaan.

  • method：tipe permintaan GET atau POST
  • url：lokasi file
  • async：true (asinkron) atau false (sinkron)
  • user：nama pengguna pilihan
  • psw：kata sandi pilihan
send() Kirim permintaan ke server, digunakan untuk permintaan GET.
send(string) Kirim permintaan ke server, digunakan untuk permintaan POST.
setRequestHeader() Tambahkan pasangan tag/nilai ke header yang akan dikirim.

Atribut objek XMLHttpRequest

Atribut Deskripsi
onload Definisi fungsi yang dipanggil saat menerima permintaan (memuat).
onreadystatechange Definisi fungsi yang dipanggil saat atribut readyState berubah.
readyState

Simpan status XMLHttpRequest

  • 0: Permintaan belum diinisialisasi
  • 1: Koneksi server telah dibangun
  • 2: Permintaan telah diterima
  • 3: Sedang menangani permintaan
  • 4: Permintaan telah selesai dan tanggapan siap
responseText Kembalikan data tanggapan dalam bentuk string
responseXML Kembalikan data tanggapan dalam bentuk data XML
status

Kembalikan nomor status permintaan

  • 200: "OK"
  • 403: "Dilarang"
  • 404: "Tidak Ditemukan"

Untuk daftar lengkap silakan kunjungi Referensi Pesan HTTP
statusText Kembalikan teks status (seperti "OK" atau "Tidak Ditemukan")

Atribut onload

Dengan menggunakan objek XMLHttpRequest, Anda dapat mendefiniskan fungsi panggilan kembali untuk dieksekusi saat tanggapan diterima

Silakan definiskan fungsi panggilan kembali dalam objek XMLHttpRequest onload Fungsi ini didefiniskan dalam atribut:

Contoh

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

Coba Sendiri

Beberapa fungsi panggilan kembali

Jika ada beberapa tugas AJAX di situs web, maka harus dibuat fungsi untuk eksekusi objek XMLHttpRequest dan membuat fungsi panggilan kembali untuk setiap tugas AJAX

Panggilan fungsi harus mengandung URL serta fungsi yang akan dieksekusi saat tanggapan siap

Contoh

loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {cFunction(this);}
  xhttp.open("GET", url);
  xhttp.send();
}
function myFunction1(xhttp) {
  // Disini adalah aksi
}
function myFunction2(xhttp) {
  // Disini adalah aksi
}

Atribut onreadystatechange

readyState Atribut menyimpan status XMLHttpRequest

onreadystatechange Atribut mendefinisikan fungsi panggilan kembali, yang dieksekusi saat readyState berubah

status Atribut dan statusText Atribut menyimpan status objek XMLHttpRequest

Atribut Deskripsi
onreadystatechange Definiskan fungsi yang dipanggil saat atribut readyState berubah
readyState

Simpan status XMLHttpRequest

  • 0: Permintaan belum diinisialisasi
  • 1: Koneksi server telah dibangun
  • 2: Permintaan telah diterima
  • 3: Sedang menangani permintaan
  • 4: Permintaan telah selesai dan tanggapan siap
status

Kembalikan nomor status permintaan

  • 200: "OK"
  • 403: "Dilarang"
  • 404: "Tidak Ditemukan"

Untuk daftar lengkap silakan kunjungi Referensi Pesan HTTP
statusText statusText

Kembalikan teks status (contoh "OK" atau "Not Found").

Setiap kali readyState berubah, fungsi onreadystatechange akan dipanggil. 4 dan status adalah 200 Ketika, tanggapannya siap:

Contoh

function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}

Coba Sendiri

Peristiwa onreadystatechange dijalankan empat kali (1-4), setiap kali perubahan readyState sekali.