Ajax

-

 

Apa Itu Ajax ?

    Ajax Merupakan kependekan dari "Asynchronous JavaScript And XML". Ajax sendiri sebenarnya bukanlah suatu bahasa pemrograman, akan tetapi sebuah teknik yang memungkinkan untuk membuat aplikasi web yang interaktif. Dengan adanya ajax aplikasi web mampu berinteraksi dengan server di latar belakang sehingga tidak mempengaruhi halaman web secara keseluruhan.

     Pengembangan web secara statis bekerja secara synchronously antara aplikasi dan server setiap kali melakukan tindakan pada form dengan cara browser mengirim data ke server, server merespon dan seluruh halaman akan di refresh. Berbeda dengan web yang dibangun dengan Ajax dimana bekerja secara asyncrounously yang berarti mengirim dan menerima data dari pengguna ke server tanpa perlu me-reload kembali seluruh halaman, melainkan hanya melakukan penggantian web yang dikehendaki.

Kelebihan Ajax

Ajax sendiri sebagai salah satu teknik pemrograman mempunyai beberapa kelebihan diantaranya yaitu:

  1. Membuat permintaan (request) kepada server tanpa membuat kembali (reload) halaman.
  2. Data yang dikirim sedikit sehingga menghemat bandwith dan mempercepat koneksi.
  3. Proses dilakukan dibelakang layar.
  4. Banyak didukung oleh browser-browser baru yang populer.
  5. Aplikasi yang dibangun semakin interaktif dan dinamis.

Kelemahan Ajax

Kelemahan dari Ajax yaitu:

  1. Integrasi browser, karena konten halaman menganut prinsip asinkron, di mana data bisa di-update tanpa halaman di-refresh, jadi perubahan tampilan tidak tercatat pada bagian history dari browser. sehingga ketika tombol Back di pilih, yang muncul bukan tampilan seperti sebelum mengeksekusi kode Ajax, akan tetapi halaman sebelumnya.
  2. Search engine optimization, karena konten di-generate menggunakan JavaScript, search engine tidak bisa mengindeksnya sehingga mengurangi efektivitas halaman ditinjau dari SEO.
  3. Terlalu mengandalkan JavaScript, Ajax menggunakan JavaScript, yang kadang diimplementasikan secara berbeda di berbagai browser atau versi tertentu dari sebuah browser.
  4. Apabila pengguna mendisable JavaScript di browser-nya, maka Ajax tidak akan bisa digunakan.

Cara Kerja Ajax

Kalau dijabarkan dengan contoh sebuah fitur pada website, seperti ini cara kerja AJAX: 

  1. Browser akan memanggil AJAX javascript untuk mengaktifkan XMLHttpRequest dan mengirimkan HTTP Request ke server. 
  2. XMLHttpRequest dibuat untuk proses pertukaran data di server secara asinkron.
  3. Server menerima, memproses, dan mengirimkan data kembali ke browser.  
  4. Browser menerima data tersebut dan langsung ditampilkan di halaman website, tanpa perlu reload atau membuat halaman baru.

Pada dasarnya, AJAX hanya menggunakan objek XMLHttpRequest untuk berkomunikasi dengan server. Ayo kita eksekusi kodenya!!

Buatlah file html biasa, di dalam body kita membuat button dan div untuk menampilkan text

1
2
3
4
5
<button>
    click me!
</button>
<div id='h'>
</div>

Kemudia membuat function createRequestObject() untuk membuat request, apabila browsernya internet explorer untuk membuatnya menggunakan ActiveXObject(“Microsoft.XMLHTTP”) jika browser yang lainya menggunakan XMLHttpRequest() , kodenya seperti berikut

1
2
3
4
5
6
7
8
9
10
11
12
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();

Setelah itu di simpan kedalam variabel http, selanjutnya membuat function untuk mengirim request ke server

1
2
3
4
5
function sndReq(qry) {
        http.open('get', 'backend.rpc?action='+qry);
        http.onreadystatechange = handleResponse;
        http.send(null);
    }

Jika sudah buat lagi satu function untuk menangani respon yang di kirimkan server, data yang dikirim bertipe JSON agar bisa di tampilkan dengan mudah maka JSON di ubeh ke array dengan JSON.parse(),kodenya seperti berikut

1
2
3
4
5
6
7
8
9
10
11
12
function handleResponse(){
        if(http.readyState == 4){
            var response = http.responseText;
            var data = JSON.parse(response);
            var tabel = '<table border="1px">';
            for(i in data ){
                tabel += '<tr><td>' + data[i]['nim'] +'</td><td>'+data[i]['nama'] +'</td></tr>';
            }
            tabel += '</table>';
            document.getElementById("h").innerHTML = tabel;
        }
    }

setelah selesai kita rubah di bagian html tadi dengan menambahkan atribut onclik pada button dengan “javascript:sndReq(‘h’); ” karena kita membutuhkan backend untuk menangani request kita buat terlebih dahulu seperti berikut ini

backend.rpc

