- readyState
                    readyState == 0 // 0(UNSENT) xhr telah dibuat, tetapi method "open()" belum dipanggil
                    readyState == 1 // 1(opened) method "open" telah dipanggil
                    readyState == 2 // 2(HEADERS_RECEIVED) method "send()" telah dipanggil dan respons header telah diterima
                    readyState == 3 // 3(LOADING) data respons sedang diunduh
                    readyState == 4 // 4(DONE) operasi selesai, Data telah sepenuhnya diunduh

                - status
                    status == 200 // 200:OK
                    status == 404 // 404:Not Found
                    status == 500 // 500:Internet Server Error

                    statusText adalah value yang berisi text yang telah di ambil oleh status
                
                - response
                    respons // berisi respons dari server dalam bentuk yang sesuai jenis konten : teks, JSON, XML, dll

                    responseText // berisi respons dari server dalam bentuk teks
                    responseXML // berisi respons dari server dalam bentuk XML
                    responseType // menentukan tipe data yang diharapkan untuk respons

                - timeout
                    timeout // mengatur waktu maximum yang diijimkan untuk permintaan
                    event ontimeout akan dipicu

                - withCredentials // untuk memgidintifikasi apakah permintaan harus menyertakan kredensial (seperti cookie/ header otentikasi HTTP) saat melakukam permintaan lintas domain (CORS)

                - upload // sub object yang merujuk ke bagian upload dari permintaan dapat dapat menggunakan sub object ini untuk mengakses prepoerty terkait upload, seperti "onprogress" untuk memantau kemajuan upload

            

                var data = JSON.parse(this.responseText);
                    fungsi JSON.parse()
                    fungsi this.responsText adalah sebagai string JSON yang di terima dari API GiTHUB 
                    dan menggunakan JSON.parse untuk mengubah string menjadi object JavaScript yang di simpan di dalman variable data
                
                // mengubah data string menjadi object
                var data = JSON.parse(this.responseText);

                console.log(data); //berisi object data
                    {
                        nameL : "ariafatah"
                        avatar_url: "https://avatars.githubusercontent.com/u/125982341?v=4"
                        bio: "Just learn Coding"
                        blog: "https://s.id/ariafatah"
                    }

                // mengambil data img,  name, bio
                    var img = document.createElement("img"); // data.avatar_url
                    img.src = data.avatar_url;
                    var name = document.createElement(("h3")); // data.name
                    name.innerHTML = data.name;
                    var bio = document.createElement("h4"); // data.bio
                    bio.innerHTML = data.bio;

                // mengappend img,name,bio ke dalam elemen id hasil, dan mengubah value button menjadi done
                    document.getElementById("hasil").append(img, name, bio);
                    document.getElementById("button").innerHTML = "Done";

            

                function loadContent() {
                    var xhr = new XMLHttpRequest();
                    var url = "https://api.github.com/users/ariafatah0711";
        
                    xhr.onloadstart = function() {
                        document.getElementById("button").innerHTML = "Loading...";
                    };
        
                    xhr.onerror = function() {
                        alert("gagal mengambil data");
                    };
        
                    xhr.onloadend = function() {
                        // if data responsText tidak kosong/null/""
                        if(this.responText !== "") {
                            // mengubah data string menjadi object
                            var data = JSON.parse(this.responseText);
                            console.log(data); //berisi object data
                            
                            // mengambil data img,  name, bio
                            var img = document.createElement("img"); // data.avatar_url
                            img.src = data.avatar_url;
                            var name = document.createElement(("h4")); // data.name
                            name.innerHTML = data.name;
                            var bio = document.createElement("h5"); // data.bio
                            bio.innerHTML = data.bio;
        
                            // mengappend img,name,bio ke dalam elemen id hasil, dan mengubah value button menjadi done
                            document.getElementById("hasil").append(img, name, bio);
                            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 = "";
                }