Section Artikel
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.
| 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 |
| status | 200: “OK” 403: “Forbidden” 404: “Page not found” dll. |
| statusText | Mengembalikan 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
| Property | Deskripsi |
|---|---|
| responseText | dapatkan data respons sebagai string |
| responseXML | dapatkan data respons sebagai data XML |
Methode Server Response
| Method | Deskripsi |
|---|---|
| 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>
