Belajar Javascript #13 – Cara menggunakan AJAX

Pada artikel kali ini kita akan belajar tentang AJAX mulai dari pengertian dan cara kerja, fungsi hingga cara menggunakan ajax beserta contoh program. Mari simak bersama

Pengenalan tentang AJAX

AJAX merupakan singkatan dari Asynchronous Javascript Aand XML adalah teknik yang ada pada website yang berfungsi untuk mengupdate dan menampilkan data baru dari server tanpa perlu melakukan reload.. Pada dasarnya AJAX hanya menggunakan objek XMLHttpRequest untuk berkomunikasi dengan server.

Baca juga : Membuat javascript di html

Cara Kerja AJAX

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

Fungsi AJAX

  • Mengambil data dari server secara background;
  • Update tampilan web tanpa harus reload browser;
  • Mengirim data ke server secara background.

Kita bisa bisa melihat proses AJAX melalui inspect elemen di web browser, lalu buka tab Network dan aktifkan filter XHR (XML HTTP Request). Selain format XML, AJAX juga mendukung format JSON, Plain Text, dan HTML.

Bahan yang Harus Disiapkan untuk menggunakan AJAX

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

  • Web server
  • Teks editor
  • Postman (opsional)

Cara Menggunakan Ajax di Javascript

Langkah-langkah menggunakan AJAX seperti ini:

Membuat Objek Ajax

var xhr = new XMLHttpRequest();

Menentukan Fungsi Handler untuk Event

xhr.onreadystatechange = function() { ... };<br>xhr.onload = function() { ... };<br>xhr.onerror = function() { ... };<br>xhr.onprogress = function() { ... };

Menentukan Method dan URL

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

Mengirim Request

xhr.send();

Contoh :

Buatlah file HTML dengan isi sebagai berikut:

<!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>Cara Menggunakan Ajax di Javascript</title>
</head>
<body>
    <h1>Tutorial Ajax</h1>
    <div id="hasil"></div>
    <button onclick="loadContent()">Load Content</button>

    <script>
        function loadContent(){
            var xhr = new XMLHttpRequest();
            var url = "https://api.github.com/users/irpah";
            xhr.onreadystatechange = function(){
                if(this.readyState == 4 && this.status == 200){
                    document.getElementById("hasil").innerHTML = this.responseText;
                }
            };
            xhr.open("GET", url, true);
            xhr.send();
        }
    </script>
</body>
</html>

Pada contoh di atas, kita mengambil data dari server Github dengan methode GET. Lalu hasilnya langsung dimasukan ke dalam elemn <div id=”hasil”>. Event yang kita gunakan adalah onreadystatechange, pada event ini kita bisa mengecek state dan status AJAX. maka hasilnya akan terlihat seperti gambar dibawah ini

Kode state 4 artinya done dan status 200 artinya sukses. Berikut ini daftar kode state AJAX.

KodeStateKeterangan
0UNSENTObjek AAJAX sudah dibuat tapi belum memanggil method open().
1OPENEDMethod open() sudah dipanggil.
2HEADERS_RECEIVEDMethod send() sudah dipanggil, dan di sini sudah tersedia header status.
3LOADINGDownloading; sedang mendownload data.
4DONEOperasi AJAX selesai.

Sementara untuk status header 200 adalah status HTTP Request. Biasanya kode di atas 200 artinya baik dan di bawah 200 artinya buruk.

Ada tiga parameter yang kita berikan kepada method open():
Contoh : xhr.open(“GET”, url, true);

  • GET adalah metode request yang akan digunakan;
  • url adalah alamat URL tujuan;
  • true adalah untuk mengeksekusi AJAX secara asynchronous.

Silahkan ubah isi file HTML yang tadi menjadi seperti ini:

<!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</title>
</head>

