Home » XML » XML : AJAX Response: Properti dan Cara Menggunakannya

XML : AJAX Response: Properti dan Cara Menggunakannya

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Properti onreadystatechange

Properti readyState menyimpan status XMLHttpRequest.

Properti onreadystatechange mendefinisikan fungsi yang akan dijalankan saat readyState berubah.

Properti status dan properti statusText menyimpan status 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
status200: “OK”
403: “Forbidden”
404: “Page not found”
dll.
statusTextMengembalikan teks status (e.g. “OK” atau “Not Found”)

Fungsi onreadystatechange dipanggil setiap kali readyState berubah.

Jika readyState adalah 4 dan statusnya 200, responsnya sudah siap:

Contoh:

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Ubah Content</button>
</div>

<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>

Peristiwa onreadystatechange dipicu empat kali (1-4), satu kali untuk setiap perubahan di readyState.

Menggunakan Fungsi Callback

Fungsi callback adalah fungsi yang dikirimkan sebagai parameter ke fungsi lain.

Jika kita memiliki lebih dari satu tugas AJAX di sebuah situs web, kita harus membuat satu fungsi untuk mengeksekusi objek XMLHttpRequest dan satu fungsi panggilan balik untuk setiap tugas AJAX.

Panggilan fungsi harus berisi URL dan fungsi apa yang dipanggil saat respons sudah siap.

Contoh:

<!DOCTYPE html>
<html>
<body>

<div id="demo">

<h1>The XMLHttpRequest Object</h1>

<button type="button"
onclick="loadDoc('ajax_info.txt', myFunction)">Change Content
</button>
</div>

<script>
function loadDoc(url, cFunction) {
  var xhttp;
  xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
function myFunction(xhttp) {
  document.getElementById("demo").innerHTML =
  xhttp.responseText;
}
</script>
</body>
</html>

Properti Server Response

PropertyDeskripsi
responseTextdapatkan data respons sebagai string
responseXMLdapatkan data respons sebagai data XML

Methode Server Response

MethodDeskripsi
getResponseHeader()Menampilkan informasi header tertentu dari sumber daya server
getAllResponseHeaders()Mengembalikan semua informasi header dari sumber server

Properti responseText

Properti responseText mengembalikan respons server sebagai string JavaScript, dan bisa digunakan sesuai keinginan:

Contoh :

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Ubah Content</button>
</div>

<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>

Properti responseXML

Objek XML HttpRequest memiliki parser XML built-in.

Properti responseXML mengembalikan respons server sebagai objek XML DOM.

Dengan menggunakan properti ini, kita bisa mengurai respons sebagai objek XML DOM:

Contoh
Minta file cd_catalog.xml dan uraikan responsnya:

<!DOCTYPE html>
<html>
<body>

<h1>The XMLHttpRequest Object</h1>

<p id="demo"></p>
 
<script>
var xhttp, xmlDoc, txt, x, i;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
  xmlDoc = this.responseXML;
  txt = "";
  x = xmlDoc.getElementsByTagName("ARTIST");
  for (i = 0; i < x.length; i++) {
    txt = txt + x[i].childNodes[0].nodeValue + "<br>";
  }
  document.getElementById("demo").innerHTML = txt;
  }
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
</script>

</body>
</html>

Metode getAllResponseHeaders ()

Metode getAllResponseHeaders () mengembalikan semua informasi header dari respons server.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h1>The XMLHttpRequest Object</h1>

<p> Fungsi getAllResponseHeaders () mengembalikan semua informasi header sumber daya, seperti panjang, jenis server, jenis konten, modifikasi terakhir, dll: </p>

<p id="demo"></p>

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

</body>
</html>

Metode getResponseHeader ()

Metode getResponseHeader () mengembalikan informasi header tertentu dari respons server.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h1>The XMLHttpRequest Object</h1>

<p> Fungsi getResponseHeader () digunakan untuk mengembalikan informasi header tertentu dari sumber daya, seperti panjang, jenis server, jenis konten, modifikasi terakhir, dll: </p>

<p>Last modified: <span id="demo"></span></p>

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

</body>
</html>

You may also like