aGuz's bLog: AJAX

A. Definisi Ajax

AJAX adalah singkatan bahasa Dari Asynchronous JavaScript dan XML. AJAX merupakan Teknik Baru di Dunia pengembanan web Auditan Yang berguna untuk membuat Aplikasi Web, Yang lebih "kaya" dibandingkan Mencari Google Artikel Aplikasi web ordinary.

AJAX sebenarnya menggunakan teknologi yang sudah ada : JavaScript, HTML, DHTML, CSS dan XML. Jika anda sudah terbiasa menggunakan DHTML, bagaimana membuat layer menggunakan <span>, <div>, menggunakan innerHTML atau outerHTML, maka teknologi seperti itu juga akan dipakai dalam AJAX. Dimana setelah JavaScript mendapatkan data dari server, maka data tersebut harus dilempar ke client melalui object2 yang sudah kita definisikan sebelumnya (menggunakan <span> atau ,<div>)

B. Tujuan

Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability.

C. Kombinasi Ajax

yang diakses dengan client side scripting language, seperti VBScript dan implementasi ECMAScript seperti JavaScript dan JScript, untuk menampilkan secara dinamis dan berinteraksi dengan informasi yang ditampilkan

Objek XMLHTTP dari Microsoft atau XMLHttpRequest yang lebih umum di implementasikan pada beberapa browser. Objek ini berguna sebagai kendaraan pertukaran data asinkronus denganweb server. Pada beberapa framework AJAX, element HTML IFrame lebih dipilih daripada XMLHTTP atau XMLHttpRequest untuk melakukan pertukaran data dengan web server.

umumnya digunakan sebagai dokumen transfer, walaupun format lain juga memungkinkan, seperti HTML, plain text. XML dianjurkan dalam pemakaian teknik AJaX karena kemudahan akses penanganannya dengan memakai DOM

JSON

dapat menjadi pilihan alternatif sebagai dokumen transfer, mengingat JSON adalah JavaScript itu sendiri sehingga penanganannya lebih mudah

Seperti halnya DHTML, LAMP, atau SPA, Ajax bukanlah teknologi spesifik, melainkan merupakan gabungan dari teknologi yang dipakai bersamaan. Bahkan, teknologi turunan/komposit yang berdasarkan Ajax, seperti AFLAX sudah mulai bermunculan.

D. Contoh

Misalnya ada form HTML yang dipakai untuk registrasi user, dimana ada kolom propinsi yang berupa pilihan (combobox), propinsi ini tergantung dari Negara yang dipilih sebelumnya. Pada saat user memilih Negara, maka ada script JavaScript yang diexecute untuk membaca ke server list dari propinsi yang ada di negara yang dipilih (secara background), setelah ketemu akan mengembalikan nilai yang akan menjadi pilihan propinsi.luruhan halaman yang ada. Jadi JavaScript yang berjalan disisi client bisa menjalankan script disisi server secara background (script di sisi server bisa berupa ASP, PHP, JSP dll).

Jika anda pengguna Yahoo!Mail atau GMail atau pengguna blog di wordpress ini, semuanya sudah dibuat dengan teknik AJAX. Dengan menggunakan AJAX maka script yang berjalan disisi client (JavaScript) bisa berkomunikasi langsung dengan server tanpa merefresh ulang.

E. Tutorial

Step 1 : Membuat struktur folder kerja

Siapkan folder dengan nama simpleajax pada folder document root anda.
Simpan file gif berikut ini pada folder simpleajax (simpan gambar dengan cara : klik pada gambar dan save as). Gambar ini akan digunakan sebagai loader animation, yaitu gambar yang akan ditampilkan ketika transaksi ajax sedang dilakukan.
Simpan semua file pada praktikum hari ini pada folder ini.

Step 2 : Membuat file Index

Ketikkan script berikut,

<html>
<head>
<title></title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<center>
<h3> Simple AJAX Tabs</h3>
<div id="tabs">
<a href="fallback1.php" id="tab1" class="tab" onclick="return handleOnClick(1);"> News 1</a>
<a href="fallback2.php" id="tab2" class="tab" onclick="return handleOnClick(2);">News 2</a>
</div>
<br>
<div id="content">Klik pada tab untuk mengaktifkannya.</div>
</center>
</body>
</html>

