Modul Untuk Ajax

Laboratorium SIRKEL
Jurusan Teknik Informatika, Universitas Islam Indonesia
Dimulai dari halaman 2
1 | Modul Praktikum Pemrograman Web 2013/2014

Laboratorium SIRKEL
UNIT 8
AJAX
1. Tujuan Praktikum
Setelah mengikuti unit praktikum ini, diharapkan praktikan dapat :
a. Memahami pengertian AJAX.
b. Memahami mekanisme proses AJAX.
c. Memahami kegunaan AJAX.
d. Mampu mengimplementasikan AJAX Interface.
e. Mampu mengimplementasikan AJAX Event Handler.
f. Memahami konsep penggunaan AJAX.

Laboratorium SIRKEL
2. Materi Praktikum
2.1 Pengertian AJAX Commented [ee1]: Typo om. 2.1 mulainya
AJAX (Asynchronous JavaScript and XML) merupakan suatu

teknik baru dalam dunia web, tetapi bukan merupakan bahasa
pemrograman baru. AJAX adalah sebuah teknologi yang dapat
digunakan untuk membuat sebuah aplikasi web yang lebih baik,
lebih cepat, lebih interaktif, dan lebih responsif mirip dengan
aplikasi desktop.
2.2 Mekanisme Proses AJAX menggunakan PHP
Gambar 8.1 Proses Menggunakan AJAX
Penjelasan :

Laboratorium SIRKEL
a. Proses berawal dari web client. Web client meminta

(request) sebuah halaman PHP ke server melalui Java Script.
b. Server merespon dan menjalankan script PHP.
c. Script PHP akan menghasilkan respon dalam bentuk XML /
JSON dan datanya akan dikirim kembali ke web client untuk
diproses oleh JavaScript.
d. Hasil dari pemrosesan di JavaScript tersebut akan
ditampilkan di web client sebagai output tanpa harus refresh
atau memperbarui halaman web.
Gambar 8.2 Proses Tanpa Menggunakan AJAX
Penjelasan :
a. Proses berawal dari web client. Web client meminta
(request) sebuah halaman PHP ke server melalui JavaScript.
b. Server merespon dan menjalankan script PHP.
c. Script PHP akan menghasilkan respon dalam bentuk HTML
sehingga halaman web akan refresh atau memperbarui
tampilan. Ini yang membedakan pemrosesan sebuah Commented [ee2]: Rancu banget, wagu. Perbaiki.
halaman tanpa dan menggunakan AJAX.

Laboratorium SIRKEL
2.3 Kegunaan AJAX

Berikut beberapa manfaat dari AJAX :
a. Validasi Data yang real time
AJAX dapat melakukan proses validasi secara langsung tanpa
melalui proses refresh pada saat user melakukan pengisian
data melalui form.
b. Autocomplete
AJAX dapat digunakan untuk melakukan autocomplete
pada saat user sedang mengisi data pada sebuah form,
dengan demikian karakter yang sedang dituliskan oleh user
akan bisa langsung dilengkapi oleh entry-entry atau masukan
yang disarankan. Contoh pada saat kita melakukan pencarian
di yahoo atau google lalu kita mengetikkan kalimat atau kata
yang belum utuh maka secara otomatis akan tersedia daftar
entry atau masukan yang berkaitan dengan kalimat atau kata
tersebut. Sehingga kita tidak perlu repot mengetik kata atau
kalimat secara lengkap.
c. Refresh data dan server push
Halaman web bisa mengambil data dari server tertentu
untuk menampilkan informasi terkini, misalnya ramalan
cuaca, kurs dolar, jadwal penerbangan, dan lain sebagainya.
Karena hal tersebut halaman web dapat mengambil data
secara real time tanpa melalui proses refresh.
d. Menjadikan aplikasi desktop atau web lebih atraktif dan
responsif

Laboratorium SIRKEL
Teknik-teknik AJAX memungkinkan halaman web atau

aplikasi desktop jika kita mengklik tombol tertentu maka
reaksi perubahannya akan terlihat pada halaman atau
aplikasi tersebut. contoh aplikasi yang menggunakan AJAX
adalah aplikasi google maps, google suggest, Gmail, yahoo,
dan lain-lain.
2.4 AJAX Interface

