Section Artikel
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.
| Properti | 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” |
| statusText | Mengembalikan 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" 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>
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" onclick="loadDoc('ajax_info.txt', myFunction)">Ubah 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 Respons Server
| Properti | Deskripsi |
|---|---|
| responseText | dapatkan data respons sebagai string |
| responseXML | dapatkan data respons sebagai data XML |
Metode Respons Server
| 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 dapat digunakan dengan sesuai.
Contoh:
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<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 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>
