AJAX - Respons Server
Properti onreadystatechange
Properti readyState memegang status XMLHttpRequest.
Properti onreadystatechange mendefinisikan fungsi yang akan dieksekusi ketika readyState berubah.
Properti status dan properti statusText menyimpan status objek XMLHttpRequest.
| Property | Description |
|---|---|
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
Fungsi onreadystatechange dipanggil setiap kali readyState berubah.
Ketika readyState adalah 4 dan statusnya adalah 200, responsnya sudah siap:
Contoh
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();
}
File "ajax_info.txt" yang digunakan dalam contoh di atas, adalah file teks sederhana dan terlihat seperti ini:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
Peristiwa onreadystatechange dipicu empat kali (1-4), satu kali untuk setiap perubahan di readyState.
Menggunakan Fungsi Panggilan Balik
Fungsi panggilan balik adalah fungsi yang diteruskan sebagai parameter ke fungsi lain.
Jika Anda memiliki lebih dari satu tugas AJAX di situs web, Anda harus membuat satu fungsi untuk mengeksekusi objek XMLHttpRequest, dan satu fungsi panggilan balik untuk setiap tugas AJAX.
Pemanggilan fungsi harus berisi URL dan fungsi apa yang dipanggil saat respons sudah siap.
Contoh
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
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 myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
Properti Respons Server
| Property | Description |
|---|---|
| responseText | get the response data as a string |
| responseXML | get the response data as XML data |
Metode Respons Server
| Method | Description |
|---|---|
| getResponseHeader() | Returns specific header information from the server resource |
| getAllResponseHeaders() | Returns all the header information from the server resource |
Properti responseText
Properti responseText mengembalikan respons server sebagai string JavaScript, dan Anda dapat menggunakannya sebagaimana mestinya:
Contoh
document.getElementById("demo").innerHTML = xhttp.responseText;
Properti responsXML
Objek XML HttpRequest memiliki parser XML bawaan.
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 parsing responsnya:
xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET",
"cd_catalog.xml", true);
xhttp.send();
Anda akan belajar lebih banyak tentang XML DOM di bab DOM dari tutorial ini.
Metode getAllResponseHeaders()
Metode getAllResponseHeaders() mengembalikan semua informasi header dari respons server.
Contoh
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};
Metode getResponseHeader()
Metode getResponseHeader() mengembalikan informasi header tertentu dari respons server.
Contoh
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();