HttpRequest XML: Cara Membuat dan Codenya

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

by Hanifah Nurbaeti October 16, 2020

Semua browser modern memiliki objek XMLHttpRequest bawaan untuk meminta data dari server.

Section Artikel

1 Objek HttpRequest XML
2 Mengirim XMLHttpRequest
3 Penjelasan Contoh
4 Versi lama Internet Explorer (IE5 dan IE6)

Objek HttpRequest XML

Objek XMLHttpRequest dapat digunakan untuk meminta data dari server web.

Objek XMLHttpRequest sangat diinginkan developer, karena bisa:

Perbarui halaman web tanpa memuat ulang halaman
Minta data dari server – setelah halaman dimuat
Terima data dari server – setelah halaman dimuat
Mengirim data ke server – di latar belakang

Mengirim XMLHttpRequest

Sintaks JavaScript umum untuk menggunakan objek XMLHttpRequest terlihat seperti ini:

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Using the XMLHttpRequest Object</h2>

<div id="demo">
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</div>

<script>
function loadXMLDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "xmlhttp_info.txt", true);
  xhttp.send();
}
</script>

</body>
</html>

Penjelasan Contoh

Baris pertama pada contoh di atas membuat objek XMLHttpRequest:

var xhttp = new XMLHttpRequest();

Properti onreadystatechange menentukan fungsi yang akan dijalankan setiap kali status objek XMLHttpRequest berubah:

xhttp.onreadystatechange = function()

Jika properti readyState adalah 4 dan properti status adalah 200, berarti responsnya sudah siap:

if (this.readyState == 4 && this.status == 200)

Properti responseText mengembalikan respons server sebagai string teks.

String teks dapat digunakan untuk memperbarui halaman web:

document.getElementById("demo").innerHTML = xhttp.responseText;

Versi lama Internet Explorer (IE5 dan IE6)

Versi lama Internet Explorer (IE5 dan IE6) tidak mendukung objek XMLHttpRequest.

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

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>Using the XMLHttpRequest Object</h2>

<div id="demo">
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</div>

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

</body>
</html>

XML