Belajar JQuery : Ajax

posted in: Tutorial Pemrograman | 0

AJAX adalah singkatan dari Asynchronous JavaScript dan XML, teknologi ini membantu kita untuk memuat data dari server secara dinamis tanpa perlu melakukan refreshing browser.

JQuery merupakan tools AJAX yang kaya yang dapat dipakai untuk mengembangkan aplikasi web yang dinamis.

Memuat Halaman/Data

Sangat mudah untuk memuat data statis atau dinamis menggunakan JQuery AJAX. JQuery mempunyai method load() untuk melakukan pekerjaan tersebut −

Syntax

Syntax sederhana untuk  method load()

[selector].load( URL, [data], [callback] );

Berikut adalah deskripsi untuk seluruh parameter −

  • URL − URL dari server-side resource dimana permintaan dikirim. Bisa berupa CGI, ASP, JSP, atau script PHP yang menghasilkan data yang dinamis atau keluar dari database.
  • data – Ini adalah parameter opsional, yang mewakili obyek yang memiliki serialized-properties yang dilewatkan pada request.
  • callback − Callback function dipanggil setelah response-data di muat ke dalam set elemen.

Contoh

Perhatikan file HTML berikut dengan coding JQuery di bawah ini−


<html>

<head>
<title>Contoh JQuery</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$('#stage').load('/jquery/result.html');
});
});
</script>
</head>

<body>

<p>Click on the button to load /jquery/result.html file −</p>

<div id = "stage" style = "background-color:cc0;">
STAGE
</div>

<input type = "button" id = "driver" value = "Load Data" />

</body>

</html>

Mendapatkan JSON data

Ada kondisi dimana server akan menghasilkan JSON string dari request anda. JQuery memiliki fungsi getJSON untuk memparsing dan menghasilkan string JSON, dan membuat hasil string bisa digunakan sebagai fungsi callback sebagai parameter pertama untuk bisa diproses lebih lanjut.

Syntax

Berikut adalah syntax method getJSON()

[selector].getJSON( URL, [data], [callback] );

Penjelasan parameter method tersebut adalah sebagai berikut −

  • URL – Berisi URL server yang di kontak melalui metoda GET.
  • data – Obyek yang memiliki properties pasangan nama/nilai yang dipakai untuk mengkonstruksi query string yang akan dipakai pada URL.
  • callback − Sebuah fungsi dipanggil ketika permintaan selesai. Nilai data yang merupkan proses respon akan dilewatkan sebagai parameter pertama dan status sebagai parameter kedua, dalam bentuk string JSON.

Contoh

Perhatikan kode HTML berikut dengan sedikit kode −


<html>

<head>
<title>Contoh JQuery</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){

$.getJSON('/jquery/result.json', function(jd) {
$('#stage').html('<p> Name: ' + jd.name + '</p>');
$('#stage').append('<p>Age : ' + jd.age+ '</p>');
$('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
});

});
});
</script>
</head>

<body>

<p>Click on the button to load result.json file −</p>

<div id = "stage" style = "background-color:#eee;">
STAGE
</div>

<input type = "button" id = "driver" value = "Load Data" />

</body>

</html>


Berikut metode JQuery utilitas getJSON () memulai permintaan Ajax ke file dengan URL result.json. Setelah loading file ini, semua konten yang akan diteruskan ke fungsi callback yang akhirnya dimasukan ke dalam tag <div>  dengan ID Stage. −

{
“name”: “Zara Ali”,

“age” : “67”,

“sex”: “female”

}

 

Melewatkan Data ke Server

Sering kali Anda mengumpulkan masukan dari pengguna dan Anda harus memasukannya ke server untuk diproses lebih lanjut. JQuery AJAX membuatnya prosos ini cukup mudah.

Contoh

Contoh ini menunjukkan bagaimana cara melewatkan input pengguna untuk script web server yang akan mengirim kembali hasil dan mencetaknya −


<html>

<head>
<title>Contoh JQuery</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){
var name = $("#name").val();
$("#stage").load('/jquery/result.php', {"name":name} );
});
});
</script>
</head>

<body>

<p>Enter your name and click on the button:</p>
<input type = "input" id = "name" size = "40" /><br />

<div id = "stage" style = "background-color:cc0;">
STAGE
</div>

<input type = "button" id = "driver" value = "Show Result" />

</body>

</html>

Berikut adalah kode result.php −


<?php
if( $_REQUEST["name"] ){

$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>

JQuery AJAX Methods

Anda telah melihat konsep dasar AJAX menggunakan JQuery. Tabel berikut adalah daftar metod JQuery AJAX yang penting yang Anda dapat digunakan berdasarkan kebutuhan pemrograman −

S.N. Methods & Description
1 jQuery.ajax( options )

Memuat halaman remote menggunakan permintaan HTTP.

2 jQuery.ajaxSetup( options )

Pengaturan global setup untuk AJAX request.

3 jQuery.get( url, [data], [callback], [type] )

Memuat halaman remote menggunakan permintaan HTTP GET.

4 jQuery.getJSON( url, [data], [callback] )

Load Data JSON menggunakan permintaan HTTP GET.

5 jQuery.getScript( url, [callback] )

Memuat dan mengeksekusi file JavaScript menggunakan permintaan HTTP GET.

6 jQuery.post( url, [data], [callback], [type] )

Memuat halaman remote menggunakan permintaan HTTP POST.

7 load( url, [data], [callback] )

Memuat  HTML dari file remote dan menyuntikkannya ke DOM.

8 serialize( )

Serialize  satu set elemen masukan ke serangkaian data.

9 serializeArray( )

Serializes semua form dan elemen form, seperti metode .serialize (), tapi menghasilkan struktur data JSON.

JQuery AJAX Events

Anda dapat memanggil berbagai metode JQuery selama siklus hidup pemanggilan AJAX berjalan. Berdasarkan berbeda event / tahapan, tersedia method berikut  −

S.N. Methods & Description
1 ajaxComplete( callback )

Melampirkan fungsi yang akan dieksekusi setiap kali permintaan AJAX selesai.

2 ajaxStart( callback )

Melampirkan fungsi yang akan dieksekusi setiap kali permintaan AJAX dimulai dan tidak ada sudah aktif.

3 ajaxError( callback )

Melampirkan fungsi yang akan dieksekusi setiap kali permintaan AJAX gagal.

4 ajaxSend( callback )

Melampirkan fungsi yang akan dieksekusi sebelum permintaan AJAX dikirim.

5 ajaxStop( callback )

Melampirkan fungsi yang akan dieksekusi setiap kali semua permintaan AJAX telah berakhir.

6 ajaxSuccess( callback )

Melampirkan fungsi yang akan dieksekusi setiap kali permintaan AJAX selesai dengan sukses.

Leave a Reply