Monday, February 02, 2009

AJAX Pemula Bag. II

Jika kita sudah familiar bahasa pemrograman, seperti PHP, Java, DotNet gw kira ga begitu masalah dengan kode diatas.

Pada bagian pertama kita menggunakan Try dan Catch. Fungsi ini digunkan untuk menangkap error jika terjadi error pada script diatas. Kalo zaman dulu gw kuliah pake VB 5 itu on error resume next.

Try Catch diatas untuk mengetes object XMLHttpRequest.
yang pertama dicoba adalah

cek=new XMLHttpRequest();

kode diatas untuk mengecek Object browser Opera, Firefox dan Safari. Jika salah error ato tidak terdefinisi, maka akan masuk ke catch yang akan mengecek untuk object kedua. yaitu

cek=new ActiveXObject("Msxml2.XMLHTTP");
cek=new ActiveXObject("Microsoft.XMLHTTP");

Jika pada pengecekan kedua ternyata Object juga tidak terdefinisi, maka kita bisa masukan kedalam kategori error atau browser tidak support Ajax (kasian dech, update dong browsernya xixixixi).

Sampai disini kalo kita jalankan web kita dan kita ketikan huruf terus pindah kursor dipindahkan dari teks boks pengguna, jika browser tidak support Ajax maka akan keluar pesan dilayar. Namun jika tidak keluar berarti support. Nah untuk meyakinkannya dapat memodifikasi menambahkan kode alert pada kondisi yang benar dibawah cek=new ... (tau kan :p ).

karena keinginan kita adalah mendapatkan jam atau waktu dari server maka kita membutuhkan kode untuk meminta dan mendapatkan data dari server. XMLHttpRequest memiliki property spesial yang disebut onreadystatechange. onreadystatechange akan menyimpan fungsi dan akan memproses respons dari server.
selain onreadystatechange, XMLHttpRequest juga memiliki property readystate. readystate adalah status untuk menyimpan respons server kita. Respons dapat berupa proses, download, ato selesai. Setiap waktu readystate akan berubah sejalan dengan eksekusi fungsi pada onreadystatechange.

Pada kali ini, kita akan membahas dulu readystate untuk respones pada status complete, agar kita dapat mengambil informasi yang dieksekusi dari sever.

Deskripsi State
0 Request tidak diinisialisasi
1 Request sudah diset up
2 Request Sudah di kirim
3 Request sedang diproses
4 Request sudah selesai


jika readystate adalah 4 maka response sudah selesai dan kita dapat mengambil data yang dikirim dari server. Property untuk mendapatkan teks dari server adalah responseText.

berikut kode untuk mengecek apakah status sudah selesai atau belum, jika sudah kita akan mencetaknya kedalam teksbox. kode berikut ini masih tetap dimasukan dalam <Script> </Script>.

cek.onreadystatechange=function(){
if(cek.readystate==4){
document.Formku.waktu=cek.responseText;
}
}


berikutnya kita akan mengirimkan request untuk mendapatkan informasi dari server. maka kita buat dulu kode yang dapat meminta data dari server. Pada awal kita sudah definisikan ingin mengetahui waktu, maka kita buat kode untuk merequest waktu pada server.
kita akan coba buat file waktu.php

<?php
echo date("H:i:s"); //atau sesuikan dengan kebutuhan -> baca time pada php yah....
?>


nah kalo sudah kita buat kita tinggal menambahkan kode untuk request server dengan menggunakan kode berikut ini didalam kode yang sebelum2nya.

cek.open("GET", "waktu.php", true);
cek.send(null);

kira2 seperti ini lah halaman lengkap 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;
}
}
}
}

cek.onreadystatechange=function(){
if(cek.readystate==4){
document.Formku.waktu=cek.responseText;
}
}
cek.open("GET", "waktu.php", true);
cek.send(null);

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

</body>
</html>

Tamat Dulu yah

No comments:

Post a Comment