Penjelaskan AJAX beserta contoh programnya.

 AJAX: Mengenal Pengertian, Fungsi, dan Cara Kerjanya

Mengunjungi website yang terlalu banyak reload setiap kali klik fitur-fiturnya tentu menyebalkan, bukan? Belum lagi kalau ternyata loading website tersebut lemot. 

Untungnya ada AJAX yang biasa digunakan oleh web developer. Website jadi tak perlu direload setiap kali pengunjung klik fitur tertentu, seperti fitur chat, komentar, dan lainnya.  Aktivitas browser jadi tak terganggu, server tak terlalu terbebani, dan tentunya pengguna jadi lebih nyaman menggunakan website. 

Memangnya, apa sih AJAX itu? Terus, apa saja fungsi dan cara kerjanya sehingga website bisa lebih mudah dan nyaman digunakan. Nah, di artikel ini Anda akan belajar lebih detail mengenai AJAX. Yuk simak selengkapnya! 

Apa itu AJAX? 

“Capek euy reload halaman website mulu. Mana server kalo ditanya lama jawabnya..” protes browser

“Salah sendiri ga minta bantuan aku..” kata AJAX 

AJAX atau Asynchronous JavaScript and XML adalah teknik yang digunakan untuk membuat website yang dinamis. Artinya website mampu mengupdate dan menampilkan data baru dari server tanpa perlu melakukan reload. 

Salah satu contoh penggunaannya misalnya pada update jumlah angka likes dan komentar pada media sosial Instagram, Facebook, Twitter, dan lainnya. 

Sesuai namanya, AJAX terdiri dari JavaScript dan XML yang bekerja bersama. JavaScript adalah bahasa pemrograman untuk mengelola konten website yang dinamis. Sementara XML (eXtensible Markup Language) digunakan untuk memuat dan membawa data dari server ke browser. 

AJAX JavaScript dan XML ini bekerja secara asynchronous untuk berkomunikasi dengan server. Proses pertukaran informasi ini dilakukan di background. Artinya, saat AJAX JavaScript dan XML bekerja, halaman dapat tetap diakses oleh pengunjung website. 

Bagaimana cara kerja AJAX selengkapnya? 

 

Cara Kerja AJAX 

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

1. Browser akan memanggil AJAX javascript untuk mengaktifkan XMLHttpRequest dan mengirimkan HTTP Request ke server. 
2. XMLHttpRequest dibuat untuk proses pertukaran data di server secara asinkron.
3. Server menerima, memproses, dan mengirimkan data kembali ke browser.  
4. Browser menerima data tersebut dan langsung ditampilkan di halaman website, tanpa perlu reload atau membuat halaman baru. 

 

Fungsi AJAX 

Apa saja fungsi AJAX untuk website? Ini beberapa fungsinya: 

1.      Mengirim dan Mengambil Data dari Server 

AJAX dapat digunakan untuk mengirim pesan ke server lalu mengambil hasil data dari server ke browser. Prinsip yang dikerjakan pun adalah asynchronous. Jadi, selama proses mengirim pesan terjadi, browser bisa tetap terus digunakan sambil menunggu respon dari server. 

2.       Mengupdate Tampilan Website Tanpa Harus Reload

Semua orang suka yang praktis. Nah, dengan adanya AJAX, pengunjung website bisa lebih nyaman mengakses website tanpa perlu berulang kali reload halaman. Hal ini terjadi karena AJAX hanya mengirimkan sebagian data yang dibutuhkan untuk proses saja. 

3.      Membuat Website Lebih Cepat dan Responsif

Dengan adanya AJAX, hanya data yang diperlukan saja yang akan direquest ke server. Maka, proses di server bisa jadi lebih cepat dan data bisa langsung dikirim kembali ke browser. Imbas yang dirasakan pengunjung adalah loading website jadi lebih cepat.  

Jadi, pengunjung tak perlu menunggu lama ketika mengakses fitur di website seperti chat, komentar, dan lainnya. 

 

1. Chat

Seberapa sering Anda mengunjungi sebuah website dan menemukan fitur live chat di sana? Cukup sering, kan? 

Dengan adanya fitur chat, semakin mudah bagi pengunjung untuk berkomunikasi dengan pemilik website. 

Namun, coba bayangkan jika halaman website harus reload setiap pengunjung klik tombol kirim untuk chat. Bukannya membantu, fitur itu justru akan membuat pengunjung kesal, kan? 

Nah, dengan adanya AJAX, fitur chat di website bisa terus digunakan dengan nyaman. Apalagi, kalau performa website optimal. Proses chat bisa jadi lebih cepat. 

2. Voting dan Rating

