Menggunakan Iframe Sebagai Mesin AJAX untuk Mengirim data
Pada beberapa hari yang lalu sudah dibahas bagaimana memanfaatkan iframe sebagai mesin AJAX. Dalam artikel tersebut hanya membahas cara me-request melalui URL atau dengan metode GET. Sekarang dalam artikel ini akan dibahas bagaimana cara mengirimkan data melalui form (dengan metode POST, tentunya) dengan menggunakan iframe, sehingga terkesan web berbasis AJAX. Tapi sebenarnya menggunakan iframe sebagai mesin AJAX bisa dikatakan sudah termasuk AJAX atau tidak ? temukan jawabannya di akhir artikel ini. Nanti anda juga bisa mendownload contoh aplikasi ini.
Pada intinya, cara me-request melalui URL atau mengirimkan data melalui form adalah sama yaitu cukup mengeset atribut target pada tag form jika akan mengirimkan data melalui form dan pada tag a href jika menggunakan URL. Kenapa yang dibahas dari kemarin URL dan form ? karena sebagian besar aktifitas penggunaan suatu website, hanya mengirim data melalui kedua cara ini. Langsung saja, mas bagaimana caranya. Ok bos, berikut kode yang digunkan. Pertama membangun form dulu.
Form.html
<html> <body> <form method="post" action="prc.php" target="my-iframe-ajax"> <input type="text" name="kata" /><br /> <input type="submit" value="Kirim" /> <div id="container"></div> </form> <iframe name="my-iframe-ajax" id="my-iframe-ajax" style="display:none"></iframe> </body> </html>
Berdasarkan form tersebut, setelah tombol kirim ditekan, maka akan dijalankan script prc.php. Berikut script tersebut.
prc.php
<div>
<?php //--- ini hanya contoh saja, saya buat yang paling sederhana, //-- sedang pengaplikasiannya bisa lebih fleksibel, //--- tergantung kreatifitas anda :) echo $_POST["kata"]; ?>
</div>
<script language="javascript"> top.document.getElementById('container').innerHTML= document.getElementById('temp').innerHTML </script>
Script tersebut akan mengirimkan kembali apa yang dituliskan pada form. Tulisan akan muncul dibawah tombol kirim. Anda bisa mengembangkan model aplikasi ini, tergantung kreatifitas anda kok. Ada kasus unik ketika saya menggunakan teknik ini untuk meload form. Artinya saya menggunakan model URL untuk meload form, dan form tersebut tidak bisa saya submit, tombolnya seperti tidak berfungsi (tapi enable loh). Ini terjadi HANYA pada Internet Explorer (yang saya pakai versi 6, tidak tahu untuk versi yang lebih tinggi), sedang pada browser lainya normal-normal saja. Tapi setelah melalukan riset ilmiah dan terstruktur form yang di load harus didahului dengan suatu tulisan tertentu, kalau langsung formnya tidak bisa. Mungkin sudah ada yang berhasil? Berikut contoh form yang bisa diload.
<h2>Ini tulisan yang harus mendahului form</h2> <form> <input type="text" value="baru disini formnya" /> </form>
Jika tag H2 dihilangkan, maka pada IE tidak bisa menggunakan form ini. Sebagai catatan ini pengalaman pribadi saja, jadi kalau salah ya saya minta maaf.
Related Post
Filed under: Ajax, Belajar web, Tutorial
PERTAMAXXX….
waduh, saya bingung mau komentar apa…. ilmu saya masih cetek T_T
NB: mas bimo, tukeran link yuk. Silakan dicek blog saya, situs saudara sudah saya tambahkan ke blogroll.
oooh gitu ya *pura-pura ngerti*
gak ngerti yang penting nongol
nice article,,,,
gw lagi pengen belajar ajax,,,tapi harus mulai dari awal dulu,,ya iframe,,,
thx for ur info,,,
keep in rollin dude,,,
eh ajax brarti termasuk pemrograman yang server side donk. katanya bisa akses server lewat pintu blakang tanpa menggan url.????
mas, ada contoh jika di terapkan untuk isi-an menu list?
gua si ud bljr tu html tp yang saya bingung ajax itu sebenarnya apa si?????????????????????