Erfan Yuda: Penerapan Asynchronous JavaScript And XML Pada Web Server Dinamis

Ajax adalah singkatan dari Asynchronous JavaScript And XML. Ini adalah istilah yang diciptakan oleh Jesse James Garrett dalam makalahnya Ajax: A New Approach to Web Applications. Ini bukan teknologi tunggal, melainkan paradigma desain untuk aplikasi web.

Sebelum Ajax, ketika halaman web dimuat di browser pengguna, server tidak dapat mengubahnya lagi. Ini mirip dengan Anda membeli beberapa barang dagangan di dunia nyata. Setelah pembelian, Anda dapat melakukan apa pun yang Anda inginkan dengan barang dagangan dan itu sepenuhnya terserah Anda. Tetapi pedagang tidak dapat mengubahnya karena mereka tidak lagi memilikinya. Ketika Anda ingin melakukan lebih banyak pembelian (yaitu mengunjungi halaman lain), Anda pergi ke toko lagi.

Dengan Ajax, server dapat mengontrol halaman bahkan setelah dimuat di browser pengguna. Itu dapat meminta klien untuk membuat permintaan ke server di latar belakang menggunakan JavaScript dan memproses data respons. Salah satu kasus penggunaan yang umum adalah memperbarui sebagian halaman secara asinkron tanpa memerlukan penyegaran penuh.

Kelebihan Ajax

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

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

Kelemahan Ajax

Kelemahan dari Ajax yaitu:

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.
Search engine optimization, karena konten di-generate menggunakan JavaScript, search engine tidak bisa mengindeksnya sehingga mengurangi efektivitas halaman ditinjau dari SEO.
Terlalu mengandalkan JavaScript, Ajax menggunakan JavaScript, yang kadang diimplementasikan secara berbeda di berbagai browser atau versi tertentu dari sebuah browser.
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:

Browser akan memanggil AJAX javascript untuk mengaktifkan XMLHttpRequest dan mengirimkan HTTP Request ke server.
XMLHttpRequest dibuat untuk proses pertukaran data di server secara asinkron.
Server menerima, memproses, dan mengirimkan data kembali ke browser.
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

<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

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

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

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

{% 
    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

[
    {"nim":"123","nama":"ridho"},
    {"nim":"567","nama":"yudha"}
]

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

<!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>