AJAX - XMLHttpRequest
Objek XMLHttpRequest digunakan untuk meminta data dari server.
Kirim Permintaan ke Server
Untuk mengirim permintaan ke server, kami menggunakan metode open() dan send() dari XMLHttpRequest
objek:
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) |
Url - File Di Server
Parameter url dari open()
metode, 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
Nilai default untuk parameter async adalah async = true.
Anda dapat dengan aman menghapus parameter ketiga dari kode Anda.
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.
DAPATKAN atau POSTING?
GET
lebih sederhana dan lebih cepat dari 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
GET
Permintaan sederhana :
Contoh
xhttp.open("GET", "demo_get.asp");
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());
xhttp.send();
Jika Anda ingin mengirim informasi dengan GET
metode ini, tambahkan informasi ke URL:
Contoh
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
Bagaimana server menggunakan input dan bagaimana server menanggapi permintaan, dijelaskan dalam bab selanjutnya.
POSTING Permintaan
POST
Permintaan sederhana :
Contoh
xhttp.open("POST", "demo_post.asp");
xhttp.send();
Untuk POST data seperti formulir HTML, tambahkan header HTTP dengan setRequestHeader()
. Tentukan data yang ingin Anda kirim dalam send()
metode:
Contoh
xhttp.open("POST", "ajax_test.asp");
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 |
Permintaan Sinkron
Untuk menjalankan permintaan sinkron, ubah parameter ketiga dalam open()
metode 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, tidak perlu ada onreadystatechange
fungsi:
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.
Alat pengembang modern dianjurkan untuk memperingatkan tentang penggunaan permintaan sinkron dan mungkin memunculkan pengecualian InvalidAccessError ketika itu terjadi.