Cara menggunakan javascript clear history state

Kita bisa bisa melihat proses AJAX melalui inspect elemen di web browser, lalu buka tab Network dan aktifkan filter XHR [XML HTTP Request].

Oh iya, meskipun di AJAX ada kata “XML”… Bukan berarti hanya mendukung format XML saja.

AJAX juga mendukung format JSON, Plain Text, dan HTML.

Cara Menggunakan Ajax di Javascript

Langkah-langkah menggunakan AJAX seperti ini:

1. Membuat Objek Ajax

   var xhr = new XMLHttpRequest[];

2. Menentukan Fungsi Handler untuk Event

   xhr.onreadystatechange = function[] { ... };
   xhr.onload = function[] { ... };
   xhr.onerror = function[] { ... };
   xhr.onprogress = function[] { ... };

3. Menentukan Method dan URL

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

4. Mengirim Request

   xhr.send[];

Oke…

Mari kita coba.

Buatlah file HTML dengan isi sebagai berikut:

    
    
    
    Belajar Dasar Ajax


    Tutorial Ajax
    
    Load Content

    
        function loadContent[]{
            var xhr = new XMLHttpRequest[];
            var url = "//api.github.com/users/petanikode";
            xhr.onreadystatechange = function[]{
                if[this.readyState == 4 && this.status == 200]{
                    document.getElementById["hasil"].innerHTML = this.responseText;
                }
            };
            xhr.open["GET", url, true];
            xhr.send[];
        }
    

Hasilnya:

Pada contoh di atas, kita mengambil data dari server Github dengan methode GET. Lalu hasilnya langsung dimasukan ke dalam elemn

xhr.onreadystatechange = function[] { ... };
xhr.onload = function[] { ... };
xhr.onerror = function[] { ... };
xhr.onprogress = function[] { ... };

9.

Event yang kita gunakan adalah

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

0, pada event ini kita bisa mengecek state dan status AJAX.

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

Kode state

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

1 artinya done dan status

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

2 artinya sukses. Berikut ini daftar kode state AJAX.

KodeStateKeterangan0UNSENTObjek AAJAX sudah dibuat tapi belum memanggil method

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

3.1OPENEDMethod

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

3 sudah dipanggil.2HEADERS_RECEIVEDMethod

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

5 sudah dipanggil, dan di sini sudah tersedia header status.3LOADINGDownloading; sedang mendownload data.4DONEOperasi AJAX selesai.

Sementara untuk status header

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

2 adalah status HTTP Request. Biasanya kode di atas

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

2 artinya baik dan di bawah

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

2 artinya buruk.

Lalu coba perhatikan kode ini:

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

Terdapat tiga parameter yang kita berikan kepada method

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

3:

1. xhr.send[];

   0 adalah metode request yang akan digunakan;

2. xhr.send[];

   1 adalah alamat URL tujuan;

3. xhr.send[];

   2 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

xhr.send[];

3 lalu isi dengan kode berikut:

xhr.onreadystatechange = function[] { ... };
xhr.onload = function[] { ... };
xhr.onerror = function[] { ... };
xhr.onprogress = function[] { ... };

0

Hasilnya:

Dengan fungsi

xhr.send[];

4, kita bisa mengambil data dengan AJAX dan langsung menampilkannya pada elemen yang dipilih.

Fungsi JQuery

xhr.send[];

5 cocoknya untuk mengambil bagian dari HTML untuk ditampilkan.

Contoh lainnya menggunakan metode GET:

xhr.onreadystatechange = function[] { ... };
xhr.onload = function[] { ... };
xhr.onerror = function[] { ... };
xhr.onprogress = function[] { ... };

1

Hasilnya:

Nah untuk mengirim data dengan AJAX di JQuery, caranya hampir sama seperti mengambil data dengan

xhr.send[];

6.

xhr.onreadystatechange = function[] { ... };
xhr.onload = function[] { ... };
xhr.onerror = function[] { ... };
xhr.onprogress = function[] { ... };

2

AJAX Menggunakan Fetch API

Fetch artinya mengambil. Metode fetch bisa jadi alternatif untuk AJAX.

Methode ini mulai hadir pada Javascript versi ES6.

Perbedaanya dengan

xhr.onreadystatechange = function[] { ... };
xhr.onload = function[] { ... };
xhr.onerror = function[] { ... };
xhr.onprogress = function[] { ... };

8 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 juga Nodejs dengan modul

  xhr.send[];

  8.

Berikut ini sintak dasar penggunaan Fetch.

xhr.onreadystatechange = function[] { ... };
xhr.onload = function[] { ... };
xhr.onerror = function[] { ... };
xhr.onprogress = function[] { ... };

3

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

xhr.onreadystatechange = function[] { ... };
xhr.onload = function[] { ... };
xhr.onerror = function[] { ... };
xhr.onprogress = function[] { ... };

4

Mari kita coba…

Berikut ini contoh pengambilan data menggunakan fetch:

xhr.onreadystatechange = function[] { ... };
xhr.onload = function[] { ... };
xhr.onerror = function[] { ... };
xhr.onprogress = function[] { ... };

5

Hasilnya:

Ajax Menggunakan Axios

Axios hampir sama seperti fetch. Bedanya Axios adalah sebuah library sedangkan fetch adalah API yang tersedia di web browser.