APA ITU AJAX?
AJAX bukanlah bahasa pemrograman baru, tapi sebuah cara baru untuk menggunakan standar yang sudah ada.AJAX adalah singkatan dari "Asynchronous JavaScript and XML". Kalau diterjemahin sesuai bahasanya itu rumit, sulit jelasinnya. Pokoknya, AJAX itu adalah teknik untuk membuat halaman web yang cepat dan dinamis. Kenapa begitu? Itu karena AJAX digunakan untuk memperbarui bagian dari halaman web, tanpa perlu reload. Sehingga AJAX memungkinkan halaman web diperbarui secara tidak singkron(asynchronous) dengan bertukar data dalam jumlah kecil dengan server di belakang layar. Kalau halaman web klasik, (yang tidak menggunakan AJAX) diharuskan me-reload seluruh halaman jika konten ingin dirubah.
Contoh aplikasi yang menggunakan AJAX adalah Google Maps, Google Search, Google Mail dan lain-lain.
BAGAIMANA AJAX BEKERJA?
Singkatnya, ketika terjadi sebuah event tertentu pada halaman web, (contohnya adalah ketika mengetikkan kata kunci di Google Search) sebuah fungsi akan membuat sebuah XMLHttpRequest dan mengirimkannya pada server. Kemudian, server akan memproses permintaan dari XMLHttpRequest. Setelah itu, server akan memberikan balasan (berupa data) dan mengirimkannya kepada browser. Selanjutnya, balasan tersebut akan diproses oleh browser menggunakan javascript dan... Tada! Halaman sudah ter-update (muncul berbagai macam kalimat yang berhubungan dengan kata kunci yang sudah kita ketikkan). Gak kepanjangan, kan? Lebih jelasnya, liat gambar dibawah.
Kok bahasa inggris? credit asli dari www.w3schools.com.
STANDAR AJAX
Wuih... jangan langsung mikir sulit lho, ya! Pada dasarnya, AJAX itu merupakan kombinasi dari beberapa hal yang gak rumit-rumit amat kok, yaitu :- Objek XMLHttpRequest (untuk pertukaran data asynchronous dengan server)
- JavaScript / DOM (untuk menampilkan / berinteraksi dengan informasi)
- CSS (untuk desain, mau make atau gak terserah)
- XML/JSON (digunakan sebagai format untuk mentransfer data, bisa juga pakai teks biasa, *.txt)
Pertama-tama, kita buat sebuah teks dengan nama "teks.txt"(tanpa tanda petik). Jangan lupa buat diisi.
Contohnya, diisi begini :
"AJAX is about updating parts of a web page, without reloading the whole page.
AJAX adalah tentang memperbarui sebagian dari halaman web, tanpa me-reload seluruh halaman."
Kemudian, waktunya AJAX! Buat sebuah file dengan nama "ajax.html". Terus...? Tulis!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="teks"><h2>Ajax akan mengubah teks ini...</h2></div>
<button type="button" onclick="loadXML()">Ubah Konten</button>
</body>
</html>
<head>
<script>
function loadXML(){
.... Di sinilah script AJAX akan terlahir...
}
</script>
</head>
Semua browser modern (IE7+, Firefox, Chrome, Safari, and Opera) sudah mendukung objek XMLHttpRequest. Sedangkan untuk IE5 dan IE6 menggunakan ActiveXObject.
Sintak untuk membuat sebuah objek XMLHttpRequest:
variable =new XMLHttpRequest();variable =new ActiveXObject("Microsoft.XMLHTTP");
var xmlhttp;
if(window.XMLHttpRequest){// kode untuk IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// kode untuk IE6 & IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}MENGIRIM PERMINTAAN UNTUK SERVER
Setelah objek XMLHttpRequest sudah dibuat, maka tinggal dikirim. Untuk mengirim permintaan ke server, kita menggunakan open() dan send() yang merupakan method dari XMLHttpRequest.
xmlhttp.open("GET","teks.txt",true);
xmlhttp.send();
open(method,url,async) = spesifikasi pengiriman permintaan, url, dan apakah permintaan akan ditangani secara singkron atau tidak.
- method : tipe pengiriman permintaan : GET atau POST
- url : lokasi file yang akan memproses permintaan di server.
- async : true (asyncronous) atau false(syncronous)
- string : hanya digunakan jika menggunakan method POST
------
kalau mau download contohnya, klik di sini
kalian akan lebih mudah memahaminya kalau udah obrak-abrik source code-nya.
sumber : www.w3schools.com
Tidak ada komentar:
Posting Komentar