AJAX - XMLHttpRequest

Objek XMLHttpRequest digunakan untuk menghantarkan data dengan server.

Kirim permintaan ke server

Untuk mengirim permintaan ke server, kami menggunakan objek XMLHttpRequest: open() dan send() Metode:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Metode Deskripsi
open(method, url, async)

Tentukan tipe permintaan

  • method:tipe permintaan: GET atau POST
  • url:lokasi server (berkas)
  • async:true (asinkron) atau false (sinkron)
send() Kirim permintaan ke server (digunakan untuk GET)
send(string) Kirim permintaan ke server (digunakan untuk POST)

GET atau POST?

GET lebih mudah dan cepat daripada POST, dan dapat digunakan di sebagian besar situasi.

Namun, selalu gunakan POST di berbagai situasi berikut:

  • Berkas cache bukan opsi (update berkas atau database di server)
  • Kirim data besar ke server (tidak ada batas ukuran untuk POST)
  • Kirim input pengguna (dapat mengandung karakter yang tak dikenal), POST lebih kuat dan aman daripada GET

Permintaan GET

Permintaan GET sederhana:

Contoh

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

Coba Sendiri

Dalam contoh di atas, Anda mungkin mendapatkan hasil yang disimpan di cache. Untuk menghindari hal ini, tambahkan ID yang unik ke URL:

Contoh

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

Coba Sendiri

Jika Anda ingin mengirimkan informasi menggunakan metode GET, tambahkan informasi ini ke URL:

Contoh

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

Coba Sendiri

Permintaan POST

Permintaan POST sederhana:

Contoh

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

Coba Sendiri

Jika ingin mengirim data seperti formulir HTML, melalui: setRequestHeader() Tambahkan header HTTP. Silakan di: send() Aturan dalam metode ini adalah data yang harus dikirimkan:

Contoh

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

Coba Sendiri

Metode Deskripsi
setRequestHeader(header, value)

Menambahkan header HTTP ke permintaan

  • header：menetapkan nama header
  • value：menetapkan nilai header

url - Berkas di server

metode open() url parameter, adalah alamat berkas di server:

xhttp.open("GET", "ajax_test.asp", true);

Berkas ini dapat berupa berbagai jenis berkas, seperti .txt dan .xml, atau berkas skrip server, seperti .asp dan .php (mereka dapat dijalankan di server sebelum mengirim tanggapan).

Asinkron - true atau false?

Jika ingin mengirim permintaan asinkron:open() metode async parameter harus diatur sebagai true:

xhttp.open("GET", "ajax_test.asp", true);

Pengiriman permintaan asinkron adalah kemajuan besar bagi para pengembang web. Banyak tugas yang dijalankan di server sangat lama. Sebelum AJAX, operasi ini dapat menyebabkan aplikasi hengkang atau berhenti.

Dengan pengiriman asinkron, JavaScript tidak perlu menunggu tanggapan server, melainkan dapat:

  • Melaksanakan skrip lain saat menunggu tanggapan server
  • Menangani tanggapan saat tanggapan siap

Properti onreadystatechange

Dengan objek XMLHttpRequest, Anda dapat mendefinisikan fungsi yang akan dieksekusi saat permintaan menerima tanggapan.

Fungsi ini berada di dalam objek XMLHttpResponse onreadystatechange yang didefinisikan dalam properti:

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();

Coba Sendiri

Anda akan belajar lebih banyak tentang onreadystatechange di bab mendatang.

Permintaan sinkron

Jika ingin melaksanakan permintaan sinkron, silakan buat open() Parameter ketiga di dalam method diatur untuk false:

xhttp.open("GET", "ajax_info.txt", false);

Kadang-kadang async = false digunakan untuk pengujian cepat. Anda juga akan melihat permintaan sinkron di kode JavaScript yang lebih lama.

Karena kode akan menunggu penyelesaian server, jadi tidak perlu fungsi onreadystatechange:

Contoh

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

Coba Sendiri

Kami tidak menyarankan XMLHttpRequest sinkron (async = false), karena JavaScript akan berhenti eksekusi sampai tanggapan server siap. Jika server sibuk atau lambat, aplikasi akan terhenti atau berhenti.

XMLHttpRequest sinkron sedang dipindahkan dari Standar Web, tetapi proses ini mungkin memerlukan berbagai tahun.

Alat pengembangan modern disarankan untuk memberikan peringatan tentang permintaan sinkron, dan mungkin akan mengeksperimen dengan eksepsi InvalidAccessError ketika hal ini terjadi.