Beranda
  • Beranda
  • Kursus Programming
  • Karir
  • Layanan Kami
    • IT Outsourcing
    • Jasa Pembuatan Software
    • Jasa Programmer
    • Jasa Pembuatan Website
      • Jasa Pembuatan Website Toko Online
      • Jasa Pembuatan Website Company Profile
      • Jasa Pembuatan Website Rental Mobil
      • Jasa Pembuatan Website Pribadi
      • Jasa Pembuatan Website Marketplace
  • Tutorial IT
    • Tutorial HTML
    • Tutorial JavaScript
    • Tutorial JQuery
    • Tutorial SQL
    • Tutorial Java
    • Tutorial CSS
    • Tutorial Dart
    • Tutorial PHP
    • Tutorial Flutter
  • Blog

Tutorial JQuery

  • Tutorial Belajar jQuery
  • Cara Download jQuery
  • Apa Itu jQuery
  • Mengenal Selector
  • Menangkap Event
  • Fungsi Hide Dan Show
  • Mengambil Elemen Dan Konten
  • Mengisi Elemen Dan Konten
  • Menambah Elemen Dan Konten
  • Menghapus Elemen Dan Konten
  • Mengenal Traversing
  • Mencari Elemen Induk
  • Mencari Elemen Anak
  • Mencari Elemen Sejajar
  • Memfilter Elemen
  • Belajar Ajax JQuery
  • Beranda
  • Tutorial
  • Belajar Ajax JQuery

Belajar Ajax JQuery

Daftar Isi
  • Pengenalan Ajax Secara Sederhana
  • Memakai Ajax Menggunakan jQuery
    • Perbedaan Get Dan Post
    • Fungsi get
  • Fungsi post

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.

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);
  });
});

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);
  });
});

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.

What are your Feelings
Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Memfilter Elemen

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Daftar Isi
  • Pengenalan Ajax Secara Sederhana
  • Memakai Ajax Menggunakan jQuery
    • Perbedaan Get Dan Post
    • Fungsi get
  • Fungsi post

Marketing Office

Epicentrum Walk Office Suite 529A, Jl. HR. Rasuna Said, Jakarta Selatan 12940

Workshop

Nextgen Training Center, Jl. Raya Tanah Baru no 3, Pancoran Mas, Depok

Email

sales@nextgen.co.id

@2020 PT Nextgen Inovasi Indonesia

PT. Nextgen Inovasi Indonesia

PT Nextgen Inovasi Indonesia adalah perusahaan IT yang didirikan pada tahun 2015. Lini bisnis kami adalah inovasi dalam cara belajar teknologi informasi dengan cepat dan efisien.