Javascript

Respon Ajax: Properti dan Cara Menggunakannya

Properti onreadystatechange

Properti readyState menyimpan status XMLHttpRequest.

Properti onreadystatechange mendefinisikan sebuah fungsi yang akan dijalankan saat readyState berubah.

Properti status dan properti statusText menyimpan status objek XMLHttpRequest.

PropertiDeskripsi
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”
statusTextMengembalikan teks status (mis. “OK” atau “Note 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">
<h2>The XMLHttpRequest Object</h2>
<button type="button" >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>

Event 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 memiliki lebih dari satu task AJAX di situs web, maka harus membuat satu fungsi untuk mengeksekusi objek XMLHttpRequest, dan satu fungsi callback untuk setiap task AJAX.

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

Contoh:

<!DOCTYPE html>
<html>
<body>

<div id="demo">

<h2>The XMLHttpRequest Object</h2>

<button type="button" >

Properti Respons Server

PropertiDeskripsi
responseTextdapatkan data respons sebagai string
responseXMLdapatkan data respons sebagai data XML

Metode Respons Server

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 dapat digunakan dengan sesuai.

Contoh:

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" >

Properti responseXML

Objek XMLHttpRequest memiliki parser XML built-in.

Properti responseXML mengembalikan respons server sebagai objek XML DOM.

Dengan menggunakan properti ini, Anda dapat mengurai respons sebagai objek XML DOM:

Contoh:
Minta file cd_catalog.xml dan uraikan responsnya.

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

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

<h2>The XMLHttpRequest Object</h2>

<p>Fungsi getAllResponseHeaders() mengembalikan semua informasi resource header, 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>

<h2>The XMLHttpRequest Object</h2>

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

Catur Kurnia Sari

Share
Tags: javascript