Cara menggunakan CTACH pada JavaScript

Event yang kita gunakan adalah onreadystatechange, pada event ini kita bisa mengecek state dan status AJAX.

if[this.readyState == 4 && this.status == 200]{
    //...
}

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

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

Lalu coba perhatikan kode ini:

xhr.open["GET", url, true];

Terdapat tiga parameter yang kita berikan kepada method open[]:

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

Mari kita lanjutkan dengan contoh yang lainnya. Silahkan ubah isi file HTML yang tadi menjadi seperti ini:

    
    
    
    Belajar Dasar Ajax



    Tutorial Ajax Clear
    
    Load Content

    
        function loadContent[] {
            var xhr = new XMLHttpRequest[];
            var url = "//api.github.com/users/petanikode";

            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 = "";
        }
    

Hasilnya:

Mengirim Data ke Server dengan AJAX

    
    
    
    Belajar Dasar Ajax



    Kirim Data dengan Ajax
    
        
            Title
            
        
        
            Isi Artikel
            
        
        
    

    
        function sendData[] {
            var xhr = new XMLHttpRequest[];
            var url = "//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;
        }
    

Hasilnya:

Pengiriman data tersebut hanya untuk simulasi. Data tidak benar-benar akan terkirim ke server //jsonplaceholder.typicode.com/posts.

AJAX Menggunakan JQuery

JQuery adalah library Javascript yang menyederhanakan fungsi-fungsi Javascript. Pada JQuery, AJAX dapat 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]; 

Mari kita coba…

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

    
    
    
    Belajar AJAX dengan JQuery
    


    Load Data
    
    
    
        $["#result"].load["//api.github.com/users/petanikode"];
    

Hasilnya:

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.

Contoh lainnya menggunakan metode GET:

    
    
    
    Belajar AJAX dengan JQuery
    


    Load Data
    
    
    
    
    
    
    
        var url = "//api.github.com/users/petanikode";
        $.get[url, function[data, status]{
            $["#avatar"].attr["src", data.avatar_url];
            $["#name"].text[data.name];
            $["#location"].text[data.location];
        }];
    

Hasilnya:

Nah untuk mengirim data dengan AJAX di JQuery, caranya hampir sama seperti mengambil data dengan $.get[].

var url = "//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
}];

AJAX Menggunakan 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.2
• Fetch dapat digunakan di web browser dan juga Nodejs dengan modul node-fetch.

Berikut ini sintak dasar penggunaan Fetch.

fetch['//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

Mari kita coba…

Berikut ini contoh pengambilan data menggunakan fetch:

DOCTYPE html>


    
    
    
    Belajar Dasar Ajax dengan Fetch


    Tutorial Ajax dengan Fetch
    Load Content
    

    
        function loadContent[]{
            var url = "//jsonplaceholder.typicode.com/posts/";
            fetch[url].then[response => response.json[]]
                .then[function[data]{
                    var template = data.map[post => {
                        return `
                        
${post.title}
                        
${post.body}
                        
                        `;
                    }];

                    document.getElementById["hasil"].innerHTML = template.join['
'];
                }].catch[function[e]{
                    alert["gagal mengambil data"];
                }];
        }
    

Hasilnya:

Ajax Menggunakan 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['//jsonplaceholder.typicode.com/posts/']
  .then[function [response] {
    // handle success
    console.log[response];
  }]
  .catch[function [error] {
    // handle error
    console.log[error];
  }]
  .then[function [] {
    // always executed
  }];

Mari kita coba dalam HTML:

    
    
    
    Tutorial AJAX dengan AXIOS
    



    Tutorial AJAX dengan AXIOS
    Load Content
    

    
        function loadContent[] {
            document.getElementById["btn-load"].innerHTML = "loading...";
            document.getElementById["btn-load"].setAttribute["disabled", "true"];
            axios.get['//jsonplaceholder.typicode.com/posts/']
                .then[function [response] {
                    var template = response.data.map[post => {
                        return `
                        
${post.title}
                        
${post.body}
                        
                        `
                    }].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"];
                }];
        }
    

Hasilnya:

Ahir Kata….

Jadi… Cara mana yang paling bagus?

Tidak ada yang paling bagus dan jelek, di sini semuanya sama-sama bagus.

Tinggal kita saja yang menentukan, lebih nyaman pakai yang mana.

Kalau saya, lebih suka menggunakan fetch dari pada XMLHttpReques, JQuery, dan Axios.

Bagaimana denganmu?