XMLHttpRequest – AJAX: Objek dan Cara Membuatnya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti October 20, 2020

Kunci AJAX adalah objek XMLHttpRequest.

Section Artikel

1 Objek XMLHttpRequest
2 Buat Objek XMLHttpRequest
3 Akses Di Seluruh Domain
4 Versi lama Internet Explorer (IE5 dan IE6)
5 Metode Objek XMLHttpRequest
6 Properti Objek XMLHttpRequest

Objek XMLHttpRequest

Semua browser modern mendukung objek XMLHttpRequest.

Objek XMLHttpRequest dapat digunakan untuk bertukar data dengan server di belakang layar. Artinya, dimungkinkan untuk memperbarui bagian-bagian dari halaman web, tanpa memuat ulang seluruh halaman.

Buat Objek XMLHttpRequest

Semua browser modern (Chrome, Firefox, IE7 +, Edge, Safari Opera) memiliki objek XMLHttpRequest bawaan.

Sintaks untuk membuat objek XMLHttpRequest:

variable = new XMLHttpRequest();

Contoh :

<!DOCTYPE html>
<html>
<body>

<h1>The XMLHttpRequest Object</h1>

<p id="demo">Biarkan AJAX merubah teks ini.</p>

<button type="button" onclick="loadDoc()">Ubah Konten</button>

<script>
function loadDoc() {
  var 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", true);
  xhttp.send();
}
</script>

</body>
</html>

Akses Di Seluruh Domain

Untuk alasan keamanan, browser modern tidak mengizinkan akses lintas domain.

Hal ini berarti halaman web dan file XML yang dicoba dimuat, harus ditempatkan di server yang sama.

Jika ingin menggunakan contoh di atas pada salah satu halaman web kita sendiri, file XML yang kita muat harus berada di server kita sendiri.

Versi lama Internet Explorer (IE5 dan IE6)

Versi lama Internet Explorer (IE5 dan IE6) menggunakan objek ActiveX sebagai ganti objek XMLHttpRequest:

variabel = ActiveXObject baru ("Microsoft.XMLHTTP");

Untuk menangani IE5 dan IE6, periksa apakah browser kita mendukung objek XMLHttpRequest atau buat objek ActiveX:

Contoh :

<!DOCTYPE html>
<html>
<body>

<h1>The XMLHttpRequest Object</h1>

<p id="demo">Biarkan AJAX merubah teks ini.</p>

<button type="button" onclick="loadDoc()">Ubah Konten</button>

<script>
function loadDoc() {
  var xhttp;
  if (window.XMLHttpRequest) {
    // code for modern browsers
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}
</script>

</body>
</html>

Metode Objek XMLHttpRequest

Method	Deskripsi
new XMLHttpRequest()	Membuat objek XMLHttpRequest baru
abort()	Membatalkan permintaan saat ini
getAllResponseHeaders()	Mengembalikan informasi header
getResponseHeader()	Mengembalikan informasi tajuk tertentu
open(method,url,async,user,psw)	Menentukan permintaan : method: jenis permintaan GET atau POST url: lokasi file async: true (asynchronous) atau false (synchronous) user: nama pengguna opsional psw: kata sandi opsional
send()	Mengirim permintaan ke server Digunakan untuk permintaan GET
send(string)	Mengirim permintaan ke server. Digunakan untuk permintaan POST
setRequestHeader()	Menambahkan pasangan label / nilai ke tajuk yang akan dikirim

Tabel Metode Objek XMLHttpRequest

Properti Objek XMLHttpRequest

Property	Deskripsi
onreadystatechange	Mendefinisikan fungsi yang akan dipanggil ketika properti readyState berubah
readyState	Menyimpan status XMLHttpRequest. 0: permintaan tidak diinisialisasi 1: koneksi server dibuat 2: permintaan diterima 3: memproses permintaan 4: permintaan selesai dan tanggapan siap
responseText	Mengembalikan data respons sebagai string
responseXML	Mengembalikan data respons sebagai data XML
status	Mengembalikan nomor status permintaan 200: “OK” 403: “Forbidden” 404: “Not Found” etc…
statusText	Mengembalikan teks status (mis. “Ok” atau “Not Found”)

AJAX XML