Skip to content
Multi Doc

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 element di web browser, lalu buka tab Network dan aktifkan filter XHR (XML HTTP Request).

Beberapa format yg didukung AJAX adalah: XML,JSON,Plain Text,dan HTML.

Penggunaan AJAX

1 Membuat Objek AJAX

Terminal window
var xhr = new XMLHttpRequest();

2 Menentukan Fungsi Handler untuk Event

Terminal window
xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };

3 Menentukan Method dan URL

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

4 Mengirim Request

Terminal window
xhr.send();

Lets Try !!!

buat kode html

Terminal window
<!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/cidara-dev";
            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>

hasilnya :

Pada contoh di atas, kita mengambil data dari server Github dengan methode GET. Lalu hasilnya langsung dimasukan ke dalam elemnt <div id="hasil">.

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

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

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

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:

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

Terdapat tiga parameter yang kita berikan kepada method open():

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

buat kamu yang ingin lebih tahu tentang AJAX, MONGGO