Digunakan untuk menjalankan request dari AJAX pada
umumnya, namun dengan script/coding yang lebih sedikit.
Berikut macam-macam AJAX Interface :
2.4.1 ajax()
Digunakan untuk menjalankan permintaan AJAX.
Syntax:
$.ajax({name:value, name:value,...})
Name Value/Description
beforeSend( xhr ) Sebuah fungsi yang akan dijalankan sebelum
permintaan dikirimkan
cache Sebuah nilai boolean yang mengindikasikan
apakah browser harus menyimpan data
sementara dari halaman yang diminta. Secara
default bernilai benar
complete( xhr,status ) Sebuah fungsi yang akan dijalankan setelah
permintaan selesai dilakukan (setelah fungsi error
dan sukses)
data Menentukan data yang akan dikirimkan ke server
dataType Tipe data yang diharapkan dari respon server
error( xhr,status,error ) Sebuah fungsi yang akan dijalankan jika

Laboratorium SIRKEL
permintaan gagal
success( result,status,xhr ) Sebuah fungsi yang akan dijalankan ketika
permintaan sukses dilakukan
type Menentukan tipe dari permintaan (GET atau
POST)
url Menentukan URL untuk dikirimkan untuk
permintaan yang dituju
xhr Sebuah fungsi yang digunakan untuk membuat
objek XMLHttpRequest
Contoh : Commented [ee3]: Ada contoh, ada penjelasan!

Tolong tambahkan screenshot
latihan.php
Commented [ee4]: Namanya tidak menggambarkan fungsinya
Selamat Ajax pertama anda berhasil Kalo resultnya alert. Tag <h2></h2> gk usah dipake.
ajax.php
<html>
<head>
<title>Contoh AJAX</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-
1.7.2.min.js"></script>
<script>
$().ready(function(){
$('#tombol').click(function(){
$.ajax({
url: "latihan.php",
beforeSend: function(){
$('#loading').show();
},
success: function(html){
$('#loading').hide();
alert(html);
}
});
});
});
</script>
</head>
<body>
<center><span id="loading"
7 | Modul Praktikum Pemrograman Web 2013/2014 />
style="display:none">LOADING...</span><br
<button id="tombol">Klik di sini!</button></center>
</body>
</html>
Laboratorium SIRKEL
Screenshot Hasil :
Setelah script di atas dieksekusi, maka akan muncul tombol

klik di sini. Ketika user menekan tombol tersebut maka
akan akan muncul alert Selamat Ajax pertama anda
berhasil
2.4.2 load()
Digunakan untuk memuat data dari server kemudian
menempatkannya ke data yang dikembalikan ke dalam
elemen yang dipilih.
Syntax :
$(selector).load(URL,callback);

Laboratorium SIRKEL
Keterangan :
URL : URL yang dibutuhkan untuk menentukan URL yang
akan dimuat.
callback : parameter opsional yang berisikan nama-nama
fungsi yang akan dieksekusi setelah load() selesai
dijalankan.
Contoh : Commented [ee5]: Tambahkan screenshot dan penjelasan.
latihan.php
<h2>Selamat Anda Berhasil Mengubah Teks</h2>
load.php
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-
<script language="JAVASCRIPT">
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("latihan.php");
});
});
</script>
</head>
<body>
<div id="div1">
<center><h2>TEKS AKAN BERUBAH JIKA MENEKAN TOMBOL DI
BAWAH INI</h2>
<button>BERUBAH</button></center>
</div>
</body>
</html>

Laboratorium SIRKEL
Screenshot Hasil :
Setelah script di atas dieksekusi maka akan muncul seperti di
bawah ini.
Ketika user menekan tombol berubah maka tulisan TEKS

AKAN BERUBAH JIKA MENEKAN TOMBOL DI BAWAH INI akan
berubah menjadi Selamat Anda Berhasil Mengubah Teks.
2.4.3 get()
Fungsi get() dan post() digunakan untuk merespon
permintaan antara klien dan server.
Pada dasarnya fungsi get() digunakan untuk
mendapatkan (mengambil) beberapa data dari server. Fungsi
get() digunakan untuk meminta data dari sumber yang
ditentukan atau server menggunakan sebuah permintaan
HTTP GET.
Syntax :
$.get(URL,callback);
Contoh : Commented [ee6]: Tambahkan screenshot dan penjelasannya

