Menggunakan Elemen Iframe Sebagai AJAX Engine
Tanpa menggunakan object XMLHttpRequest miliknya javascript-pun aplikasi ajax masih memungkinkan untuk dibuat. Dengan apa ? jawabannya dengan menggunakan iframe. Iframe sendiri adalah elemen HTML yang berupa frame dan bisa diletakkan di antara body. Berbeda dengan elemen frame yang hanya bisa ditempatkan diluar body. Elemen iframe malahan menjadi lebih fleksibel, bisa digunakan dalam berbbagai macam tujuan, termasuk iframe sebagai mesin ajax yang akan dibahas.
Teknik ini disebut dengan hidden iframe. Sebenarnya saya sudah pernah membahas tentang hidden iframe sebagai ajax. Saya menuliskan artikel tersebut pada blog saya yang dulu, dan sialnya blog tersebut sudah mati dikarenkan free hosting yang digunakan sentimen pada saya :(. Iframe yang dihidden ini (dengan menggunakan css) digunakan untuk meload halaman web, semua proses request user melalui iframe ini. Setelah data dari server selesai di load oleh iframe, maka isi dari iframe tersebut akan dipindahkan ke halaman utama dengan menggunakan javascript. Caranya bagaimana agar setiap request dilakukan melalui iframe ? sangat mudah (meskipun saya ragu apakah ini memenuhi standar XHTML), misalkan untuk request melalui link
<a href="url" target="nama-iframe">Request melalui link</a>
atribut target akan mengarah kepada iframe, pada kasus diatas, nama dari hidden iframe haruslah “nama-iframe”. Dengan mengeset atribut target mengarah kepada iframe, maka data-data dari server akan dimasukkan ke dalam iframe, tidak di halaman utama. Sehingga halaman utama tidak berubah, hanya iframenya saja yang berubah. Berikut iframe yang digunakan.
<iframe name="nama-iframe" style="display:none"></iframe>
Sedang jika akan mengirimkan data (melalui form), bisa menggunakan kode berikut
<form method="post" target="nama-iframe" action="prc.php"></form>
Atribut target tetap mengarah ke iframe, setelah data berhasil diload oleh iframe, maka akan dipindah ke halaman utama.
Berikut contoh aplikasi ajax dengan menggunakan iframe. Aplikasi ini terdiri dari 2 file, index.php dan prc.php. Untuk sementara ini, hanya request melalui link yang akan dibahas. Request/pengiriman data menggunakan form akan dibahas kemudian.
File index.php
<html> <body> <div id="menu"> <a href="prc.php?pg=menu1" target="myiframe">menu1</a><br /> <a href="prc.php?pg=menu2" target="myiframe">menu2</a><br /> <a href="prc.php?pg=menu3" target="myiframe">menu3</a><br /> <a href="prc.php?pg=menu4" target="myiframe">menu4</a> </div> <div id="container"></div> <iframe name="myiframe" style="display:none;"></iframe> </body> </html>
<div id="temporer"><?php if ($_GET["pg"]=="menu1"){ echo "Menu 1"; } elseif ($_GET["pg"]=="menu2"){ echo "menu 2"; } elseif ($_GET["pg"]=="menu3"){ echo "menu 3"; } elseif ($_GET["pg"]=="menu4"){ echo "menu 4"; } ?>
</div><script language="javascript" type="text/javascript"> //--- javascript dibawah ini akan memindah isi dari iframe ke dokumen utama. top.document.getElementById('container').innerHTML= document.getElementById('temporer').innerHTML; </script>
Pada dokuemen utama terdapat element
<div id="container"></div>
elemen ini digunakan untuk menampung data-data hasil dari proses yang dilakukan iframe, anda bisa menempatkan elemen tersebut dimanapun sesuai kebutuhan anda, yang perlu diperhatikan adalah atribut id dari elemen tersebut harus sama dengan
top.document.getElementById(’id yang harus sama’).innerHTML
Related Post
Filled in category Ajax, Belajar web, Teknologi, Tutorial
[…] Menggunakan Elemen Iframe Sebagai AJAX Engine […]
[…] Menggunakan Elemen Iframe Sebagai AJAX Engine (1) […]
[…] Menggunakan Elemen Iframe Sebagai AJAX Engine (1) […]
setelah saya coba dan di implementasikan
ternyata iframe cukup powerfull juga
walaupun mungkin AJAX yg asli lebih hebat.
dan sekarang sedang saya pake di FAQ system buatan saya.
thanks atas tutornya
saya dah coba dan berhasil sukses…..tapi klo javascript nya didisable dia gak bisa jalan…hehehexx, gmana caranya supaya gak tergantung dengan javascript..
kayaknya ga bisa deh.. itu kan pake javascript, masak mesin javascriptnya dimatikan…