[JQuery] Pengenalan JQuery (bagian 3)
Oleh: Agung Novian | 2 September 2011

Bagaimana menerapkan AJAX dengan JQuery?

Rasanya saya juga tidak perlu menjelaskan apa itu ajax :D Silakan berusaha untuk mencari pemahaman tentang ajax dengan mengetikkan “ajax” pada mesin pencari semacam Google. Setelah paham, mari lanjutkan membaca artikel ini.

Untuk memproses ajax dengan JQuery, digunakan fungsi “ajax” berikut ini: 

$.ajax({parameter/properti});

Adapun parameter yang sering saya gunakan diantaranya:

  • url

    Adalah alamat url dari file yang akan dieksekusi oleh proses ajax. Contoh url seperti berikut ini:

    "component/action.php"
//Artinya ajax akan mengeksekusi file "action.php" yang terdapat pada folder component

  • data

    Adalah data yang dikirimkan melalui proses ajax. Data ini berupa “request” yang akan diproses oleh file yang dituju. Pada pemograman fundamental, contoh pengiriman data adalah seperti berikut ini:

    
http://domain.com/action.php?id=123&lang=ID&cat=webprog
  • type

    Adalah jenis metode pengiriman data yang akan dikirimkan melalui proses ajax. Terdiri dari dua metode yang tersedia, yaitu POST dan GET. Metode ini adalah metode umum yang dikirimkan oleh elemen FORM pada HTML ketika memproses suatu data untuk diolah.

    <form methode="POST">

  • dataType

    Adalah tipe data yang dikembalikan/dihasilkan oleh proses ajax. Ada 4 (empat) tipe data yang dihasilkan, diantaranya: xml, html, script, dan json. Silakan eksplorasi untuk pemahaman keempat tipe data ini :D

  • success

    Adalah nilai kembali jika proses ajax berhasil dikerjakan. Ini merupakan suatu fungsi yang kemudian perlu dilakukan proses lanjutan agar menghasilkan keluaran yang diinginkan.

Baiklah, kita akan mencoba “ajax” dimulai dengan proses yang sederhana lebih dulu. OK, sebelumnya siapkan dulu file-file yang diperlukan, silakan membuka kembali artikel [JQuery] Pengenalan JQuery (bagian 1) untuk mengetahui folder dan file apa saja yang diperlukan.

Buatlah sebuah file baru dengan nama “test.html”, isikan teks apa saja di dalamnya, misalnya seperti berikut:

<p>ini adalah contoh ajax sederhana</p>

Mari memodifikasi file-file lainnya.

index.php

<!-- Inisialisasi HTML versi 5 -->
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>JQuery</title>
		<!-- Menambahkan CSS ke halaman -->
		<link rel="stylesheet" type="text/css" href="style/style.css">
		<!-- Menambahkan library JQuery ke halaman -->
		<script type="text/javascript" src="script/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="script/script.js"></script>
	</head>
	<!-- Konten halaman -->
	<body>
		<div id="page">

		</div>
		<div>
			<input type="button" value="AJAX 1" name="btnAjax1" id="btnAjax1" />
		</div>
	</body>
</html>

script.js

ajax1=function(){
	var urlFile = "test.html";
	var content = $.ajax({
		url: urlFile,
		async: false
	}).responseText;

	//Mengisi elemen dengan ID page dengan hasil dari proses ajax
	$('#page').html(content);
}
$(function(){
	$('#btnAjax1').click(function(){
		ajax1();
	});
});

Nah, sekarang kita coba proses ajax lanjutan :) Mari menyediakan file tambahan untuk meneruskan proses ajax, buatlah file dengan nama “action.php”.

Tuliskan script seperti berikut: 

<?php
function callback($status, $message){
	$return = array(
	'status'	=>	$status,
	'message'	=>	$message);
	$return = json_encode($return);
	exit($return);
}
if(isset($_POST['action'])){
	$proctype = $_POST['action'];
	switch ($proctype){
	case 'kenalan':
		$name = $_POST['txtName'];
		$address = $_POST['txtAddress'];
		callback ("kenalan","Hai $name di $address");
	case 'hitung':
		$bil1 = $_POST['txtBil1'];
		$bil2 = $_POST['txtBil2'];
		$hasil = $bil1 + $bil2;
		callback ("hitung", $hasil);
	break;
	}
}
?>

Mari memodifikasi file-file lainnya!

index.php

<!-- Inisialisasi HTML versi 5 -->
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>JQuery</title>
		<!-- Menambahkan CSS ke halaman -->
		<link rel="stylesheet" type="text/css" href="style/style.css">
		<!-- Menambahkan library JQuery ke halaman -->
		<script type="text/javascript" src="script/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="script/script.js"></script>
	</head>
	<!-- Konten halaman -->
	<body>
		<div id="page">

		</div>
		<div>
			<input type="button" value="AJAX 1" name="btnAjax1" id="btnAjax1" />
		</div>
		<div>
			<table>
			<tr>
				<td>Nama</td>
				<td>:</td>
				<td><input type="text" name="txtName" id="txtName" /> </td>
			</tr>
			<tr>
				<td>Alamat</td>
				<td>:</td>
				<td><input type="text" name="txtAddress" id="txtAddress" /> </td>
			</tr>
			<tr>
				<td colspan="3">
				<input type="button" value="AJAX 2" name="btnAjax2" id="btnAjax2" />
				</td>
			</tr>
			</table>
		</div>
		<div>
			<table>
			<tr>
				<td>Bilangan 1</td>
				<td>:</td>
				<td><input type="text" name="txtBil1" id="txtBil1" /> </td>
			</tr>
			<tr>
				<td>Bilangan 2</td>
				<td>:</td>
				<td><input type="text" name="txtBil2" id="txtBil2" /> </td>
			</tr>
			<tr>
				<td>Hasil Penjumlahan</td>
				<td>:</td>
				<td><input type="text" name="txtHasil" id="txtHasil" /> </td>
			</tr>
			<tr>
				<td colspan="3">
				<input type="button" value="AJAX 3" name="btnAjax3" id="btnAjax3" />
				</td>
			</tr>
			</table>
		</div>
	</body>
</html>

script.js

ajax1=function(){
	var urlFile = "test.html";
	var content = $.ajax({
		url: urlFile,
		async: false
	}).responseText;

	$('#page').html(content);
}
ajax2=function(action){
	var txtName = $('#txtName').val();
	var txtAddress = $('#txtAddress').val();

	var txtBil1 = $('#txtBil1').val();
	var txtBil2 = $('#txtBil2').val();

	var dataString = "action=" + action +
					 "&txtName=" + txtName +
					 "&txtAddress=" + txtAddress +
					 "&txtBil1=" + txtBil1 +
					 "&txtBil2=" + txtBil2;
	$.ajax({
		url: "action.php",
		data: dataString,
		type: "POST",
		dataType: "json",
		success: function(data){
			var status = data.status;
			var message = data.message;
			switch (status){
			case "kenalan":
				$('#page').html(message);
				alert(message);
			break;
			case "hitung":
				$('#txtHasil').val(message);
			break;
			}
		}
	});
}
$(function(){
	$('#btnAjax1').click(function(){
		ajax1();
	});
	$('#btnAjax2').click(function(){
		ajax2("kenalan");
	});
	$('#btnAjax3').click(function(){
		ajax2("hitung");
	});
});

Untuk demo kunjungi Demo Ajax 3

Tulis Komentar
:
:
:
Komentar :
Ditulis di: Framework, JQuery, Pemograman, Web
Penanda: , ,

«   |   »

 
Ikuti Quiz.Diajar.Com