Home » XML » Request di AJAX: Cara Membuat dan Menggunakannya

Request di AJAX: Cara Membuat dan Menggunakannya

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Objek XMLHttpRequest digunakan untuk bertukar data dengan server.

Kirim Permintaan ke Server

Untuk mengirim permintaan ke server, kita gunakan metode open () dan send () dari objek XMLHttpRequest:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
MethodDeskripsi
open(method, url, async)Menentukan jenis permintaan

method: jenis permintaan: GET atau POST
url: lokasi server (file)
async: true (asynchronous) or 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 opsi (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.

GET Request

GET Request sederhana:

Contoh :

<!DOCTYPE html>
<html>
<body>

<h1>The XMLHttpRequest Object</h1>

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

Pada contoh di atas, kita mungkin akan mendapatkan hasil yang di-cache. Untuk menghindarinya, tambahkan ID unik ke URL:

<!DOCTYPE html>
<html>
<body>

<h1>The XMLHttpRequest Object</h1>

<button type="button" onclick="loadDoc()">Request data</button>

<p>Klik tombol beberapa kali untuk melihat apakah waktu berubah, atau jika file di-cache.</p>

<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?t=" + Math.random(), true);
  xhttp.send();
}
</script>

</body>
</html>

Jika ingin mengirim informasi dengan metode GET, tambahkan informasi ke URL:

Contoh :

<!DOCTYPE html>
<html>
<body>

<h1>The XMLHttpRequest Object</h1>

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

POST Request

POST Request sederhana:

Contoh :

<!DOCTYPE html>
<html>
<body>

<h1>The XMLHttpRequest Object</h1>

<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 di kirim dengan metode send ():

Contoh :

<!DOCTYPE html>
<html>
<body>

<h1>The XMLHttpRequest Object</h1>

<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>
MethodDeskripsi
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 mengirimkan 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
  • hadapi tanggapan setelah tanggapan siap

Properti onreadystatechange

Dengan objek XMLHttpRequest Anda bisa mendefinisikan fungsi yang akan dijalankan ketika permintaan menerima jawaban.

Fungsi ini didefinisikan dalam properti onreadystatechange dari objek XMLHttpResponse:

Contoh :

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h1>The XMLHttpRequest Object</h1>
<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>

Synchronous Request

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 sampai server selesai, tidak diperlukan fungsi onreadystatechange:

Contoh :

<!DOCTYPE html>
<html>
<body>

<h1>The XMLHttpRequest Object</h1>

<p id="demo">Biarkan AJAX merubah teks 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.

You may also like