<body>
    <h1>Tutorial Ajax <button id="btn-clear" onclick="clearResult()">Clear</button></h1>
    <div id="hasil"></div>
    <button id="button" onclick="loadContent()">Load Content</button>
    <script>
        function loadContent() {
            var xhr = new XMLHttpRequest();
            var url = "https://api.github.com/users/irpah";

            xhr.onloadstart = function () {
                document.getElementById("button").innerHTML = "Loading...";
            }

            xhr.onerror = function () {
                alert("Gagal mengambil data");
            };

            xhr.onloadend = function () {
                if (this.responseText !== "") {
                    var data = JSON.parse(this.responseText);
                    var img = document.createElement("img");
                    img.src = data.avatar_url;
                    var name = document.createElement("h3");
                    name.innerHTML = data.name;

                    document.getElementById("hasil").append(img, name);
                    document.getElementById("button").innerHTML = "Done";

                    setTimeout(function () {
                        document.getElementById("button").innerHTML = "Load Lagi";
                    }, 3000);
                }
            };
            xhr.open("GET", url, true);
            xhr.send();
        }
        function clearResult() {
            document.getElementById("hasil").innerHTML = "";
        }
    </script>
</body>
</html>

Hasilnya :

cara menggunakan ajax

Mengirim Data ke Server dengan AJAX

<!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</title>
</head>
<body>
    <h1>Kirim Data dengan Ajax</h1>
    <form method="POST" onsubmit="return sendData()">
        <p>
            <label>Title</label>
            <input type="text" id="title" placeholder="judul artikel">
        </p>
        <p>
            <label>Isi Artikel</label><br>
            <textarea id="body" placeholder="isi artikel..." cols="50" rows="10"></textarea>
        </p>
        <input type="submit" value="Kirim" />
    </form>
    <script>
        function sendData() {
            var xhr = new XMLHttpRequest();
            var url = "https://jsonplaceholder.typicode.com/posts";

            var data = JSON.stringify({
                title: document.getElementById("title").value,
                body: document.getElementById("body").value,
                userId: 1
            });

            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            xhr.onload = function () {               
                console.log (this.responseText);
            };
            xhr.send(data);
            return false;
        }
    </script>
</body>
</html>

Hasilnya :

cara menggunakan ajax

Data tidak benar-benar akan terkirim ke server karena hanya untuk simulasi. https://jsonplaceholder.typicode.com/posts.

Menggunakan AJAX dengan JQuery

JQuery adalah library Javascript yang menyederhanakan fungsi-fungsi Javascript. Pada JQuery, AJAX bisa dibuat seperti ini:

// load data ke elemen tertentu via AJAX
$(selector).load(URL,data,callback);
// ambil data dari server
$.get(URL,callback);
// kirim data dari Server
$.post(URL,data,callback); 

Buatlah file baru bernama ajax-jquery.html lalu isi dengan kode berikut:

<!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 AJAX dengan JQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
    <h1>Load Data</h1>
    <pre id="result"></pre>
    <script>
        $("#result").load("https://api.github.com/users/irpah");
    </script>
</body>
</html>

