AJAX - Objek XMLHttpRequest
Keystone AJAX adalah objek XMLHttpRequest.
- Buat objek XMLHttpRequest
- Tentukan fungsi panggilan balik
- Buka objek XMLHttpRequest
- Kirim Permintaan ke server
Objek XMLHttpRequest
Semua browser modern mendukung XMLHttpRequestobjek tersebut.
Objek XMLHttpRequesttersebut dapat digunakan untuk bertukar data dengan server web di belakang layar. Ini berarti dimungkinkan untuk memperbarui bagian halaman web, tanpa memuat ulang seluruh halaman.
Buat Objek XMLHttpRequest
Semua browser modern (Chrome, Firefox, IE, Edge, Safari, Opera) memiliki XMLHttpRequestobjek bawaan.
Sintaks untuk membuat XMLHttpRequestobjek:
variable = new XMLHttpRequest();
Tentukan Fungsi Panggilan Balik
Fungsi panggilan balik adalah fungsi yang diteruskan sebagai parameter ke fungsi lain.
Dalam hal ini, fungsi panggilan balik harus berisi kode yang akan dieksekusi ketika respons sudah siap.
xhttp.onload = function() {
// What to do when the response is ready
}
Kirim Permintaan
Untuk mengirim permintaan ke server, Anda dapat menggunakan metode open() dan send() dari
XMLHttpRequestobjek:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Contoh
// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();
// Define a callback function
xhttp.onload = function() {
// Here you can use the Data
}
// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Akses Lintas Domain
Untuk alasan keamanan, browser modern tidak mengizinkan akses lintas domain.
Ini berarti bahwa halaman web dan file XML yang coba dimuat, harus berada di server yang sama.
Contoh di W3Schools semua file XML terbuka yang terletak di domain W3Schools.
Jika Anda ingin menggunakan contoh di atas pada salah satu halaman web Anda sendiri, file XML yang Anda muat harus berada di server Anda sendiri.
Metode Objek XMLHttpRequest
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| abort() | Cancels the current request |
| getAllResponseHeaders() | Returns header information |
| getResponseHeader() | Returns specific header information |
| open(method, url, async, user, psw) | Specifies the request method: the request type GET or POST url: the file location async: true (asynchronous) or false (synchronous) user: optional user name psw: optional password |
| send() | Sends the request to the server Used for GET requests |
| send(string) | Sends the request to the server. Used for POST requests |
| setRequestHeader() | Adds a label/value pair to the header to be sent |
Properti Objek XMLHttpRequest
| Property | Description |
|---|---|
| onload | Defines a function to be called when the request is recieved (loaded) |
| 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 |
| responseText | Returns the response data as a string |
| responseXML | Returns the response data as XML data |
| status | Returns the status-number of a request 200: "OK" 403: "Forbidden" 404: "Not Found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
Properti yang dimuat
Dengan XMLHttpRequestobjek Anda dapat menentukan fungsi panggilan balik yang akan dijalankan ketika permintaan menerima jawaban.
Fungsi didefinisikan dalam onloadproperti XMLHttpRequestobjek:
Contoh
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Beberapa Fungsi Panggilan Balik
Jika Anda memiliki lebih dari satu tugas AJAX di situs web, Anda harus membuat satu fungsi untuk mengeksekusi XMLHttpRequestobjek, 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) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
Properti onreadystatechange
Properti readyStatememegang status XMLHttpRequest.
Properti onreadystatechangemendefinisikan fungsi panggilan balik yang akan dieksekusi ketika readyState berubah.
Properti statusdan statusTextproperti memegang 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 onreadystatechangedipanggil setiap kali readyState berubah.
Ketika readyState4 dan statusnya 200, responsnya siap:
Contoh
function loadDoc() {
const 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");
xhttp.send();
}
Acara onreadystatechangedipicu empat kali (1-4), satu kali untuk setiap perubahan di readyState.