Simpan dengan nama index.php
Penjelasan : Index.php adalah file utama dalam aplikasi ini. Bagian yang paling penting untuk implementasi Ajax adalah pada baris 9 – 14. Setiap link pada tab memiliki masing – masing sebuah atribut value href dan onclick event handler, seperti pada script dibawah,
```
<a href="fallback1.php" id="tab1" class="tab" onclick="return handleOnClick(1);"> News 1</a>
```
Pada kasus ini, AJAX diinisiasi ketika user mengaktifkan tab dengan meng-kliknya.

Ketika transaksi AJAX berhasil dieksekusi = fungsi handleOnClick() mengembalikan nilai false sehingga akan membatalkan event klik. AJAX kemudian mengontrol proses update pada dokumen dan href tidak diikuti.
Ketika transaksi AJAX gagal (XMLHttpRequest objek tidak dapat diinstansiasi, dengan kata lain browser tidak support AJAX) = Fungsi handleOnClick mengembalikan nilai true dan href diikuti, menavigasi dokumen pada halaman dokumen baru (yaitu halaman fallback).

Kenapa aplikasi menyediakan masing-masing event handler onClick dan sebuah href URL untuk setiap tab?

Hal ini untuk mengatasi apabila browser dari device yang digunakan tidak mensupport AJAX. Jadi apabila device mensupport AJAX, transaksi AJAX untuk menampilkan berita akan dilakukan. Namun apabila tidak support, berita tetap ditampilkan tetapi dengan mengarahkannya pada halaman web baru (halaman fallback) berisi berita yang sama dari halaman yang dihasilkan oleh transaksi AJAX.

Step 3 : Membuat file ajax.js

Ketikkan script berikut,

var req = null;
// Function to obtain an instance of XMLHttpRequest used in an AJAX request
function getXHR() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else try {
return new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
return null;
}
}
}
// Use AJAX to update the page content.
// Returns true if the AJAX request succeeded, or false otherwise.
function updateContent(url, id) {
req = getXHR();
if (req != null) {
// Create a HTTP get request
req.open('GET', url);
// Anonymous callback function to handle state changes for the web request
req.onreadystatechange = function() {
// State "4" is response received.
if (req.readyState == 4) {
// Check for HTTP 200 - successful response from web server
if (req.status == 200) {
document.getElementById(id).innerHTML = req.responseText;
} else {
document.getElementById(id).innerHTML = 'Could not retrieve data.';
}
}
// For all other states, show an animated gif indicating that content is loading
else {
document.getElementById(id).innerHTML = '<img id="loading" src="flickr-loader.gif"/>'; //result of download step 1
}
return false;
}
// Start the AJAX transaction
req.send('');
} else {
return false;
}
return true;
}
// This is the onClick event handler for the tab links
// index - the zero-based index of the tab that was clicked
function handleOnClick(index) {
// Construct the ID of the clicked tab
var tabId = "tab" + index;
// Update the style of the active tab.
document.getElementById(tabId).setAttribute('class', 'activeTab');
// Update the styles of the inactive tabs. This could also be achieved in a for loop.
if (index != 1) {
document.getElementById("tab" + 1).setAttribute('class', 'tab');
}
if (index != 2) {
document.getElementById("tab" + 2).setAttribute('class', 'tab');
}
// Use AJAX to update the "content" div.
// Construct the URL to use to retrieve the updated content
var url = "http://localhost/helloMobile/getNews"+index+".php";
// If the AJAX request succeeded, do not follow the original link
if (updateContent(url, "content")) {
return false;
}
// If we are here, then the AJAX transaction failed.
// Follow the link and load the static page.
return true;
}

Simpan dengan nama ajax.js
Penjelasan : Kunci utama dari AJAX adalah objek XMLHttpRequest. Objek tersebut terletak pada browser sehingga masing – masing browser memiliki cara tersendiri untuk membuat objek tersebut. Function getXHR() pada script ajax2.js diatas adalah fungsi untuk menciptakan instance dari XMLHttpRequest (XHR) yang akan digunakan pada AJAX (Catatan : untuk IE, mensupport ajax via ActiveX objects, bukan XHR).Function updateContent() merupakan fungsi yang akan mengupdate content dari tab via AJAX, fungsi ini akan mengembalikan nilai true apabila transaksi AJAX berhasil, dan false jika gagal.
Setelah itu fungsi akan menciptakan Http get request dan mengecek progress dari update dengan onreadystatechange event.
onreadystatechange event menjalankan 3 hal,
a. Jika asynchronous web request sedang dalam progress, maka animasi loading akan ditampilkan.
b. Jika AJAX request completed, maka body dari web response akan digunakan sebagai content dari elemen.
c. Jika AJAX request terminate dengan sebuah eror, maka eror akan ditampilkan pada user, yaitu “Could not retrieve data”Transaksi AJAX menggunakan document.getElementById dan element.innerHTML untuk mengupdate bagian dinamis dari dokumen (dalam kasus ini adalah berita sebagai bagian dinamis dari mobile web).

