Merequests data JSON menggunakan AJAX #2

 Halo semua pada kesemapata kali ini kita kembali membahas tentang requests data JSON mengunakan AJAX part 2 . Yang belum membaca artikel part 1 ,silahkan dibaca dulu yaa . 

Pada pembahasan part 1 kita telah merequest data user yang berisikan atribut id,name,location . Nah kali ini kita akan merequest data mahasiswa dengan atribut nim dan nama. Kemudian ditampilkan dalam bentu tabel.

berikut adalah source code JSON.

{
    "mahasiswa":[{
        "nim":123,
        "nama": "roy"
    },  {
        "nim":2345,
        "nama": "sam"
       
    }]
}

Untuk menjalankanya buka terlebih dahulu di terminal sesuai lokasi file .kemudian tersedia alamat portnya http://localhost:3000/mahasiswa




Kemudian kita buat lagi  file AJAX.

<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();

        function sndReq() {
            http.open('get', 'http://localhost:3000/mahasiswa');
            http.onreadystatechange = handleResponse;
            http.send(null);
        }
        function handleResponse() {
            if(http.readyState == 4){
                var response = http.responseText;
                var jsonData = JSON.parse(response);
                var t = '<table border="1">';
                t += '<tr><td>nim</td><td>nama</td></tr>';
                for(var i = 0; i < jsonData.length; i++){
                    t += '<tr><td>'+jsonData[i]["nim"]+'</td><td>'+jsonData[i]["nama"]
+'</td></tr>';
                }
                t += '</table>';
                document.getElementById('foo').innerHTML = t;
            }
        }
    </script>
</head>
<body>
    <a href ="javascript:sndReq()">Request</a>
    <div id="foo"></div>
</body>
</html>

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', 'http://localhost:3000/mahasiswa');

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

Ketika respons server siap, tabel HTML dibuat, node (elemen) diekstraksi dari file JSON, dan akhirnya memperbarui elemen "foo" dengan tabel HTML yang diisi dengan data XML: 

Untuk menampilkan dalam bentuk tabel 

var t = '<table border="1">';
                t += '<tr><td>nim</td><td>nama</td></tr>';
                for(var i = 0; i < jsonData.length; i++){
                    t += '<tr><td>'+jsonData[i]["nim"]+'</td><td>'+jsonData[i]["nama"]
+'</td></tr>';
                }
                t += '</table>';

kita buat variabel t yang berisi tabel dengan 2 kolom nim dan nama ,kemudian lakukan perulangan sebanyak data json.

ini hasilnya 



Sekian pembahasan kali ini semoga bermanfaat .TERIMAKASIH 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