Home
Guestbook
About
Message
Feed
AJAX atau Asynchronous JavaScript and XML merupakan sebuah metode pertukaran data antar server yang dilakukan di belakang layar. Dengan teknologi AJAX memungkinkan user dalam mengakses web secara dinamis tanpa harus memuat halaman lain secara keseluruhan, dengan begitu berarti sebuah website dapat di muat lebih cepat dan efisien dalam menampilkan sebuah konten.
Namun demikian salah satu kelemahan dari AJAX adalah ketika halaman dimuat ulang akan kembali lagi ke halaman awal. Hal tersebut disebabkan karena tidak ada perubahan URL yang terjadi pada address bar ketika event AJAX sedang berlangsung. Akibatnya, konten yang dihasilkan dari AJAX kurang ramah terhadap SEO.
Pada dasarnya AJAX didefinisikan dengan XMLHttpRequest() dan itu sangat ribet sekali mengingat JavaScript berjalan di sisi user yang berarti kita harus meng-handle prefix untuk mengatasi error di beberapa browser yang belum support AJAX. Dari pertimbangan itulah kemudian Admin mengemas tutorial ini dalam bentuk jQuery.
Ada beberapa method jQuery AJAX yang membuat bingung ketika pertama kali belajar AJAX dengan jQuery. Sebut saja $.ajax(), $.get(), $.getJSON(), $("selector").load(), dll. Itu semua mempunyai fungsi dan kesamaan yaitu melakukan pertukaran data, namun cara penggunaanya berbeda-beda sesuai dengan kebutuhan. Yuk kita cari perbedaan dari masing-masing method tersebut.
$.ajax()
Pertama kita mulai dari method $.ajax(). Bisa dibilang ini adalah bagian tersulit dari AJAX, namun inilah bentuk dasar dari AJAX jQuery. Sengaja admin bahas pertama kali karena setelah paham dengan method ini kita lebih mudah memahami beberapa method AJAX lainnya.
$.ajax(url[, settings]);
settings merupakan objek sederhana untuk melakukan perintah AJAX, berikut ini adalah option dan method yang sering digunakan oleh $.ajax().
-
url
string
Alamat URL yang akan dikirim oleh AJAX.
-
data
object
query string yang akan dikirimkan kepada server.
-
type
string
metode POST atau GET.
-
dataType
string
Tipe file (xml, json, script, text, html).
-
success
function
Fungsi yang dijalankan ketika AJAX sukses di eksekusi.
-
Dan masih banyak lagi...
Contoh $.Ajax()
Buat file dengan nama data.php.
<?php echo("$_GET[nama] $_GET[nomor]") ?>
Kemudian kita tes dengan AJAX.
$(document).ready(function() {
$.ajax({
url: "data.php",
data: {nama:"Alex Lowes", nomor:22},
type: "GET",
dataType: "xml",
success: function(respon) {
alert(respon); } });
});
-
Pertama kita set sebuah AJAX dengan URL target data.php.
-
Kita kirim sebuah query. (kalau di URL separti ini: ?nama=Alex Lowes).
-
Type GET sama seperti method di dalam form.
-
Kita kirim spesifikasi dari tipe file data.php. dengan xml
-
Value dari success adalah fungsi yang akan dijalankan ketika request AJAX berhasil di eksekusi.
-
Didalam anonymous function dari value success terdapat argumen respon yang menyimpan output data dari halamam data.php.
$.get()
Tidak berbeda jauh dengan $.ajax(), kita dapat menggunakan shortcut ini jika ingin mengirim request dengan method GET.
$.get(url[, data][, success][, dataType]);
Keterangan pada argumen $.get() sama seperti contoh $.ajax() diatas.
Contoh $.get()
Misalkan kita punya halaman dengan nama data.xml dan diisi dengan sesuatu seperti dibawah ini:
<?xml version="1.0" encoding="utf-8" ?> <pembalap> <nama>Alex lowes</nama> <negara>Inggris</negara> <team>Pata Yamaha</team> <nomor>22</nomor> </pembalap>
Kemudian kita akan memunculkan nama pembalap di atas dengan $.get(), itu sangat mudah sekali teman.
$(document).ready(function() {
$.get('data.xml', function(respon) {
var nama= $(respon).find("nama").text();
alert(nama); });
});
Jika dilihat isi dari variabel nama, disitu ada find() yang berfungsi untuk mencari elemen <nama> di variabel respon kemudian diambil teksnya oleh text().
$.getJSON()
Method AJAX ini dikhususkan untuk data type json atau jsonp yang berarti kamu tidak perlu memparsing json terlebih dahulu.
$.getJSON(url[, data][, success]);
Contoh $.getJSON()
Kita buat file json sederhana dengan isi seperti ini:
{
"nama": "Alex Lowes",
"negara": "Inggris",
"team": "Pata Yamaha",
"nomor": 22
}
Lalu ini adalah kode jQuerynya.
$(document).ready(function() {
$.getJSON('data.json', function(respon) {
alert(respon.nama); });
});
load()
Bagian paling sederhana dari AJAX. Ketika respon sukses terdeteksi kemudian hasil dari load() akan ditetapkan pada elemen target.
.load(url[, data][, complete]);
complete adalah fungsi yang akan dikembalikan jika respon success terdeteksi.
$(document).ready(function() {
$("#target").load('data.html', function() {
alert('Ajax sukses dimuat'); });
});
-
#target merupakan id selektor yang akan ditimpa AJAX dari hasil eksekusi.
-
anonymous function diatas akan bekerja setelah AJAX sukses dimuat.
Itu tadi beberapa contoh dasar-dasar AJAX pada jQuery yang dapat Admin berikan. Kalau kamu mau lihat demonya silahkan datang langsung ke gedung DPR.