Monday, February 02, 2009

AJAX Pemula Bag. I

Mengenal Ajax

Ajax singkatan dari Asynchronous JavaScript and XML. Ajax memberi teknik client-server JavaScript untuk mengambil data dan menerima data dari server secara "background". Halaman web dapat diupdate pada tempat tertentu (misalnya teksbox, label, combobox, optionbox, dll) tanpa harus reload (me-refresh satu halaman penuh). Ajax sendiri sangat populer pada tahun 2005 yang diperkenalkan oleh google ataupun web developer besar lainnya.

Ajax sendiri akan sangat berhubungan dengan JavaScript. Pada awal lahirnya javaScript, banyak programmer yang menggunakan script ini untuk membuat dynamic halaman web. JavaScript ini banyak digunakan untuk validasi, popup message, jam, dll. Tetapi JavaScript ini tidak berhubungan langsung dengan Web Server. Kenapa programmer menggunakan JavaScript ini guna mengurangi beban server.

Jika ingin mendapatkan informasi dari server, maka dapat menggunakan bahasa pemrograman client-server seperti PHH, ASP, ColdFusion, Java, dll. Bahasa pemrograman ini dapat mendapatkan informasi dari server dengan menggunakan HTML Form baik POST ato GET. Data dapat dikirim atau diambil dengan menggunakan tombol "submit". Dimana halaman akan direload secara keseluruhan, hal ini akan sangat bermasalah jika web servernya lambat.

Ajax mencoba memperbaiki JavaScript untuk dapat berkomunikasi secara langsung dengan server secara langsung. Ajax menggunakan javaScript Object XMLHttpRequest.
Dengan Object ini, maka java script dapat berhubungan dengan server secara langsung.
dan nilai tambahnya adalah Ajax dapat mengambil dan mengirim data tanpa harus mereload seluruh halaman. Dengan kata lain, user dapat bekerja dan Ajax dapat berkerja. Karena Ajax bekerja secara background.

Ajax dapat sangat membingungkan bagi orang yang belum familiar bahasa pemrograman web. Sehingga diusahkan belajar dan mengenal dulu HTML dan JavaScript sebelum lebih lanjut mengenal Ajax.

Untuk memudahkan kita mengenal Ajax, kita akan membuat form HTML dengan 2 text field.
kita kasih nama pengguna dan waktu. Dimana kita tidak menggunakan tombol submit. Waktu akan terisi otomatis dari server ketika kita sudah selesai mengetik nama pengguna.

 
<html>
<body>

<form name='Formku'>
Name: <input type='text' name='pengguna' /> <br />
Time: <input type='text' name='waktu' />
</form>

</body>
</html>


simpan dengan nama coba.html


<html>
<body>
<script language="javascript" type="text/javascript">
// Code untuk mengecek browser support Ajax atau tidak
function cekAjax(){
var cek;
try{
// Opera 8.0+, Firefox, Safari
cek= new XMLHttpRequest();
} catch (e){
// Browser Internet Explorer (IE)
try{
cek = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
cek = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
//Bermasalah
alert("Browser Anda Tidak Support!");
return false;
}
}
}
}

<form name='Formku'>
Name: <input type='text' name='pengguna' onChange="cekAjax()" /> <br />
Time: <input type='text' name='waktu' />
</form>


</body>
</html>


Bersambung....

No comments:

Post a Comment