Belajar Javascript: Apa itu AJAX? dan Bagaimana Cara Menggunakannya?

 

Apa itu AJAX?

AJAX merupakan singkatan dari Asynchronous Javascript Aand XML.

AJAX berfungsi untuk:

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

Pada dasarnya AJAX hanya menggunakan objek XMLHttpRequest untuk berkomunikasi dengan server.

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:

<!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</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/petanikode";
            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.

if(this.readyState == 4 && this.status == 200){
    //...
}

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

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.

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:

<!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/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 = "";
        }
    </script>
</body>
</html>




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>




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:

<!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/petanikode");
    </script>
</body>
</html>

Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar Python: Cara Membaca dan Menulis File di Python

Gambar
  Baca dan tulis file adalah teknik dasar yang harus dipahami dalam pemrograman Python, karena banyak digunakan untuk pengolahan dan pemerosesan file. Paham cara membaca dan menulis file dengan Python akan membuatmu mampu membuat aplikasi yang bisa mengambil dan menyimpan data ke file. Selain itu juga, kamu akan lebih mudah memahami beberapa materi Python Pada Python, file hanya dikelompokkan menjadi dua tipe: File Teks : File yang berisi teks. Setiap baris teks memiliki EOL  (End of Line) . Contoh: TXT, MD, CSV, JSON, dsb. File Binary : File yang bukan teks, hanya bisa diproses oleh program tertentu yang memahami strukturnya. Contoh: EXE, JPG, MKV, M4A, 3GP, dsb. Pada tutorial ini, kita akan hanya belajar cara membaca dan menulis file teks saja. Untuk file  binary , mungkin nanti di kesempatan yang lain. Cara Membaca File di Python Python sudah menyediakan fungsi  open()  untuk membaca dan menulis file.  1 Fungsi ini memiliki dua parameter, yaitu nama file...
Baca selengkapnya

Belajar Javascript: Memahami Struktur Data Array pada Javascript

  Apa itu Array? Sebelum kita membahas Array, kita bahas dulu apa itu struktur data? Struktur data  merupakan cara-cara atau metode yang digunakan untuk menyimpan data di dalam memori komputer. Salah satu struktur data yang sering digunakan dalam pemrograman adalah  Array . Array merupakan struktur data yang digunakan untuk  menyimpan sekumpulan data  dalam satu tempat. Setiap data dalam Array memiliki indeks, sehingga kita akan mudah memprosesnya. Indeks array selalu dimulai dari angka nol ( 0 ). Pada teori struktur data… …Ukuran array akan bergantung dari banyaknya data yang ditampung di dalamnya. Cara Membuat Array pada Javascript Pada javascript, array dapat kita buat dengan tanda kurung siku ( [...] ). Cara Menambahkan Data ke Dalam Array Ada dua cara yang bisa dilakukan untuk menambah data ke dalam array: Mengisi menggunakan indeks; Mengisi menggunakan method  push() . Terdapat tiga data di dalam array  buah  dengan indeks: 0 :  "Apel" ...
Baca selengkapnya

Fungsi dan cara kerja HTML

Gambar
  Apa itu HTML?  Hypertext Markup Language  atau  HTML  adalah bahasa markup yang digunakan untuk membuat sebuah halaman web. Isinya terdiri dari berbagai kode yang dapat menyusun struktur suatu website. HTML terdiri dari kombinasi teks dan simbol yang disimpan dalam sebuah file. Dalam membuat file HTML, terdapat standar atau format khusus yang harus diikuti. Format tersebut telah tertuang dalam standar kode internasional atau  ASCII (American Standard Code for Information Interchange).  Dengan adanya HTML, pengguna dapat membuat atau menyusun heading, paragraf, gambar, link, dan lainnya supaya dapat dilihat banyak orang melalui halaman website.  Baca juga:  Cara Memasukkan dan Mengatur Gambar di HTML Untuk bisa diakses secara umum, pengguna perlu membukanya lewat aplikasi browser, seperti Internet Explorer, Chrome, atau Mozilla Firefox.  Setelah mengetahui pengertian HTML di atas, Anda mungkin penasaran bagaimana sejarah lahirnya HTML h...
Baca selengkapnya