Dengan fungsi $(“#result”).load(), kita bisa mengambil data dengan AJAX dan langsung menampilkannya pada elemen yang dipilih. Fungsi JQuery load() cocoknya untuk mengambil bagian dari HTML untuk ditampilkan. Hasilnya seperti pada gambar dibawah ini

cara menggunakan ajax

Untuk mengirim data dengan AJAX di JQuery, caranya hampir sama seperti mengambil data dengan $.get().

    var url = "https://jsonplaceholder.typicode.com/posts";
    var data = {
        title: "Tutorial AJAX dengan JQuery",
        body: "Ini adalah tutorial tentang AJAX",
        userId: 1
    };
    $.post(url, data, function(data, status){
        // data terkkirim, lakukan sesuatu di sini
    });

Contoh :

<!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 AJAX dengan JQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
    <h1>Load Data</h1>
    <img id="avatar" src="" width="100" height="100">
    <br>
    <h3 id="name"></h3>
    <p id="location"></p>
    <script>
        var url = "https://api.github.com/users/irpah";
        $.get(url, function(data, status){
            $("#avatar").attr("src", data.avatar_url);
            $("#name").text(data.name);
            $("#location").text(data.location);
        });
    </script>
</body>
</html>

Hasilnya :

cara menggunakan ajax

Menggunakan AJAX dengan Fetch API

Fetch artinya mengambil. Metode fetch bisa jadi alternatif untuk AJAX. Methode ini mulai hadir pada Javascript versi ES6. Perbedaanya dengan XMLHttpRequest dan JQuery adalah:

  • Fetch akan mengembalikan sebuah promise;
  • Secara bawaan (default), fetch tidak akan mengirim atau menerima cookie dari server
  • Fetch dapat digunakan di web browser dan Nodejs dengan modul node-fetch.

Berikut ini sintak dasar penggunaan Fetch.

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

Dan untuk pengiriman data dengan metode POST, bentuknya seperti ini:

fetch(url, {
        method: "POST", // *GET, POST, PUT, DELETE, etc.
        mode: "cors", // no-cors, cors, *same-origin
        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
        credentials: "same-origin", // include, *same-origin, omit
        headers: {
            "Content-Type": "application/json",
            // "Content-Type": "application/x-www-form-urlencoded",
        },
        redirect: "follow", // manual, *follow, error
        referrer: "no-referrer", // no-referrer, *client
        body: JSON.stringify(data), // body data type must match "Content-Type" header
    })
    .then(response => response.json()); // parses JSON response into native Javascript objects

Berikut ini contoh pengambilan data menggunakan fetch:

<!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 dengan Fetch</title>
</head>
<body>
    <h1> Praktek Otodidak</h1>
    <button onclick="loadContent()">Load Content</button>
    <div id="hasil"></div>
    <script>
        function loadContent(){
            var url = "https://jsonplaceholder.typicode.com/posts/";
            fetch(url).then(response => response.json())
                .then(function(data){
                    var template = data.map(post => {
                        return `
                        <h3>${post.title}</h3>
                        <p>${post.body}</p>
                        <hr>
                        `;
                    });
                    document.getElementById("hasil").innerHTML = template.join('<br>');
                }).catch(function(e){
                    alert("gagal mengambil data");
                });
        }
    </script>
</body>
</html>

Hasilnya :

cara menggunakan ajax

Menggunakan AJAX dengan Axios

Axios hampir sama seperti fetch. Bedanya Axios adalah sebuah library sedangkan fetch adalah API yang tersedia di web browser. Axios juga sama-sama bisa digunakan di web browser dan Nodejs. Contoh AJAX dengan Axios:

axios.get('https://jsonplaceholder.typicode.com/posts/')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});

Contoh :

<!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>Tutorial AJAX dengan AXIOS</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <h1>Praktek Otodidak.com</h1>
    <button id="btn-load" onclick="loadContent()">Load Content</button>
    <div id="result"></div>
    <script>
        function loadContent() {
            document.getElementById("btn-load").innerHTML = "loading...";
            document.getElementById("btn-load").setAttribute("disabled", "true");
            axios.get('https://jsonplaceholder.typicode.com/posts/')
                .then(function (response) {
                    var template = response.data.map(post => {
                        return `
                        <h3>${post.title}</h3>
                        <p>${post.body}</p>
                        <hr>                        `
                    }).join("");
                    document.getElementById("result").innerHTML = template;
                })
                .catch(function (error) {
                    // handle error
                    console.log(error);
                })
                .then(function () {
                    document.getElementById("btn-load").innerHTML = "Done";
                    document.getElementById("btn-load").removeAttribute("disabled");
                });
        }
    </script>
</body>
</html>

Hasilnya :

Begitulah penjelasan lengkap mengenai AJAX yang sudah kita pelajari mulai dari pengertian dan cara kerja, fungsi hingga cara menggunakan ajax beserta contohnya..

Tinggalkan Balasan

Scroll to Top