AJAX - Kirim Permintaan ke Server
Objek XMLHttpRequest digunakan untuk bertukar data dengan server.
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) | Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) |
| send() | Sends the request to the server (used for GET) |
| send(string) | Sends the request to the server (used for POST) |
DAPATKAN atau POSTING?
GET lebih sederhana dan lebih cepat daripada POST, dan dapat digunakan dalam banyak kasus.
Namun, selalu gunakan permintaan POST saat:
- File cache bukanlah pilihan (memperbarui file atau database di server).
- Mengirim data dalam jumlah besar ke server (POST tidak memiliki batasan ukuran).
- Mengirim input pengguna (yang dapat berisi karakter yang tidak dikenal), POST lebih kuat dan aman daripada GET.
DAPATKAN Permintaan
Permintaan GET sederhana:
Contoh
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
Dalam contoh di atas, Anda mungkin mendapatkan hasil yang di-cache. Untuk menghindarinya, tambahkan ID unik ke URL:
Contoh
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
Jika Anda ingin mengirim informasi dengan metode GET, tambahkan informasi tersebut ke URL:
Contoh
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
POSTING Permintaan
Permintaan POST sederhana:
Contoh
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
Untuk POST data seperti formulir HTML, tambahkan header HTTP dengan setRequestHeader(). Tentukan data yang ingin Anda kirim dalam metode send():
Contoh
xhttp.open("POST", "demo_post2.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
| Method | Description |
|---|---|
| setRequestHeader(header, value) | Adds HTTP headers to the request header: specifies the header name value: specifies the header value |
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 - Benar atau Salah?
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 respons server, tetapi dapat:
- jalankan skrip lain sambil menunggu respons server
- berurusan dengan respons setelah respons siap
Properti onreadystatechange
Dengan objek XMLHttpRequest Anda dapat menentukan fungsi yang akan dieksekusi saat permintaan menerima jawaban.
Fungsi didefinisikan dalam properti onreadystatechange dari objek XMLHttpResponse:
Contoh
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>
Anda akan belajar lebih banyak tentang onreadystatechange di bab selanjutnya.
Permintaan Sinkron
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 yang lebih lama.
Karena kode akan menunggu penyelesaian server, fungsi onreadystatechange tidak diperlukan:
Contoh
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
XMLHttpRequest sinkron (async = false) tidak disarankan karena JavaScript akan berhenti mengeksekusi hingga respons server siap. Jika server sibuk atau lambat, aplikasi akan hang atau berhenti.
XMLHttpRequest sinkron sedang dalam proses penghapusan dari standar web, tetapi proses ini dapat memakan waktu bertahun-tahun.
Alat pengembang modern dianjurkan untuk memperingatkan tentang penggunaan permintaan sinkron dan mungkin memunculkan pengecualian InvalidAccessError ketika itu terjadi.