Merequest data menggunakan AJAX

 Halo semua ,pada kesempatan kali ini kita akan membahas tentang AJAX .

Apasih ajax itu ? AJAX adalah sebuah singkatan dari Asynchronous Javascript and XML dan mengacu pada sekumpulan teknis pengembangan web (web development) yang memungkinkan aplikasi web untuk bekerja secara asynchronous (tidak langsung) – memproses setiap request (permintaan) yang datang ke server di sisi background.

Nah disini kita akan belajar bagaiamana sihh merequests data melalui ajax. mari kita simak.

Jadi disini kita akan mengambil data user,id,title,dan body yang tersedia pada web https://jsonplaceholder.typicode.com/posts

berikut adalah source kodenya

<html>
<head>
    <script lang="javascript">
        function createRequestObject() {
            var ro;
            var browser = navigator.appName;
            if(browser == "Microsoft Internet Explorer"){
                ro = new ActiveXObject("Microsoft.XMLHTTP");
            }else{
                ro = new XMLHttpRequest();
            }
            return ro;
        }
        var http = createRequestObject();

        // kirim permintaan
        function sndReq() {
            http.open('get', 'https://jsonplaceholder.typicode.com/posts');
            http.onreadystatechange = handleResponse;
            http.send(null);
        }
        function handleResponse() {
            if(http.readyState == 4){ // permintaan selesai dan respons siap
                var response = http.responseText; // Mengembalikan data respons sebagai string
                document.getElementById('foo').innerHTML = response;
            }
        }
    </script>
</head>
<body>
    <a href ="javascript:sndReq()">Request</a>
    <div id="foo"></div>
</body>
</html>

1. Function CreateRequestsObject

Semua browser modern mendukung objek XMLHttpRequest.

Objek XMLHttpRequest dapat digunakan untuk bertukar data dengan server web di belakang layar. Ini berarti dimungkinkan untuk memperbarui bagian halaman web, tanpa memuat ulang seluruh halaman. Semua browser modern (Chrome, Firefox, IE, Edge, Safari, Opera) memiliki objek XMLHttpRequest bawaan. Sintaks untuk membuat objek XMLHttpRequest: variable = new XMLHttpRequest();

2. Function SndReq(Mengirim permintaan)

Saat pengguna mengklik link  "Requests" di atas, fungsi sndReq() dijalankan.

Fungsi sndReq() membuat objek  http.onreadystatechange = handleResponse; yaitu Mendefinisikan fungsi yang akan dipanggil ketika properti readyState berubah. Untuk mengirim permintan ke server  yaitu http.open('get', 'https://jsonplaceholder.typicode.com/posts');

3. Function HandleRequests

Kemudian menambahkan fungsi handleResponse  yang akan dieksekusi saat respons server siap, dan mengirimkan permintaan ke server.

Ketika respons server siap, , node (elemen) diekstraksi dari http, dan akhirnya memperbarui elemen "foo" dengan data yang tersedia. dan ini hasilnya . 

Pada hasil diatas terdapat data user,id,title dan body. Lalu kita coba untuk mengambil data body nya saja. caranya adalah dengan menambahkan kode pada function HandleRequests

function handleResponse() {
            if(http.readyState == 4){ // permintaan selesai dan respons siap
                var response = http.responseText; // Mengembalikan data respons sebagai string
                var jsonData = JSON.parse(response);
                var p = '';
                for(var i = 0; i < jsonData.length; i++){
                    p += '<p>'+jsonData[i].body+'</p>'; // mengambil artikel bodynya
                }
                document.getElementById('foo').innerHTML = p;
            }
        }

seperti ini hasilnya



Sekian pembahasan pada kali ini ,semoga bermanfaat . Terimakasih wahai para pembaca 

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat program kasir sederhana (Pilihan menu makanan) Python.

Gambar
Halo semua .Pada kesempatan kali ini kita akan membuat program kasir sederhana tapi hanya pilihan menunya saja  tanpa mencantumkan harga. Mari kita simak bersama Sebelumnya buat file terlebih dahulu dengan format python. Disini saya membuat file bernama tugas.py Yang pertama kita deklarasi list nya terlebih dahulu. Disini kita membuat pilihan 3 jenis menu yang berisi list/array   yaitu makanan,minuman,dan snack. Lalu menu makanan,minuman,dan snack juga berisi list di dalamnya. Variabel total digunakan untuk menampung total pesanan. # deklarasi list jenisMenu =[ "Makanan" , "Minuman" , "Snack" ] menuMakanan =[ "Nasi goreng" , "Nasi Pecel" , "Soto" , "Lalapan" ] menuMinuman =[ "Es teh" , "Es jeruk" , "Es degan" , "air putih" ] menuSnack =[ "Kuaci" , "Kentang goreng" , "Kucur" , "Jamur krispi" ] Total =[] Kemudian kita menggunakan perul...
Baca selengkapnya

FUNGSI DAN TUGAS BEBERAPA LEMBAGA YANG MENGATUR INTERNET

Hallo semua ,pernahkan kalian berpikir? siapa sihh yang mengatur segala kebutuhan internet yang kita gunakan ? nah pada materi ini kita akan membahas tentang tugas dan fungsi dari beberapa lembaga yang mengatur tentang internet . 1. Internet Society(ISOC) -> pihak yang melakukan pengulasan baik secara teknik maupun menetapkan standar terkait internet, membahas lapisan fisik jaringan inter 2. World Wide Web Consortium(W3C -> mengatur serta mengelola internet di seluruh dunia. Komunitas  internasional ini  yang bertujuan untuk membangun standar aturan web secara terbuka. Tugasnya membahas aturan data yang mengalir di internet , software yang berjalan di internet. 3. Internet Architecture Board (IAB) Internet Architecture Board (IAB) adalah badan koordinasi dan penasehat teknis bagi Internet Society (ISOC). Badan ini bertindak sebagai review teknik dan editorial akhir semua standar internet. Badan ini memiliki otoritas untuk menerbitkan dokumen standar internet yang d...
Baca selengkapnya

Penyusunan sketsa,penyusunan prototipe toko online dan menampilkan data toko online dalam bentuk json

Gambar
  penyususan sketsa website toko online. 1.         Membuat Sketsa Desain Buatlah sketsa homepage pada kertas Bufallo , sehingga terdapat gambaran mengenai homepage yang sudah selesai dan bagaimana cara mengatur letak halaman   setiap menunya. Pembuatan sketsa ini akan sangat membantu untuk membuat desain web yang mempunyai daya saing. Sayangnya, banyak orang yang melewatkan langkah pertama ini. Sketsa atau wireframe ini menjadi sangat penting karena menjadi acuan awal bagaimana website akan dibentuk. 2.         Membuat Layout Desain Anda dapat membuat layout desain atau memvisualisasikannya dengan menggunakan software seperti Figma untuk memperhalus sketsa desain yang telah selesai. 3.      Design system Desain Sistem didefinisikan sebagai penggambaran perencanaan dan pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah ke dalam satu kesatuan yang utuh dan memp...
Baca selengkapnya