Function handleOnClick() merupakan fungsi event handler ketika tab di klik. Fungsi ini menggunakan parameter index, sesuai dengan index dari tab yang diklik oleh user. Fungsi ini akan mengupdate style dari tab (untuk membedakan tab yang aktif dan yang tidak aktif) dan mengupdate isi dari div content. Isi dari div content merupakan file berita sesuai dengan tab yang diklik user. Content ini didapat dari URL var url = “http://localhost/simpleajax/getNews”+index+”.php”;
Jadi script tersebut akan me-retrieve halaman dari getNews(index) dengan menggunakan AJAX, sesuai dengan index dari tab yang diklik oleh user.

Step 4 : Membuat file get News

Ketikkan script berikut,

<?php
sleep(2);
echo "News 1";
echo "Ini adalah isi berita 1";
?>

Simpan dengan nama getNews1.php

Kemudian ketiikan script berikut,

<?php
sleep(2);
echo "News 2";
echo "Ini adalah isi berita 2";
?>

Simpan dengan nama getNews2.php
Penjelasan : Dua file ini merupakan original link (yang dijalankan via AJAX) dari tab pertama dan kedua (tab berindex 1 dan 2). Jadi getNews1.php dan getNews2.php akan dijalankan apabila user meng-klik tab index 1 dan 2, serta browser yang digunakan mensupport AJAX.

Step 5 : Membuat file fallback

Ketikkan script berikut,

<html>
<head>
<title></title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<center>
<h3> Simple AJAX Tabs</h3>
<div id="tabs">
<a href="fallback1.php" id="tab1" class="tab" onclick="return handleOnClick(1);"> News 1</a>
<a href="fallback2.php" id="tab2" class="tab" onclick="return handleOnClick(2);">News 2</a>
</div>
<div id="content">
<?php echo "News 1";
echo "Ini adalah isi berita 1";
?>
</div>
</center>
</body>
</html>

Simpan dengan nama fallback1.php

Kemudian ketiikan script berikut,

<html>
<head>
<title></title>
<script type="text/javascript" src="ajax2.js"></script>
</head>
<body>
<center>
<h3> Simple AJAX Tabs</h3>
<div id="tabs">
<a href="fallback1.php" id="tab1" class="tab" onclick="return handleOnClick(1);"> News 1</a>
<a href="fallback2.php" id="tab2" class="tab" onclick="return handleOnClick(2);">News 2</a>
</div>
<div id="content">
<?php echo "News 2";
echo "Ini adalah isi berita 2";
?>
</div>
</center>
</body>
</html>

Simpan dengan nama fallback2.php
Penjelasan : File fallback1.php dan fallback2.php merupakan file webpage statis yang akan dijalankan apabila user meng-klik tab index 1 dan 2, serta browser yang digunakan TIDAK mensupport AJAX. Jadi berita tetap ditampilkan namun dengan cara yang berbeda (tidak menggunakan AJAX).

Step 6 : Testing Code

Pergi ke http://localhost/simpleajax/
Maka file index.php akan ditampilkan, seperti gambar dibawah ini,
Klik pada salah satu tab, maka jika browser anda support ajax, animasi loading akan ditampilkan. Lihat gambar dibawah.
Setelah loading selesai, maka isi dari tab tersebut akan ditampilkan (dari getNews.php)
Coba matikan ajax pada browser anda (dengan me-nonaktifkan javascript browser – untuk browser Firefox, caranya adalah dengan klik tools – options – content – hilangkan tanda centang pada activated javascript ). Lihat gambar dibawah.
Coba lagi dengan mengklik salah satu tab.
Maka berita akan ditampilkan tanpa animasi loading (without AJAX) dari file fallback.php