Belajar jQuery‎ > ‎

06. AJAX dengan jQuery

posted Nov 28, 2011, 2:02 AM by Editor KursusInternet   [ updated Dec 31, 2011, 8:25 AM ]

Pendahuluan

AJAX (Asynchronous JavaScript and XML) adalah mekanisme pertukaran data / halaman yang dilakukan oleh web browser tanpa melakukan perpindahan halaman seperti pada mekanisme tradisional.

Sebelum adanya AJAX, perpindahan halaman untuk melakukan transfer data  "terpaksa" dilakukan karena penggunaan form HTML. Setiap kiriman data dari form perlu melakukan reload halaman. Dengan AJAX hal tersebut dilakukan secara "background" tanpa mengganggu aktivitas lain pada halaman tersebut.

Sesuai namanya, penggunaan AJAX dimungkinkan karena adanya JavaScript engine pada client dan satu objek penting yaitu XMLHttpRequest. Namun XML disini tidak berarti setiap format pertukaran data dengan mekanisme AJAX harus dengan XML.

AJAX menjadi pendorong penting dimanfaatkannya web browser sebagai media aplikasi serius, seperti berkembangnya aplikasi-aplikasi web terkenal seperti GMail, Facebook, Twitter dan lain-lain.

Artikel berikut akan mencoba memperkenalkan dan menjelaskan secara ringkas namun padat penggunaan AJAX pada jQuery. Contoh penggunaan juga akan disertakan. Semoga bermanfaat.

jQuery.ajax()

jQuery.ajax() adalah fungsi "low level" pada jQuery untuk melakukan berbagai mekanisme AJAX. Syntax dasar dari function tersebut adalah sebagai berikut :

        jQuery.ajax( url, settings )

atau

        jQuery.ajax( settings )

dimana
  • url : adalah alamat yang dituju.
  • settings : adalah daftar konfigurasi dalam format name / value.
Daftar settings yang bisa digunakan cukup banyak, beberapa diantaranya yang penulis anggap penting adalah sebagai berikut :
  • data : data yang ingin kita kirimkan seperti halnya pada saat menggunakan form. Format data ini adalah dalam bentuk query string.
  • success : function yang akan digunakan apabila permintaan / request terhadap halaman url yang kita inginkan berhasil.
  • error function yang akan digunakan apabila permintaan / request terhadap halaman url yang kita inginkan mengalami error.
  • timeout : waktu timeout yang kita inginkan (dalam milidetik).

Contoh Penggunaan jQuery.ajax()

Berikut adalah contoh penggunaan interaksi sederhana menggunakan AJAX yang mengambil dan menampilkan file teks dari. Contoh ini harus dijalankan dengan mekanisme HTTP, atau dengan kata lain harus berada di web server. Untuk web server sederhana pembaca mungkin dapat menggunakan WAMP.

Teks file yang digunakan yaitu contoh.txt dapat Anda download pada bagian akhir artikel ini.

Text Box

<html> <head>     <title>Contoh AJAX</title>     <script src="jquery-1.7.min.js"></script>     <script type="text/javascript">         function panggilAJAX()         {             jQuery.ajax(                 "contoh3.txt", {                     success: function(data) {                         jQuery("#container").html(data);},                     error: function(data) {                         jQuery("#container").html("gagal");}                 }             )         }         $(document).ready(function() {                 $("#tombolklik").bind("click", panggilAJAX);             }         );     </script> </head> <body>     <div id="container" style="background: yellow; width: 200px;">Div dengan id #container !</div>     <br />     <button id="tombolklik">Klik Disini</button> </body> </html>

Video Hasil Eksekusi 


Sumber Referensi

Comments