Objek XMLHttpRequest digunakan untuk bertukar data dengan server.
Section Artikel
Kirim Permintaan ke Server
Untuk mengirim permintaan ke server, kami menggunakan metode open() dan send() dari objek XMLHttpRequest:
| xhttp.open(“GET”, “ajax_info.txt”, true); xhttp.send(); |
| Method | Description |
|---|---|
| open(method, url, async) | Menentukan jenis permintaan method: jenis permintaan: GET or POST url: lokasi server (file) async: true (asynchronous) atau false (synchronous) |
| send() | Mengirim permintaan ke server (digunakan untuk GET) |
| send(string) | Mengirim permintaan ke server (digunakan untuk POST) |
GET atau POST?
GET lebih sederhana dan lebih cepat daripada POST, dan dapat digunakan dalam banyak kasus.
Namun, selalu gunakan permintaan POST ketika:
- File yang di-cache bukanlah pilihan (perbarui file atau database di server).
- Mengirimkan sejumlah besar data ke server (POST tidak memiliki batasan ukuran).
- Mengirim masukan pengguna (yang dapat berisi karakter yang tidak diketahui), POST lebih kuat dan aman daripada GET.
Request GET
Permintaan GET sederhana:
<!DOCTYPE html> <html> <body> <h2>The XMLHttpRequest Object</h2> <button type="button" onclick="loadDoc()">Request data</button> <p id="demo"></p> <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", "demo_get.asp", true); xhttp.send(); } </script> </body> </html>
Jika Anda ingin mengirim informasi dengan metode GET, tambahkan informasi ke URL:
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<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", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
}
</script>
</body>
</html>
Permintaan POST
Permintaan POST sederhana:
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<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("POST", "demo_post.asp", true);
xhttp.send();
}
</script>
</body>
</html>
Untuk POST data seperti formulir HTML, tambahkan header HTTP dengan setRequestHeader(). Tentukan data yang ingin Anda kirim dengan metode send():
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<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("POST", "demo_post2.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
}
</script>
</body>
</html>
| Method | Description |
|---|---|
| setRequestHeader(header, value) | Menambahkan header HTTP ke permintaan tersebut header: menentukan nama header value: menentukan nilai header |
Url – File di Server
Parameter url dari metode open(), adalah alamat ke file di server:
| xhttp.open(“GET”, “ajax_test.asp”, true); |
File dapat berupa file apa saja, seperti .txt dan .xml, atau file skrip server seperti .asp dan .php (yang dapat melakukan tindakan di server sebelum mengirim respons kembali).
Asynchronous – True atau False?
Permintaan server harus dikirim secara asinkron.
Parameter async dari metode open () harus disetel ke true:
| xhttp.open(“GET”, “ajax_test.asp”, true); |
Dengan mengirim secara asinkron, JavaScript tidak harus menunggu respon server, tetapi bisa:
- jalankan skrip lain sambil menunggu respons server
- Menghadapi respon setelah respon siap
Properti onreadystatechange
Dengan objek XMLHttpRequest kita bisa mendefinisikan fungsi yang akan dijalankan ketika permintaan menerima jawaban.
Fungsi ini didefinisikan dalam properti onreadystatechange dari objek XMLHttpRequest:
Contoh:
<!DOCTYPE html> <html> <body> <div id="demo"> <h2>The XMLHttpRequest Object</h2> <button type="button" onclick="loadDoc()">Change 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>
Request Synchronous
Untuk menjalankan permintaan sinkron, ubah parameter ketiga dalam metode open() menjadi false:
| xhttp.open(“GET”, “ajax_info.txt”, false); |
Terkadang async = false digunakan untuk pengujian cepat. Anda juga akan menemukan permintaan sinkron dalam kode JavaScript lama.
Karena kode akan menunggu hingga server selesai, tidak diperlukan fungsi onreadystatechange:
<!DOCTYPE html> <html> <body> <h2>The XMLHttpRequest Object</h2> <p id="demo">AJAX merubah ini.</p> <button type="button" onclick="loadDoc()">Ubah konten</button> <script> function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.open("GET", "ajax_info.txt", false); xhttp.send(); document.getElementById("demo").innerHTML = xhttp.responseText; } </script> </body> </html>
XMLHttpRequest sinkron (async = false) tidak disarankan karena JavaScript akan berhenti dijalankan hingga respons server siap. Jika server sibuk atau lambat, aplikasi akan hang atau berhenti.
Synchronous XMLHttpRequest sedang dalam proses dihapus dari standar web, tetapi proses ini bisa memakan waktu bertahun-tahun.
Alat pengembang modern didorong untuk memperingatkan tentang penggunaan permintaan sinkron dan mungkin memunculkan pengecualian InvalidAccessError saat itu terjadi.
