Pada akhir baris di halaman Pengenalan AJAX saya telah membuat contoh skrip AJAX sederhana, tapi sebelum itu saya mengajak anda mengenal XMLHttpRequest.
XMLHttpRequest merupakan objek yang dirancang untuk memungkinkan pemrogram melakukan permintaan HTTP dari suatu aplikasi. HTTP adalah sebuah protokol, digunakan oleh web browser untuk mengirim request dari website ke web server dan kemudian menerima response dari web server. Objek XMLHttpRequest inilah yang membuat JavaScript bisa meminta layanan ke server HTTP secara asinkron, menerima tanggapan dari server, dan memperbaharui isi sebagian halaman web.
Hasil Skip ajax sederhana pada Pengenalan Ajax :
Hasil ketika di klik Say Haloo!
Jadi jika anda telah mencoba skrip ini, hasil yang didapat AJAX tidak melakukan reload halaman ketika button Say Halooo ! di-klik, tapi hanya melakukan perubahan data untuk meng-update halaman. Jadi lebih hemat waktu bukan ??. Berikut ini penjelasan dari skrip tersebut :
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("halo").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="halo"><h2>Katakan HALO pada Dunia !</h2></div>
<button type="button" onclick="loadXMLDoc()">Say Halooo !</button>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
Baris ini untuk membuat suatu fungsi yang diberi nama loadXMLDoc() yg akan dipanggil ketika mengklik button Say Halooo.
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById("halo").innerHTML=xmlhttp.responseText;
Untuk lebih jelasnya berikut ini tabel properti dari XMLHttpReqeuestObjeck yang biasa digunakan :
Properti | Deskripsi |
onreadystatechange | Properti ini adalah sebuah event handler yang memberikan anda untuk men-trigger sebuah blok kode atau function |
readyState | Berisi informasi state dari object XMLHttpRequest pada saat properti ini digunakan 0: uninitialized 1: loading 2: loaded, 3: interactive 4: complete |
Status | 200 : OK 404 : Page not found |
Mari lanjut pada baris berikutnya
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
Method | Deskripsi |
open(method,url,async) | Menspesifikasikan tipe request yang digunakan, Link URL, apakah dilakukan asinkron atau tidak. method: tipe request: GET or POST url: lokasi file di server async: true (asynchronous) atau false (synchronous) |
send(string) | Digunakan mengirim request ke server String : digunakan untuk POST request |
</script>
</head>
<body>
<div id="halo"><p>HALOOO DUNIA....</p></div>
<button type="button" onclick="loadXMLDoc()">Say Halooo !</button>
</body>
</html>
Diharapkan dengan penjelasan ini anda yang ingin belajar ajax lebih memahami sedikit demi sedikit.
Tidak ada komentar:
Posting Komentar