Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara membuat CRUD di Laravel menggunakan Ajax. Sebelum kita lanjut ke materinya, alangkah lebih baiknya kita pahami dulu apa sih Ajax itu ?.
Apa itu Ajax ?
Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Wikipedia
Ajax merupakan cara yang digunakan untuk membangun sebuah website secara dinamis dan interaktif tanpa perlu melakukan reload halaman.
Contoh sederhanya ketika kita melakukan like di Facebook, Twiter dan Instagram. Disitu terdapat proses Ajax dengan mengirimkan data ke server melalui background dan mengirimkan data kembali tanpa perlu reload disisi browser.
Dengan menerapkan Ajax pada website atau aplikasi yang kita bangun akan membuat menjadi lebih interaktif dan mudah untuk digunakan.
Bagaimana Cara Kerja Ajax ?
Berikut ini alur cara kerja Ajax.
- Client melakukan permintaan Ajax dengan cara mengaktifkan XMLHttpRequest dan melakukan proses request ke server.
-
XMLHttpRequest digunakan agar Ajax bekerja secara asynchronus atau berjalan di background.
-
Server menerima request yang dikirimkan, kemudian mengolah data tersebut di dalam server dan mengirimkan kembali ke browser.
-
Browser akan menerima data yang dikirimkan oleh server tanpa perlu melakukan reload halaman.
Dan untuk tutorial kali ini kita akan menggunakan jQuery untuk membuat Ajax dengan lebih cepat dan sederhana. Sebenernya kita juga bisa membuat Ajax tanpa jQuery, tapi kode-nya akan lebih panjang.
Apa itu jQuery ?
jQuery adalah library JavaScript yang digunakan untuk mempermudah dalam melakukan manipulasi DOM. jQuery bersifat open source dan pada survey yang dilakukan pad Agustus 2022, jQuery digunakan oleh 77% dari 10 juta situs web paling populer.
Contoh Penulisan Ajax dengan Vanilla JavaScript
Berikut ini contoh kode Ajax menggunakan vanilla JavaScript.
let xhr = new XMLHttpRequest();
let data = JSON.stringify({
title: document.getElementById("title").value,
content: document.getElementById("content").value,
});
xhr.open("POST", "https://santrikoding.com/api/posts", true);
xhr.send(data);
Contoh Penulisan Ajax dengan jQuery
Dan berikut ini contoh Ajax menggunakan jQuery.
$.ajax({
url: "https://santrikoding.com/api/posts",
type: "POST",
data: {
"title": $('#title');.val(),
"content": $("#content").val(),
},
});
Sampai disini pembahasan kita tentang apa itu Ajax dan jQuery dan di artikel selanjutnya kita akan belajar bersama-sama bagaimana cara mengimplementasikan Ajax jQuery di dalam framework Laravel untuk membuat proses CRUD tanpa reload halaman.
Terima Kasih