Sekarang muNgkin masih banyak kalangan IT yang membicarakan AJAX?Apakah itu?
AJAX bukan pakai java, tapi javascript yg sifatnya client side script….
AJAX itu sendiri diperkenalkan oleh seorang pakar pembuat program khususnya pemrograman berbasis web. Orang yang sangat berjasa tersebut tidak lain dan tidak bukan adalah Rasmus Lerdorf, dari tangan dingin Rasmus Lerdorf ini pulalah beberapa waktu yang lalu lahirlah PHP.
Untuk mengaplikasikan AJAX dalam website, yang dibutuhkan adalah browser yang menyediakan layanan Javascript, dan komponen XMLHTTP bagi pengguna Internet Explorer (IE), dan XMLHttpRequest untuk Firefox, Safary, Opera dan browser lainnya. Syarat-syarat tersebut hampir pasti sudah terpenuhi, mengingat pengguna internet banyak yang menggunakan IE dan Firefox.
Sebenarnya tidak ada hal baru dalam AJAX, karena yang digunakan adalah teknologi javascript, yang notabene sudah lama digunakan. Oleh karena itu, bagi yang sudah terbiasa dengan javascript, akan mudah sekali mempelajari AJAX. Pembahasan ini tidak menekankan pada salah satu teknologi (Javascript, AJAX, HTML, PHP), akan tetapi keseluruhan dari hal tersebut. Hal ini karena penggunaan AJAX tidak hanya pada sisi client (browser), tapi juga melibatkan respon dari server.
Dengan menggunakan konsep ini, page HTML bisa membuat koneksi secara asinkron ke server dengan cara mengambil XML atau dokumen text. Selanjutnya XML atau dokumen text ini akan digunakan oleh javascript untuk meng-update atau memodifikasi Document Object Model (DOM) pada page HTML.
Untuk selanjutnya teknologi ini juga dikenal web remoting atau remote scripting. Developer Web dapat mengkombinasikan plug in, java applets atau hidden frame untuk mengemulasikan interaksi antara page HTML dengan dokumen XML. Dalam teknologi Javascript telah disediakan sebuah object yaitu XMLHTTPRequest. Object ini sudah banyak disupport oleh banyak browser seperti Internet Explorer, Firefox, Opera, Netscape dan lain sebagainya.
Konsep AJAX ini ide awalnya dikemukakan oleh Rasmus Lerdorf. Rasmus Lerdorft mengemukakan konsep AJAX ini dalam sebuah miling list (milist). Berawal dari milist tersebut konsep AJAX kemudian dikenal dan dikembangkan oleh banyak orang.
Nah, untuk lebih memahami definisi ajax di atas, berikut contoh sederhana penggunaan aplikasi ajax.
Sebelumnya, anda harus menginstall web server, PHP, MySql. Aplikasi yang sudah lengkap dan bias digunakan adalah XAMPP, silahkan download di website resminya yang versi terbarunya xampp di www.xampp.com
Saya anggap pembaca sudah memahami cara instalasi xampp, jika belum silahkan googling aja.
Anggap, struktur webservernya seperti berikut :
Buat folder latihanajax di folder xampp di c:\xampp\htdocs\latihanajax
Nanti seluruh file latihan ada folder tersebut.
Buat file latsatu.html
| Coba anda tuliskan sebuah text pada form di bawah |
Buat file latsatu.js
var xmlHttp = bikinXmlHttp();
function bikinXmlHttp() {
var xmlHttp;
if (window.ActiveXObject) {
try { //jika IE
xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
} catch (e) {
xmlHttp = false;
}
} else {
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
xmlHttp = false;
}
}
if (!xmlHttp) {
alert(”Gagal dalam membuat xmlHttpRequest Object”);
} else {
return xmlHttp;
}
}
function proses() {
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
teks = encodeURIComponent(document.getElementById(”teksInput”).value);
xmlHttp.open(”GET”, “latsatu.php?teks=”+teks, true);
xmlHttp.onreadystatechange = responServer;
xmlHttp.send(null);
} else {
setTimeout(’proses’,1000); //jika sibuk ulangi dalam 1 detik
}
}
function responServer() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement;
hasilTeks = xmlDocumentElement.firstChild.data;
document.getElementById(”hasilProses”).innerHTML = hasilTeks;
setTimeout(’proses()’,1000);
} else {
alert(”Ada problem, method statusText adalah “+xmlHttp.statusText);
}
}
}
Buat file latsatu.php
< ?php
header('Content-type:Text/xml');
echo '‘;
echo ‘
$teks = htmlentities($_GET[teks]);
if (!empty($teks)) {
echo ‘Teks yang anda masukkan adalah : ‘.$teks;
} else {
echo ‘Silahkan Masukkan teks pada kotak input di atas’;
}
echo ‘‘;
?>
Kalau sudah, silahkan buka web browser anda, pakai IE dan firefox
Ketikkan di url nya, http://localhost/latsatu.html
Maka hasilnya adalah sebagai berikut :
Jika kita memasukkan teks di form, otomatis teks tersebut akan dituliskan di bawahnya. Kenapa bisa begitu? Di bawah ini saya jelaskan keterangan programnya.
Keterangan listing program :
Dokumen latsatu.html adalah file HTML standard
Untuk memanggil javascript di file eksternal.
Kita definisikan id=”hasilProses” untuk menampilkan hasil dari fungsi proses().
Dokumen latsatu.js
Membuat object xmlHttp untuk melakukan transaksi data, karena antara IE dan browser yang lain beda, maka kita definisikan variabel xmlHttp adalah sebuah fungsi yang mengecek apakah browser yang dipakai IE atau bukan.
Untuk IE, xmlHttp di definisikan oleh ActiveXObject(”Microsoft.XMLHTTP”) sedangkan untuk browser yang lain, xmlHttp di isi fungsi XMLHttpRequest().
var xmlHttp = bikinXmlHttp();
function bikinXmlHttp() {
var xmlHttp;
if (window.ActiveXObject) {
try { //jika IE
xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
} catch (e) {
xmlHttp = false;
}
} else {
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
xmlHttp = false;
}
}
if (!xmlHttp) {
alert(”Gagal dalam membuat xmlHttpRequest Object”);
} else {
return xmlHttp;
}
}
Setelah kita definisikan xmlHttp, kita bisa pakai object tersebut didalam fungsi yang lain. Fungsi proses() berisi xmlHttp.readyState, readyState adalah property dari xmlHttp, bisa bernilai 0-4, bernilai 4 berarti koneksi request sukses, yang berarti baris selanjutnya yang akan dieksekusi. Kita akan bahas detail tentang XMLHttpRequest di Bab selanjutnya.
Kemudian pada baris 3, pengambilan nilai dari dokumen dengan id “teksInput” yang tidak lain adalah input teks pada latsatu.html, kita namai nilai dari form itu sebagai variabel “teks”.
Properti onreadystatechange adalah untuk meminta respon server, yang akan di definisikan pada fungsi di bawahnya. Sedangkan setTimeout adalah fungsi javascript untuk mengulang dalam waktu 1 detik jika server sibuk.
function proses() {
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
teks = encodeURIComponent(document.getElementById(”teksInput”).value);
xmlHttp.open(”GET”, “latsatu.php?teks=”+teks, true);
xmlHttp.onreadystatechange = responServer;
xmlHttp.send(null);
} else {
setTimeout(’proses()’,1000); //jika sibuk ulangi dalam 1 detik
}
}
Fungsi respon server di minta oleh fungsi proses(), readyState = 4 jika proses yang dilakukan object telah selesai dan properti status = 200 adalah respon akan mengembalikan nilai OK karena dokumen ditemukan pada waktu request.
responseXML merupakan property untuk mengembalikan respon dalam format XML
documentElement digunakan untuk mengambil root element pada dokumen XML
firstChild.data untuk mengambil nilai pada element pada dokumen XML
pada baris 7 id “hasilProses” pada dokumen HTML akan diberi nilai hasilTeks yang merupakan nilai dari dokumen XML.
function responServer() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement;
hasilTeks = xmlDocumentElement.firstChild.data;
document.getElementById(”hasilProses”).innerHTML = hasilTeks;
setTimeout(’proses()’,1000);
} else {
alert(”Ada problem, method statusText adalah “+xmlHttp.statusText);
}
}
}
Kode di atas hanyalah salah satu contoh sederhana penggunaan konsep ajax, jika anda masih bingung adalah wajar karena penjelasan masing2 ada di bab selanjutnya.
0 komentar:
Posting Komentar