Mudah belajar jQuery Part 7

Mudah belajar jQuery Part 7

jQuery AJAX

AJAX merupakan proses pertukaran data dengan server yang memperbarui bagian halaman web tanpa memuat ulang halaman lagi.

Pengertian AJAX
AJAX merupakan kependekan dari Asynchronous JavaScript and XML
adalah tentang memuat data di layar belakang dan menampilkannya di halaman web, tanpa memuat ulang seluruh halaman.
Contoh aplikasi yang menggunakan AJAX: Facebook, Youtube, Gmail, Google Maps.
kita dapat meminta teks, HTML, XML, atau JSON dari server menggunakan HTTP GET dan HTTP POST – Dan kita dapat memuat data eksternal langsung ke elemen HTML yang dipilih dari halaman web.

jQuery load()
Kita dapat menampilkan kontent dari server kedalam elemen html yang dipilih hanya dengan memasukan url kedalam fungsi load(). contohnya dalam server kita mempunya file text:

$("#div1").load("http://localhost/jq/test.txt");

ketika script dijalankan maka konten test.txt akan tampil di element tersebut. (div1)

Parameter opsional menentukan fungsi panggilan balik untuk dijalankan ketika metode load() selesai. Fungsi ini dapat memiliki parameter yang berbeda:

responseTxt – berisi konten yang dihasilkan jika panggilan berhasil
statusTxt – berisi status text
xhr – berisi objek XMLHttpRequest

Contoh berikut menampilkan peringatan setelah load() selesai dipanggil. Jika metode load() berhasil, ini akan menampilkan “Konten berhasil dimuat!”, Dan jika gagal akan menampilkan pesan kesalahan:

$("#tombol").click(function(){
$("#div1").load("http://localhost/jq/test.txt", function(responseTxt, statusTxt, xhr){
if(statusTxt == "success")
alert("Konten berhasil dimuat!");
if(statusTxt == "error")
alert("Error gagal dimuat: " + xhr.status + ": " + xhr.statusText);
});
});

jQuery AJAX get() dan AJAX post()
Dua metode yang biasa digunakan adalah: GET dan POST. Sebenarnya saat kita menggunakan fungsi load() kita telah memakai method GET yang otomatis saat kita memanggil fungsi load().

  • GET pada dasarnya digunakan untuk mendapatkan (mengambil) beberapa data dari server. Catatan: Metode GET dapat mengembalikan data yang di-cache.
  • POST juga dapat digunakan untuk mendapatkan beberapa data dari server. Namun, metode post tidak membuat cache data, dan sering digunakan untuk mengirim data bersama dengan permintaan.

jQuery $.get()
Menggunakan HTTP GET
Contohnya:

$("#tombol1").click(function(){
$.get("konten.php", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});

jQuery $.post()
Menggunakan HTTP POST
Contohnya:

$("#tombol1").click(function(){
$.post("demo_test_post.asp",
{
nama: "User 1",
},
function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});

jQuery $.ajax()
Kita dapat membuat kostumisasi dengan fungsi ajax. sepeti memilih methodnya apakah post atau get. return datanya mau html atau json.
Contohnya

$("#tombol1").click(function(){
$.ajax({
type:"POST",
data:"nama=user1",
dataType:"html",
success: function(data){
alert(nama);
}
});
});

 

Related posts

Leave a Comment