Laboratorium SIRKEL
latihan_get.php
<?php
echo "Ini Adalah Isi dari Latihan_get.php";
?>
get.php
<!DOCTYPE html>
<html>
<head>
<script language="JAVASCRIPT" src="js/jquery-
$.get("latihan_get.php",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>
<button>Mengirimkan permintaan HTTP GET ke sebuah
halaman dan mendapatkan hasilnya kembali</button>
</body>
</html>
Screenshot Hasil :
bawah ini.
Ketika user menekan tombol di atas maka akan muncul alert

seperti di bawah ini.

Laboratorium SIRKEL
2.4.4 post()
Pada dasarnya fungsi post() digunakan untuk mengirimkan
data bersama dengan permintaan. Fungsi post() digunakan
untuk meminta dan menyerahkan data yang akan diproses
ke sumber yang ditentukan atau server dengan
menggunakan sebuah permintaan HTTP POST.
Syntax :
$.post(URL,data,callback);
Contoh : Commented [ee7]: Berikan penjelasan dan screenshotnya
latihan_post.php
<?php
$nama=$_POST["nama"];
$materi=$_POST["materi"];
echo "Hallo ".$nama.". ";
echo "Sekarang kita belajar ".$materi.".";
?>
post.php
<!DOCTYPE html>
<html>
<head>
<script language="JAVASCRIPT" src="js/jquery-
$.post("latihan_post.php",
{
nama:"Sirkel",
Laboratorium SIRKEL
Screenshot Hasil :
bawah ini.
Ketika user menekan tombol di atas maka akan muncul alert

seperti di bawah ini.

Laboratorium SIRKEL
2.5 AJAX Event Handler

Metode ini mendaftarkan penangan yang akan dipanggil
bila ada kejadian tertentu, seperti inisialisasi atau penyelesaian,
mengambil tempat untuk setiap permintaan AJAX pada
halaman.
Berikut macam-macam AJAX Event Handler : Commented [ee8]: Tolong tuliskan macam-macam ajax event
handlernya dulu baru penjelasnnya.
2.5.1 .ajaxComplete() Commented [ee9]: Screen shotnya mana
Metode ajaxComplete () menentukan fungsi yang akan

dijalankan ketika sebuah permintaan AJAX selesai.
Tidak seperti ajaxSuccess (), fungsi ditentukan dengan
ajaxComplete () metode akan berjalan ketika permintaan
selesai, bahkan tidak berhasil.
Syntax :
$(selector).ajaxComplete(function(event,xhr,
options))

Laboratorium SIRKEL
Parameter Deskripsi
function(event,xhr,options) Menentukan fungsi untuk menjalankan ketika

permintaan selesai.
Tambahan parameter :
event - event berisi objek
xhr - berisi objek XMLHttpRequest
options - berisi pilihan yang digunakan dalam
permintaan AJAX
Contoh :
file.php
File Sukses DiTampilkan ! Selamat!

AjaxComplete.php Commented [ee10]: penjelasan
<!DOCTYPE html>
<html>
<head>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jq
uery.min.js">
</script>
<script>
$("#txt").ajaxStart(function(){
$("#wait").css("display","block");
});
$("#txt").ajaxComplete(function(){
$("#wait").css("display","none");
});
$("#txt").load("file.php");
});
});
</script>
</head>
<body>
<div id="txt"><h2>Learn Ajax With Sirkel
Laboratory</h2></div>
<br>
15 | ModulSaya</button>
<button>Klik Praktikum Pemrograman Web 2013/2014
<br>
<div style="display:none;">
<img src='loading.gif' width="64" height="64" />
Laboratorium SIRKEL
Screenshot Hasil :
Lalu pilih Klik Saya. Maka akan muncul :
2.5.2 ajaxError() Commented [ee11]: screenshot dan penjelasan
Mendaftarkan handler yang akan dipanggil ketika Ajax

permintaan lengkap dengan kesalahan.
Syntax :
$(selector).ajaxError(function(event,xhr,
options,exc))
Parameter Deskripsi
function(event,xhr,options,exc) Menentukan fungsi untuk dijalankan jika

Laboratorium SIRKEL
permintaan gagal.
Tambahan parameter:
options - berisi pilihan yang digunakan dalam
permintaan AJAX
exc - berisi pengecualian JavaScript, jika
salah satu terjadi
Contoh :
AjaxError.php
<!DOCTYPE html>
<html>
<head>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jqu
ery.min.js">
</script>
<script>
$("div").ajaxError(function(){
alert("Ada Eror Gan!");
});
$("div").load("File.php");
});
});
</script>
</head>
<body>
<div><h2>Try Ajax With Sirkel Lab</h2></div>
<button>Klik Saya</button>
</body>
</html>
Screenshot Hasil :

Laboratorium SIRKEL
Lalu pilih Klik Saya. Maka akan muncul alert seperti

dibawah ini :
2.5.3 ajaxSend() Commented [ee12]: screenshot dan penjelasannya

