Putri Aprilia Putri is an SEO Content Writer at Niagahoster. She has experience in SEO writing with business and tech topic.

AJAX: Mengenal Pengertian, Fungsi, dan Cara Kerjanya

4 min read

Apa itu AJAX

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. 

contoh AJAX Javascript pada twitter

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? 

Baca juga: Panduan Belajar HTML untuk Pemula 

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. 

Masih bingung dengan penjelasan di atas? Baiklah. Mari gunakan sebuah cerita untuk memahaminya..

Cara kerja AJAX Javascript

Katakanlah Anda sedang berada di kedai kopi AJAX dan memesan secangkir kopi kepada kasir. Lalu, kasir mengirim pesanan ke barista untuk membuatkan kopi sesuai pesanan Anda. Setelah kopi Anda jadi, akan ada pelayan yang mengantar kopi Anda.

Ketika ada orang lain yang ingin membeli kopi, kasir bisa kembali melayani tersebut. Semua prosesnya seperti yang terjadi pada Anda.

Berbeda ketika Anda memesan kopi di kedai kopi B Aja. 

cara kerja kedai kopi B Aja

Karena hanya ada seorang pelayan yang merangkap kasir dan barista, proses pemesanan dan penyajian kopi menjadi lama. Bahkan, pengunjung lain baru bisa dilayani setelah pesanan kopi sebelumnya selesai dibuat.  

Proses pemesanan pada kedai kopi B Aja mirip dengan apa yang terjadi jika sebuah website tidak memanfaatkan AJAX. 

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? 

Contoh AJAX pada chat website

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.

Rating Niagahoster

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. 

Contoh penggunaan AJAX Javascript pada Google Suggestion

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. Selanjutnya, Anda bisa copy 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>

Setelah itu, Anda akan mendapati halaman website Anda seperti di bawah. Itu tandanya Anda telah membuat tampilan website dengan baik.

2. Membuat AJAX PHP

Setelah berhasil membuat tampilan, Anda 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 di bawah 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? 

Putri Aprilia Putri is an SEO Content Writer at Niagahoster. She has experience in SEO writing with business and tech topic.