JQuery AJAX get/post data

 

jQuery merupakan pustaka JavaScript lintas-platform yang didesain untuk menyederhanakan client-side scripting pada HTML. Wikipedia. Sedangkan ajax merupakan Asynchronous JavaScript and XMLHTTP, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif.

Didunia frontend ajax sangatlah penting dalam penggunaannya, hampir semua tampilan intarktif didalam web menggunkan ajax. Sehingga anda perlu memahami bagaiman ajax bekerja, berikut kita bahas bersama.

Kalau dijabarkan dengan contoh sebuah fitur pada website, begini cara kerja AJAX: 

1. Browser memanggil AJAX javascript untuk mengaktifkan XMLHttpRequest dan mengirimkan HTTP Request ke server. 

2. XMLHttpRequest dibuat untuk memproses pertukaran data di server secara asinkron.

3. Server menerima, memproses, dan mengirimkan data itu  kembali ke browser.  

4. Browser menerima data tersebut dan langsung ditatampilkan di halaman website, tanpa perlu reload halaman.

Contoh koding ajax dalam script javascript asli sebagai berikut:

function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
    }
  xhttp.open("GET", "URL AJAX", true);
  xhttp.send();
}

sedangkan utuk cara simpel kita bisa load aja dengan jQuery, yaitu library javascript yang telah membuat fungsi-fungsi javascript lebih mudah digunakan.

$("button").click(function(){
  $.get("URL AJAX", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

atau 

$("button").click(function(){
  $.post("URL AJAX", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});