1
2
3
4
5
6
7
8
{%
    route = _QUERY_STRING['route']
    if(route == 'h'):
        f = open('htdocs/b.json', 'r')
        data = f.read()
        f.close()
        emit(data)
%}

Terakhir kita membutuhkan data yang akan di tampilkan, buat file json kemudian isikan dengan array dua dimensi

b.json

1
2
3
4
[
    {"nim":"123","nama":"ridho"},
    {"nim":"567","nama":"yudha"}
]

Detail kode html seperti berikut ini untuk memperjelasnya ya...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script lang="js">
    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(qry) {
        http.open('get', 'backend.rpc?action='+qry);
        http.onreadystatechange = handleResponse;
        http.send(null);
    }
 
    function handleResponse(){
        if(http.readyState == 4){
            var response = http.responseText;
            var data = JSON.parse(response);
            var tabel = '<table border="1px">';
            for(i in data ){
                tabel += '<tr><td>' + data[i]['nim'] +'</td><td>'+data[i]['nama'] +'</td></tr>';
            }
            tabel += '</table>';
            document.getElementById("h").innerHTML = tabel;
        }
    }
</script>
<body>
    <button onclick="javascript:sndReq('h');">
        Clik Me!
    </button>
    <div id='h'>
    </div>
</body>
</html>

Jalankan server dan akses html lalu klik tombol maka akan tampil data dari json....



Komentar

Posting Komentar

Postingan populer dari blog ini

Design Prototype Checkout Wlijo di Figma

-
Gambar
  Pengertian Prototype      Definisi umum dari  prototype  adalah sebuah skema rancangan sistem yang membentuk model dan standar ukuran atau skalabilitas yang akan dikerjakan nantinya. Setiap pengembang maupun pengguna dapat berinteraksi langsung dengan model tersebut tanpa harus membuat produk nyatanya.   Sistem prototipe yang dibangun, menyesuaikan dengan kebutuhan awal  development software  untuk mengetahui beberapa fitur dan fungsi yang telah didefinisikan sebelumnya. Sehingga mampu mengetahui kesalahan lebih awal sebelum mengimplementasikan dan merilis produk secara keseluruhan. Tujuan Penggunaan Prototype      Lantas, apa tujuan sebenarnya dari pembuatan sebuah  prototype ? Tujuan utamanya adalah supaya produk yang akan dirilis sesuai dengan permintaan  user  atau pasar. Sehingga, peran dari prototipe sendiri adalah menjadi penghubung antara produsen dan konsumen untuk dapat mewujudkan produk berupa perang...
Baca selengkapnya

Cara Membuat Web Server Statis dengan Python

-
Gambar
  Gambar diatas merupakan ilustrasi yang dapat membantu pemahaman kalian bagaimana model komunikasi antara server dengan client dan protokol RFC yang terkait dengan komunikasi data tersebut.  Nah RFC atau kepanjangan dari Request For Comments itu serial dokumen protokol standar yang diterbitkan oleh lembaga-lembaga internasional dibawah naungan Intenet Society (ISOC). Sampai saat ini, ISOC itu sendiri masih dibawah koordinasi World Wide Web Consortium (W3C). Dimana W3C itu sendiri, sampai artikel ini saya tulis masih dikepalai oleh Tim Berners-Lee, sang penemu www itu sendiri. Dokumen pertama kali yang ditulis oleh tim penyunting RFC tercatat mulai tahun 1968. Dan dari tahun 1968 itu dokumen RFC terus bertambah sampai sekarang. Jumlah dokumen RFC sejak tahun 1968 sampai tahun 2020 tercatat sudah mencapai angka 8.715 dokumen. Delapan ribu dokumen protokol standar inilah yang akhirnya dipatuhi oleh berbagai macam kalangan, terutama pengembang aplikasi world wide web dan aplikasi...
Baca selengkapnya

Belajar Cara Kerja Komputer dan Assembler Menggunanakan NASM

-
Gambar
    Komputer merupakan perangkat listrik dimana kosakata bahasanya hanya ON yang dilambangkan angka 1 dan OFF yang dilambangkan angka 0. Dimana angka biner 0 artinya arus listrik diputus, sedangkan 1 artinya arus listrik tersambung.     Jaman dahulu, pada saat komputer generasi awal dibuat, teknologinya yang ada masih menggunakan tabung vakum. Sehingga 1 unit komputer merk Electronic Numerical Integrator and Computer (ENIAC), dibuat dari 18.000 tabung vakum, 70.000 resistor dan 5 juta titik solder. Komputer ENIAC ini setidaknya butuh ruang 500 meter persegi atau hampir seluas lapangan sepak bola. berbeda dengan saat ini yang ukurannya sudah sangat kecil. Bagaimana Cara Kerja Komputer? Komputer tidak menyimpan karakter sebagai karakternya sendiri, juga tidak ada gambar dan huruf yang tersimpan di harddisk komputer kita. Sebaliknya, setiap karakter dikodekan sebagai rangkaian bit biner : 1 dan 0 Misalnya kode huruf "A" adalah 01000001. Tapi bagaimana komputer mengetahu...
Baca selengkapnya