AJAX Talk: Simple XML HTTP Request Object Implementation

Ini adalah kesempatan saya yang pertama untuk memberikan sedikit pengenalan kepada anda tentang AJAX(Asynchronous JavaScript and XML). AJAX bukanlah sebuah teknologi, melainkan sebuah teknik yang mendeskripsikan bagaimana JavaScript dapat digunakan untuk mengambil data dari server dengan menggunakan XML HTTP Request Object dan kemudian data tersebut dimasukan kedalam website dengan menggunakan DOM(Document Object Model). Semua ini bekerja secara asinkron(Asynchronous) dan dapat diselesaikan tanpa me-refresh page. AJAX merupakan teknik yang tepat untuk membuat suatu website yang dimanis.

Banyak implementasi dari AJAX ini. Namun kali ini saya akan mulai memperkenalkan AJAX dari Simple XML HTTP Request Object. Sudahkah anda siap untuk menyambut AJAX? Klo sudah mari kita mulai..

1. Starter

Tutorial ini saya buat mengharuskan anda untuk membuat webserver local. Jika anda belum menginstalnya silahkan instal terlebih dahulu. Saya anjurkan anda menggunakan XAMPP. Silahkan lihat tutorialnya disini XAMPP Talk: How to instal XAMPP. Jika sudah menginstal, buatlah folder tutorialajax pada c:\xampp\htdocs. Buatlah juga beberapa file berikut:

1. index.html digunakan sebagai homepage. Dimana kita akan membuat halaman ini sebagai halaman utama.
2. requestme.php file ini akan kita gunakan sebagai target file yang akan kita load secara asynchronous ke halaman utama.
3. jquery.js ini adalah jQuery library yang kita gunakan untuk memberikan sedikit animasi pada website.

2.  Download jQuery Library

Jika anda belum mempunyai jQuery Library, silahkan download disini. Copy semua scriptnya dan paste pada file jquery.js. Jangan lupa untuk menyimpan file tersebut.

3. HTML Coding time

Untuk menggunakan jQuery library pada file jquery.js kita dapat gunakan script berikut.

<script type=”text/javascript” src=”jquery.js”></script>

Berikut adalah fungsi yang akan kita gunakan ketika user merequest halaman requestme.php.

<script type=”text/javascript”>

function replace() {

var objAJAX;

if(navigator.appName == “Microsoft Internet Explorer”) {

objAJAX = new ActiveXObject(“Microsoft.XMLHTTP”);

} else {

objAJAX = new XMLHttpRequest();

}

objAJAX.open(“POST”, “requestme.php”, true);

objAJAX.onreadystatechange=function() {

if(objAJAX.readyState == 4) {

$(“#replaceme”).animate({height: “0″}, 1000, function() {

document.getElementById(‘replaceme’).innerHTML = objAJAX.responseText;

}).animate({height: “100″}, 1000, function() {

$(“#hide”).animate({opacity: “0″}, 1000)

.animate({height : “0″}, 1000)

});

}

};

objAJAX.send(null);

}

</script>

Yup, lumayan panjang. Ok mari kita bahas satu persatu. Jelas terlihat bahwa diatas terdapat fungsi dengan nama replace. Dimana fungsi ini mempunyai variable XML HTTP Request Object.  Diketahui bahwa setiap browser mempunyai kelas sendiri-sendiri untuk mengambil object dari XML HTTP Request Object. Maka tertulis discript diatas ketika navigator.appName(baca: browser) adalah Microsoft Internet Explorer maka objAJAX akan diset ke ActiveXObject(“Microsoft.XMLHTTP”) jika selain itu maka object diambil dari kelas XMLHttpRequest(). Ketika object sudah terbentuk, maka yang dilakukan script diatas adalah me-request suatu filedari suatu url menggunakan fungsi open.

Ketika status ready dari pemesanan object tersebut berubah (onreadystatechange), maka terdapat fungsi yang menampung perubahan value’a tersebut. Ketika status ready(readyState) adalah 4, maka element html dengan id replaceme akan menghilang dengan animasi dari jQuery lalu isinya diubah dengan hasil respon dari request diatas dan akhirnya element ini ditampilkan kembali. Lalu element HTML dengan id hide dihilangkan dengan animasi dari jQuery. Setelah itu fungsi send digunakan untu mengirimkan parameter. Karena kita tidak membutuhkannya, maka kita set paramenternya dengan nilai null.

Tambahkan lagi script HTML diatas dengan script berikut:

<p id=”hide“><a href=”javascript:replace()“>Request the content of requestme.php file now!</a></p>

<div id=”replaceme“>

Hello world!

</div>

Yup, disinilah pemanggilan fungsi diatas terjadi. Dan terdapat dua id HTML yang digunakan saat pemanggilan fungsi replace.

3. PHP Coding time

Isikan file requestme.php dengan script berikut:

<?php

echo “This is The Content of requestme.php file. <br />

You’ve succesfully use AJAX Object Request. Congrats.”;

?>

Script PHP diatas hanya mengembalikan kalimat dalam echo saat file requestme.php di request. Kalimat tersebut akan menggantikan kalimat “Hello world!” pada halaman utama saat user merequest halaman ini.

Jika anda sudah selesai dengan semua step diatas, silahkan buka http://localhost/tutorialajax/. Jangan lupa untuk menyimpan semua file yang anda buat dan Start webserver local Apache anda pada XAMPP control. Klik “Request the content of requestme.php file now!”, perhatikan apa yang terjadi dengan website anda. Sekian tutorial dari saya kali ini, Jangan lupa tinggalkan komentar ya? eSDhee

 

Advertisement