Pembelajaran 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.

Ajax Berfungsi Untuk:

mengambil data dari server secara background
menyegarkan tampilan web tanpa memuat ulang browser
mengirim data ke server secara background

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>

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

Penambahan Function Pop Up Edit Toko di NextJS

Apa itu Next.js? Next.js merupakan sebuah React framework yang dibentuk buat mengatasi kasus client-side rendering yang dimiliki React. Sebuah halaman website yang dibentuk memakai React ‘terasa ringan’ lantaran tampilan website sangat interaktif. Selain itu, ketika data berubah, React menggunakan efisien akan mengupdate bagian menurut halaman website yang memang perlu diupdate tanpa perlu reload satu halaman penuh. Untuk menerima itu seluruh, client wajib load seluruh file JavaScript sebelum konten halaman ditampilkan. apabila file JS relatif akbar maka ketika yang diperlukan buat load pertama kali pula sebagai lebih lama. Masalah lain menurut client-side rendering merupakan SEO, terdapat kemungkinan web crawler berusaha mengindex halaman yang belum terselesaikan dirender sepenuhnya (lantaran ketika load yang lama). Dan menduga web tadi blank. Kedua kasus diatas bisa diselesaikan menggunakan teknik pre-rendering. Yaitu ...

Baca selengkapnya

Ni Made Tembang Ayundini

Cari Blog Ini