Kunci AJAX adalah objek XMLHttpRequest.
Section Artikel
Semua browser modern mendukung objek XMLHttpRequest.
Objek XMLHttpRequest dapat digunakan untuk bertukar data dengan server di belakang layar. Artinya, dimungkinkan untuk memperbarui bagian-bagian dari halaman web, tanpa memuat ulang seluruh halaman.
Semua browser modern (Chrome, Firefox, IE7 +, Edge, Safari Opera) memiliki objek XMLHttpRequest bawaan.
Sintaks untuk membuat objek XMLHttpRequest:
variable = new XMLHttpRequest();
Contoh :
<!DOCTYPE html> <html> <body> <h1>The XMLHttpRequest Object</h1> <p id="demo">Biarkan AJAX merubah teks ini.</p> <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>
Untuk alasan keamanan, browser modern tidak mengizinkan akses lintas domain.
Hal ini berarti halaman web dan file XML yang dicoba dimuat, harus ditempatkan di server yang sama.
Jika ingin menggunakan contoh di atas pada salah satu halaman web kita sendiri, file XML yang kita muat harus berada di server kita sendiri.
Versi lama Internet Explorer (IE5 dan IE6) menggunakan objek ActiveX sebagai ganti objek XMLHttpRequest:
variabel = ActiveXObject baru ("Microsoft.XMLHTTP");
Untuk menangani IE5 dan IE6, periksa apakah browser kita mendukung objek XMLHttpRequest atau buat objek ActiveX:
Contoh :
<!DOCTYPE html>
<html>
<body>
<h1>The XMLHttpRequest Object</h1>
<p id="demo">Biarkan AJAX merubah teks ini.</p>
<button type="button" >else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
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>
| Method | Deskripsi |
|---|---|
| new XMLHttpRequest() | Membuat objek XMLHttpRequest baru |
| abort() | Membatalkan permintaan saat ini |
| getAllResponseHeaders() | Mengembalikan informasi header |
| getResponseHeader() | Mengembalikan informasi tajuk tertentu |
| open(method,url,async,user,psw) | Menentukan permintaan : method: jenis permintaan GET atau POST url: lokasi file async: true (asynchronous) atau false (synchronous) user: nama pengguna opsional psw: kata sandi opsional |
| send() | Mengirim permintaan ke server Digunakan untuk permintaan GET |
| send(string) | Mengirim permintaan ke server. Digunakan untuk permintaan POST |
| setRequestHeader() | Menambahkan pasangan/ nilai ke tajuk yang akan dikirim |
| 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 |
| responseText | Mengembalikan data respons sebagai string |
| responseXML | Mengembalikan data respons sebagai data XML |
| status | Mengembalikan nomor status permintaan 200: “OK” 403: “Forbidden” 404: “Not Found” etc… |
| statusText | Mengembalikan teks status (mis. “Ok” atau “Not Found”) |