Ajax dengan Menggunakan JQuery


22/09/2016 08:23:16 381

AJAX (Asyncronous Javascript dan XML) merupakan suatu teknik untuk melakukan pertukaran data dibelakang layar pada aplikasi berbasis web. Pada aplikasi berbasis web semua data terdapat pada server, dan ketika terjadi request terhadap data, maka akan me-reload ulang halaman web. Cara ini sebenarnya tidak efisien, me-reload semua resource tentunya akan menghabiskan bantwidth dan resource dan server, serta tidak interaktif dikarenakan terdapat suatu masa untuk menunggu resource di load ulang.

AJAX memadukan server side programming dan server side programming untuk bekerja sama. Pada teknik ini server side programming (PHP/JAVA/ASP) memproses data sementara client side programming (javascript) meload data pada background yang kemudian memodifikasi tampilan data berdasarkan hasil yang didapat.

Untuk mempermudah pengimplementasian AJAX dapat menggunakan framework javascript seperti JQuery. JQuery memberikan suatu API yang mempermudah untuk membangun koneksi XMLHttpRequest yang digunakan untuk koneksi Asyncronous. Untuk implementasi AJAX pada JQuery dapat menggunakan contoh berikut:

$.ajax({
    url: "data.php", // RESOURCE
    method: "GET", // Method dapat diisi POST/GET/PUT/DELETE
    data: { id: 1, published: 1 } // DATA YANG DIKIRIMKAN KE URL
})
.success(function(data){

})
.fail(function(message, code){

})
.always(function(){

})
;

Pada contoh code diatas untuk menerapkan AJAX pada JQuery dengan menggunakan perintah $.ajax({ /* PARAMETER */}). Perintah ini memiliki beberapa parameter, seperti url yang berisi URL resource/server side programming, method yang merupakan metode yang digunakan untuk mentransfer data, serta data yang dikirimkan pada URL. Pada perintah tersebut juga terdapat beberapa method yang di-trigger seperti success yaitu method yang dijalankan ketika perintah ajax ini berhasil dijalankan. Method fail merupakan method yang dieksekusi ketika perintah ajax tersebut gagal dijalankan. always merupakan method yang dijalankan pada akhir dari perintah ajax baik itu berhasil ataupun gagal.

Untuk mengimplementasi konsep AJAX berikut kita akan membuat sebuah aplikasi sederhana yakni terdiri dari dua buah file: data.php dan page.html. data.php berisi code yang berisikan suatu greeding(Hello) terhadap nama yang dikirim melalui halaman page.html menggunakan teknik AJAX. Dalam kasus ini method yang digunakan untuk mengirim data ialah GET.

data.php

<?php
echo "Hello ". $_GET['nama'] . ". Sekarang Pukul : " . date("d/m/Y H:i:s");
?>

page.html


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AJAX</title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(window).load(function(){ $.ajax({ url: "data.php", method: "GET", data: { nama: "Rofil" } }) .success(function(data){ $("#container").html(data); }) .fail(function(d, code){ alert("Error dengan status " + code); }) .always(function(){ alert("PROSES AJAX SELESAI"); }) ; }); </script> </head> <body> <div id="container"></div> </body> </html>

Kode pada page.html terdapat element HTML (div) dengan id="contaier" digunakan untuk menampung hasil request AJAX. Pada javascript terdapat code $(window).load(function(){ /* CODE JS*/}) menandakan bahwa code yang terdapat didalamnya akan dijalankan saat semua komponen html diload, dalam hal ini akan menjalankan perintah AJAX. Perintah ajax pada code $.ajax({ /* kode js */}) mengandung parameter url yang mengarahkan pada data.php dan mengirimkan sebuah data nama via parameter data dengan menggunakan method GET. Ketika perintah ajax berhasil(success) dijalankan, hasilnya akan diletakan pada element yang memiliki id=container, tetapi jika gagal (fail) akan menampilkan pop up yang menyatakan perintah AJAX error dan terakhir akan selalu (always) menampilkan pop up yang menyatakan bahwa PROSES AJAX SELESAI.

Kode pada data.php sangat sederhana. Kode pada data.php menampilkan suatu greeding terhadap nama yang diberikan ("Hello ". $_GET['nama']) melalui method GET dan menginformasikan waktu saat ini (date("d/m/Y H:i:s")).