Tutorial Laravel CRUD Ajax #1 : Apa itu Ajax ?


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com
Tutorial Laravel CRUD Ajax #1 : Apa itu Ajax ?

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.

  1. Client melakukan permintaan Ajax dengan cara mengaktifkan XMLHttpRequest dan melakukan proses request ke server.
  2. XMLHttpRequest digunakan agar Ajax bekerja secara asynchronus atau berjalan di background.
  3. Server menerima request yang dikirimkan, kemudian mengolah data tersebut di dalam server dan mengirimkan kembali ke browser.
  4. 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



Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami