Javascript

Request di AJAX: Cara Mengirim dan Contoh Codenya

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

Permintaan POST

Permintaan POST sederhana:

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<button type="button" >

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" >
MethodDescription
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" >

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" >

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.


Catur Kurnia Sari

Share
Tags: javascript