Home » XML » XMLHttpRequest – AJAX: Objek dan Cara Membuatnya

XMLHttpRequest – AJAX: Objek dan Cara Membuatnya

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Kunci AJAX adalah 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

MethodDeskripsi
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

PropertyDeskripsi
onreadystatechangeMendefinisikan fungsi yang akan dipanggil ketika properti readyState berubah
readyStateMenyimpan status XMLHttpRequest.
0: permintaan tidak diinisialisasi
1: koneksi server dibuat
2: permintaan diterima
3: memproses permintaan
4: permintaan selesai dan tanggapan siap
responseTextMengembalikan data respons sebagai string
responseXMLMengembalikan data respons sebagai data XML
statusMengembalikan nomor status permintaan
200: “OK”
403: “Forbidden”
404: “Not Found”
etc…
statusTextMengembalikan teks status (mis. “Ok” atau “Not Found”)

You may also like