Metode menentukan fungsi untuk menjalankan ketika
sebuah permintaan AJAX akan segera dikirim.
Syntax :
$(selector).ajaxSend(function(event,xhr,
options))
Parameter Deskripsi
function(event,xhr,options) Menentukan fungsi untuk dijalankan jika

permintaan berhasil.
Tambahan parameter :
Pilihan - berisi pilihan yang digunakan
dalam permintaan AJAX
Contoh :
file.php
File Sukses DiTampilkan ! Selamat!

Modul Praktikum Pemrograman Web 2013/2014
Laboratorium SIRKEL
AjaxSend.php
<!DOCTYPE html>
<html>
<head>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jqu
ery.min.js">
</script>
<script>
$("div").ajaxSend(function(e,xhr,opt){
$(this).html("Requesting " + opt.url);
});
$("div").load("file.php");
});
});
</script>
</head>
<body>
<div><h2>Try AjaxSend() with Sirkel</h2></div>
<button>Klik Saya</button>
Screenshot Hasil :
</body>
</html>
Lalu pilih Klik Saya. Maka akan muncul :

Laboratorium SIRKEL
2.5.4 ajaxStart() Commented [ee13]: screenshot dan penjelasannya
Metode menentukan fungsi yang akan dijalankan ketika

sebuah permintaan AJAX dimulai.
Syntax :
$(selector).ajaxStart(function())
Contoh :
AjaxStart.php
<!DOCTYPE html>
<html>
<head>
<script
uery.min.js">
Parameter
</script> Deskripsi
<script>
function() Menentukan fungsi untuk menjalankan
$("div").ajaxStart(function(){
ketika permintaan AJAX dimulai
$(this).html("<img src='loading.gif' />");
});
});
});
</script>
</head>
<body>
<div><h2>Try Ajax Start with Sirkel</h2></div>
<button>Tekan Saya</button>
</body>
</html>

Laboratorium SIRKEL
Screenshot Hasil :
Parameter Deskripsi
function() Menentukan fungsi untuk menjalankan

ketika semua permintaan AJAX telah selesai.
Lalu pilih Tekan Saya. Maka akan muncul icon loading

seperti dibawah ini :
2.5.5 ajaxStop() Commented [ee14]: screenshot dan penjelasannya
Metode menentukan fungsi untuk menjalankan ketika

SEMUA permintaan AJAX telah selesai.
Syntax :
$(selector).ajaxStop(function())

Laboratorium SIRKEL
Ketika sebuah permintaan AJAX selesai, cek jQuery jika ada lagi
permintaan AJAX. Fungsi ditentukan dengan metode ajaxStop ()
akan dijalankan jika tidak ada permintaan lain yang tertunda.
Contoh :
AjaxStop.php
<!DOCTYPE html>
<html>
<head>
<script
uery.min.js">
</script>
<script>
$("div").ajaxStop(function(){
alert("Request AJAX Berhasil");
});
$("div").load("ajax.txt");
});
});
</script>
</head>
<body>
<div><h2>Try ajaxStop with Sirkel</h2></div>
<button>Klik Me</button>
</body>
</html>
Ajax.txt
Ajax With Jquery == COOL!
Diisikan sesuai dengan data/kata-kata yang ingin

ditampilkan
Screenshot Hasil :

Laboratorium SIRKEL
Lalu pilih Klik Me. Maka akan muncul seperti dibawah ini :
Note :
Masih ada banyak lagi Event Handler AJAX bisa langsung dipelajar di
http://api.jquery.com/category/ajax/global-ajax-event-handlers/ atau di
http://www.w3schools.com/jquery/jquery_ref_ajax.asp
3. Worksheet Commented [ee15]: good job !
index.php
<html>
<head>
<script type="text/javascript" src="jquery.js">
</script>
<title></title>
</head>
<body>
<fieldset style="width: 250px;">
<legend> Form Input With Ajax </legend>
<form id="form">
<table>
<tr>
<td> Nim </td>
<td> : </td>
Laboratorium SIRKEL
<div id="isi" style="color: green;"></div>