Anda yang aktif di media sosial atau belanja online pasti sudah tak asing lagi dengan fitur voting Twitter atau rating di Google Bisnisku, bukan?

Nah, fitur tersebut dibuat menggunakan AJAX. Setelah Anda klik tombol like atau kirim rating, website akan langsung mengupdate jumlahnya tanpa reload atau mengubah tampilan halaman.

Sama halnya saat Anda mengisi kolom komentar pada postingan. Setelah mengirimkan komentar, website akan segera update hasilnya. 

 

3. Google Search Suggestion 

Kurang afdol rasanya kalau tidak memasukkan Google Search Suggestion sebagai contoh AJAX dalam website. Kenyataannya, popularitasnya semakin meningkat saat Google menggunakannya. 

Ketika Anda mengetikkan keyword di Google Search, Anda cukup mengetikkan beberapa kata saja. Nantinya, Google Search Suggestion akan memberikan rekomendasi terbaik secara cepat. Anda tak perlu menunggu lama dan berpindah halaman. 

Aplikasi yang Harus Disiapkan untuk Membuat AJAX

Ada beberapa aplikasi yang perlu Anda install untuk bisa menerapkan AJAX pada website Anda, yaitu:

·         Teks editor

·         Web server

·         Postman (opsional)

Penulisan AJAX dengan JavaScript dan PHP

Setelah mempersiapkan aplikasi untuk menggunakan AJAX. Berikut langkah-langkahnya:

 

1. Membuat Tampilan Website dan AJAX JavaScript

Pertama, buatlah file bernama ajax.html. Seperti  kode di bawah untuk membuat tampilan sederhana.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Belajar Dasar Ajax Bersama Niagahoster</title>

</head>

<body>

    <h1>Cara Mengirim Data ke Server dengan Ajax</h1>

    <form method="POST" onsubmit="return sendData()">

        <p>

            <label>Title</label>

            <input type="text" name="title" id="title" placeholder="Judul Artikel">

        </p>

        <p>

            <label>Isi Artikel di Sini</label><br>

            <textarea id="body" name="body" placeholder="Isi artikel bla bla..." cols="50" rows="10"></textarea>

        </p>

        <input type="submit" value="Kirim Sekarang" name="send" />

        <div id="show"></div>

    </form>

    <script>

        function sendData() {

            var xhr = new XMLHttpRequest();

            var url = "ajax.php";

            const title = document.querySelector("#title").value

            const body = document.querySelector("#body").value

            const data = "title="+title+"&body="+body

            xhr.open("POST", url, true);

            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            xhr.onload = function () {   

                const response = JSON.parse(this.responseText)

                const show = document.querySelector("#show")

                show.innerHTML = `

                <p>Judul Artikel : ${response.judul}</p>

                <p>Isi Artikel : ${response.isi}</p>`

            };

            xhr.send(data);

            const show = document.querySelector("#show")

            show.innerHTML = `Processing`

            return false;

        }

    </script>

</body>

</html>

 

2. Membuat AJAX PHP

Setelah berhasil membuat tampilan, kamu perlu membuat AJAX pada PHP. Tujuannya supaya data artikel seperti judul dan isi yang dimasukkan oleh pengguna bisa diterima oleh website.

Caranya adalah dengan membuat file bernama ajax.php. Kemudian, copy kode di bawah:

<?php

$judul = $_POST['title'];

$isi = $_POST['body'];

$json = ['judul'=>$judul, 'isi'=>$isi];

echo json_encode($json);

Setelah itu, Anda bisa coba jalankan website Anda. Apabila setelah mengisikan form judul dan isi artikel, data tersebut akan muncul langsung tanpa perlu reload, maka AJAX Anda berhasil.

 

Pastikan AJAX Menjadi Bagian Website Anda! 

Nah, itu tadi penjelasan lengkap mengenai AJAX. Anda sudah mempelajari pengertian dan cara kerja hingga fungsinya pada website. 

Dengan menggunakan AJAX, Anda dapat membuat website dengan user experience yang baik. Selain website jadi lebih cepat, pengunjung juga akan senang karena tak perlu sering reload untuk mengakses fitur di website. 

Beberapa fitur website yang menggunakan AJAX antara lain: live chat, sistem voting dan rating, notifikasi, dan masih banyak lagi termasuk Google Search Suggestion. 

Dengan semua manfaat yang ditawarkan, yakin tidak ingin menggunakan AJAX untuk di website Anda? 

 Blog in Saya buat untuk memenuhi tugas matakuliah Dasar Pemograman Frontend. Apabila ada kesalahan dalam penulisan, saya meminta maaf tanpa mengurangi rasa Hormat kepada para pembaca. Terimakasih.