Belajar Ajax JQuery

View Categories

Belajar Ajax JQuery

Ajax adalah teknik untuk mengirimkan data ke server dan menerima data dari server tanpa harus menampilkan ulang keseluruhan dokumen HTML pada web browser. Ajax adalah teknik untuk saling bertukar data dengan server secara Asynchronous. Proses penukaran dilakukan pada background proses tanpa terlihat oleh pengguna web browser.

Teknik seperti Ajax sudah sangat lazim dipakai pada website-website besar sekarang ini. Google Mail, Facebook, Google Map, YouTube adalah beberapa contoh website besar yang memakai Ajax.

Pengenalan Ajax Secara Sederhana

Secara garis besar hal yang terjadi pada waktu kita mengakses dokumen HTML melalui web browser adalah seperti pada gambar di bawah ini.

Gambar ilustrasi komunikasi antara browser web, internet, dan server web.

Kita mencoba membahas contoh kasus melakukan pencarian melalui mesin pencarian. Hal yang biasa kita lakukan adalah membuka web browser dan mengetik alamat url mesin pencarian tersebut, misalkan halaman https://domain.com/search.php. Pada halaman tersebut terdapat satu tombol Search untuk melakukan pencarian. Pada waktu pengguna menekan tombol Search maka web browser akan mengirimkan HTTP Request ke server. Server akan memberikan data kembalian (berupa hasil pencarian) dengan mengirimkan balik HTTP Response. Web browser menerima data tersebut dan membuka halaman baru misal https://domain.com/search_result.php. Pada halaman ini hasil pencarian ditampilkan.

Proses di atas memerlukan perpindahan halaman dari search.php ke search_result.php. Sederhananya proses di atas memaksa web browser untuk menampilkan kembali keseluruhan dokumen HTML yang ada pada halaman search_result.php. Hal ini akan memakan waktu, memakai perhitungan pada cpu yang cukup besar dan memakai bandwidth internet yang cukup besar pula.

Dengan menggunakan Ajax kita tidak perlu menampilkan search_result.php. Hasil pencarian tetap berada pada halaman search.php. Halaman search.php pun tidak perlu ditampilkan ulang secara keseluruhan. Cukup elemen-elemen HTML tertentu saja yang ditampilkan ulang. Misalkan elemen HTML untuk menampilkan hasil pencarian akan ditampilkan ulang dan menampilkan hasil pencarian.

Memakai Ajax Menggunakan jQuery

JQuery menyediakan fungsi get dan post untuk melakukan interaksi dengan server menggunakan Ajax.

Perbedaan Get Dan Post

Terdapat dua metode interaksi antara web browser dan server.

  • Metode Get, secara garis besar berfungsi untuk meminta data dari server
  • Metode Post, secara garis besar berfungsi untuk mengirimkan ada ke server

Penjelasan di atas adalah penjelasan secara best practice atau yang biasa dilakukan oleh para programmer. Dalam beberapa kasus kita juga bisa menggunakan metode Get untuk mengirimkan data ke server dan kita juga bisa menggunakan metode Post untuk meminta data dari server.

Untuk lebih jelasnya silahkan baca artikel ini Perbedaan Get Dan Post.

Fungsi get

Fungsi get digunakan untuk meminta data dari server. Cara pemanggilan fungsi get adalah sebagai berikut.

$.get(URL,callback);

Parameter pertama adalah URL atau alamat server tempat data diminta. Parameter kedua adalah fungsi callback. Contoh dibawah ini memperlihatkan permintaan data ke alamat demo_test.asp.

$("button").click(function(){
  $.get("demo_test.asp", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

Jalankan Contoh

Fungsi callback mempunyai dua parameter. Parameter pertama adalah data yang dikembalikan oleh server. Parameter kedua adalah status pemanggilan server, apakah berhasil atau tidak.

Fungsi post

Fungsi post digunakan untuk mengirimkan data ke server. Cara pemanggilan fungsi post adalah sebagai berikut.

$.post(URL,data,callback);

Parameter pertama adalah URL atau alamat server tempat data diminta. Parameter kedua adalah data yang akan dikirimkan. Parameter ketiga adalah fungsi callback. Contoh dibawah ini memperlihatkan mengirimkan data ke alamat demo_test_post.asp.

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name: "Donald Duck",
    city: "Duckburg"
  },
  function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

Jalankan Contoh

Data yang dikirim ke server biasanya berupa JSON string. Server akan menerima data tersebut, melakukan parsing kemudian mengolah data tersebut.

Fungsi callback mempunyai dua parameter. Parameter pertama adalah data yang dikembalikan oleh server. Parameter kedua adalah status pemanggilan server, apakah berhasil atau tidak.

Silahkan baca referensi lebih lengkap fungsi-fungsi Ajax pada jQuery lain pada artikel ini Referensi Fungsi Ajax jQuery.

Tutorial sebelumnya : Memfilter Elemen
Semua Tutorial JQuery : Tutorial JQuery 

Tinggalkan Balasan