</fieldset>
<img src="loader.gif" id="loading">
<script type="text/javascript">
$(document).ready(function() {
$('#loading').hide();
$('#form').submit(function() {
var form_data = {
nim : $('#nim').val(),
nama : $('#nama').val(),
alamat : $('#alamat').val()
};
| Modul Praktikum Pemrograman Web 2013/2014
24$.ajax({
url : 'proses.php',
data : form_data,
type : 'POST',
Laboratorium SIRKEL
koneksi.php
<?php
mysql_connect("localhost","root","");
mysql_select_db("namadatabase");
?>
proses.php
<?php
// print_r($_POST);
include'koneksi.php';
$nim = $_POST['nim'];
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$query = mysql_query("INSERT INTO mahasiswa

(nim,nama,alamat)
VALUES('$nim','$nama','$alamat')");
$query2 = mysql_query("SELECT * FROM mahasiswa");
$no = 1;
while($data = mysql_fetch_array($query2)) {
Laboratorium SIRKEL
Hasil :

Modul Untuk Ajax

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Untuk Ajax

Diunggah oleh

Hak Cipta:

Format Tersedia

Laboratorium SIRKEL

Jurusan Teknik Informatika, Universitas Islam Indonesia

Dimulai dari halaman 2

1 | Modul Praktikum Pemrograman Web 2013/2014

2 | Modul Praktikum Pemrograman Web 2013/2014

AJAX (Asynchronous JavaScript and XML) merupakan suatu

2.2 Mekanisme Proses AJAX menggunakan PHP

Gambar 8.1 Proses Menggunakan AJAX

3 | Modul Praktikum Pemrograman Web 2013/2014

a. Proses berawal dari web client. Web client meminta

Gambar 8.2 Proses Tanpa Menggunakan AJAX

halaman tanpa dan menggunakan AJAX.

4 | Modul Praktikum Pemrograman Web 2013/2014

2.3 Kegunaan AJAX

5 | Modul Praktikum Pemrograman Web 2013/2014

Teknik-teknik AJAX memungkinkan halaman web atau

2.4 AJAX Interface

6 | Modul Praktikum Pemrograman Web 2013/2014

Contoh : Commented [ee3]: Ada contoh, ada penjelasan!

Setelah script di atas dieksekusi, maka akan muncul tombol

8 | Modul Praktikum Pemrograman Web 2013/2014

Contoh : Commented [ee5]: Tambahkan screenshot dan penjelasan.

9 | Modul Praktikum Pemrograman Web 2013/2014

Ketika user menekan tombol berubah maka tulisan TEKS

Contoh : Commented [ee6]: Tambahkan screenshot dan penjelasannya

10 | Modul Praktikum Pemrograman Web 2013/2014

Ketika user menekan tombol di atas maka akan muncul alert

11 | Modul Praktikum Pemrograman Web 2013/2014

Contoh : Commented [ee7]: Berikan penjelasan dan screenshotnya

Ketika user menekan tombol di atas maka akan muncul alert

13 | Modul Praktikum Pemrograman Web 2013/2014

2.5 AJAX Event Handler

2.5.1 .ajaxComplete() Commented [ee9]: Screen shotnya mana

Metode ajaxComplete () menentukan fungsi yang akan

14 | Modul Praktikum Pemrograman Web 2013/2014

function(event,xhr,options) Menentukan fungsi untuk menjalankan ketika

AjaxComplete.php Commented [ee10]: penjelasan

Lalu pilih Klik Saya. Maka akan muncul :

2.5.2 ajaxError() Commented [ee11]: screenshot dan penjelasan

Mendaftarkan handler yang akan dipanggil ketika Ajax

function(event,xhr,options,exc) Menentukan fungsi untuk dijalankan jika

16 | Modul Praktikum Pemrograman Web 2013/2014

17 | Modul Praktikum Pemrograman Web 2013/2014

Lalu pilih Klik Saya. Maka akan muncul alert seperti

2.5.3 ajaxSend() Commented [ee12]: screenshot dan penjelasannya

function(event,xhr,options) Menentukan fungsi untuk dijalankan jika

Lalu pilih Klik Saya. Maka akan muncul :

19 | Modul Praktikum Pemrograman Web 2013/2014

2.5.4 ajaxStart() Commented [ee13]: screenshot dan penjelasannya

Metode menentukan fungsi yang akan dijalankan ketika

20 | Modul Praktikum Pemrograman Web 2013/2014

function() Menentukan fungsi untuk menjalankan

Lalu pilih Tekan Saya. Maka akan muncul icon loading

2.5.5 ajaxStop() Commented [ee14]: screenshot dan penjelasannya

Metode menentukan fungsi untuk menjalankan ketika

21 | Modul Praktikum Pemrograman Web 2013/2014

Diisikan sesuai dengan data/kata-kata yang ingin

22 | Modul Praktikum Pemrograman Web 2013/2014

3. Worksheet Commented [ee15]: good job !

<div id="isi" style="color: green;"></div>

$query = mysql_query("INSERT INTO mahasiswa

26 | Modul Praktikum Pemrograman Web 2013/2014

Anda mungkin juga menyukai