Pengenalan Ajax

Hai para pembaca pada artikel 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

 




Terimakasih telah membaca sampai akhir semoga artikel yang saya buat bisa bermanfaat bagi kalian para pembaca


Komentar

Posting Komentar

Postingan Populer