Wednesday, June 15, 2011

AJAX IFRAME

AJAX Iframe
Tanpa menggunakan objek XMLHTTPRequest yang dimiliki JavaScript, AJAX masih dapat diaplikasikan dengan menggunakan elemen Iframe. Ide awal teknik ini adalah membuat sebuah frameset diset hidden. Untuk membuat hidden frame, cukup menset lebar (width) atau tinggi (height) menjadi 0 pixel sehingga tidak terlihat di tampilan.
Teknik ini secara spesifik memiliki empat pola, dan apabila digambarkan seperti tampilan gambar 1.



Gambar 1. Arsitektur Ajax Iframe


Frame tersembunyi inilah yang melakukan request ke dan menerima respons dari server sehingga frame yang tampil tidak tampak melakukan post-back ke server. JavaScript digunakan untuk mengambil data dan mengisi data yang ada di frame tersembunyi ini.
AJAX Iframe memiliki beberapa komponen utama pembangun yaitu :
  • Iframe
  • JavaScript
Iframe
Iframe adalah elemen HTML yang berupa frame yang bisa diletakan di antara body. Berbeda dengan elemen frame yang hanya bisa di tempatkan di luar body. Dengan perintah iframe, user dapat menampilkan isi suatu blog atau situs milik orang lain ke situs yang dimiliki oleh user.
Perintah dasar yang ada pada iframe adalah sebagai berikut :

<iframe>isi dari iframe</iframe>

Beberapa atribut yang ada dalam iframe adalah :
  • ALIGN="left/right" : untuk mengatur posisi Iframe
  • WIDTH="lebar" : Mengatur lebar Iframe dalam pixel atau persen
  • HEIGHT="tinggi" : Untuk mengatur tinggi dari Iframe dalam pixel atau persen
  • FRAMEBORDER="garis pembatas" : Untuk memberi garis pembatas
  • SCROLLING="auto/yes/no" : Untuk memberi atau tidak memberi scrolling pada iframe
  • SRC="url yg ingin di tampilkan" : Alamat sumber yang ingin di tampilkan pada iframe
Atribut Iframe lebih fleksibel, bisa digunakan dalam berbagai macam tujuan termasuk untuk menerapkan AJAX. Untuk mengimplementasikan AJAX maka atribut yang sangat dibutuhkan adalah SRC karena dapat mengambil isi atau halaman dari suatu website. Sedangkan untuk atrubut yang lain kurang begitu digunakan karena hanya digunakan sebagai pengatur tampilan sedangkan iframe yang diinginkan tidak terlihat (hidden).

Cara menggunakan iframe untuk me-request data server adalah dengan menggunakan link yaitu dengan memanfaatkan atribut target yang mengarah kepada iframe dengan mengeset target dengan nama iframe, maka data dari server akan dimasukan ke dalam iframe dan bukan di halaman utama. Sehingga halaman utama tidak berubah hanya iframe saja yang berubah.

Contoh penggunaan :
File link.php :
<a href="/menu.php?pilih=1" target="ajaxiframe">Pilihan 1</a><br />
<a href="/menu.php?pilih=2" target="ajaxiframe">Pilihan 2</a><br />
<iframe name="ajaxiframe" style="display:none"></iframe>
<div id="isipilihan">Isi pilihan akan ditampilkan di sini</div>

Keterangan :
  • Buat link dengan atribut target diset dengan nama iframe yang digunakan.
  • Kemudian buat tag div yang nanti digunakan sebagai penampung dari data hasil dari Iframe
File menu.php :
<div id="hasil">
<?
switch($pilihan){
default : echo "Pilihan tidak ada ..."; break;
case "1": echo "Anda memilih satu"; break;
case "2": echo "Anda memilih dua"; break;
}
?>
</div>
Keterangan :
  • Membuat tag div yang berisi data yang akan di kirim (mengambil data dari server) Untuk pengiriman data menggunakan form dengan menggunakan cara yang sama dengan link yaitu mengeset target dengan nama iframe.
Contoh Penggunaan :
File form.php :
<form action="isiform.php" target="ajaxform" method="post">
<label>Masukkan Nama Anda :
<input type="text" name="txtIsi" />
</label>
<label>
<input type="submit" name="Submit" value="Kirim" />
</label>
</form>
<div id="isipilihan"></div>
<iframe name="ajaxform" style="display:none"></iframe>
Keterangan :
  • Buat form kemudian set atribut target dengan nama Iframe yang digunakan.
  • Kemudian buat tag div yang nanti digunakan sebagai penampung dari data hasil dari Iframe
File isiform.php :
<div id="hasil">
Selamat datang <?=$isi; ?>, selamat menikmati jamuan kami.
</div>
Keterangan :
  • Membuat tag div yang berisi data yang akan di kirim (mengambil data dari server)
JavaScript
Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa ini dinamakan "LiveScript" yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2. Pada masa itu bahasa ini banyak di kritik karena kurang aman, pengembangannya yang terkesan buru buru dan tidak ada pesan kesalahan yang di tampilkan setiap kali user membuat kesalahan pada saat menyusun suatu program. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman "Java" ) pada masa itu, maka Netscape memberikan nama "JavaScript" kepada bahasa tersebut pada tanggal 4 desember 1995. Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser Internet Explorer 3.

JavaScript merupakan client side programming dimana mengizinkan eksekusi perintah dari sisi user (browser) dan tidak memerlukan server terlebih dahulu. Kode JavaScript ini dapat di sisipkan dalam halaman web menggunakan tag SCRIPT. JavaScript merupakan bagian terpenting dari AJAX. Sehingga apabila JavaScript pada browser didisable maka AJAX tidak akan mungkin bisa dijalankan. Adapun JavaScript di dalam AJAX Iframe digunakan sebagai pengatur atribut SRC pada Iframe dan juga memindahkan data pada Iframe ke halaman utama dari website yang dibangun tanpa harus merefres kembali halaman utama.

Contoh penggunaan :
<script language="javascript">
top.document.getElementById('isipilihan').innerHTML=document.getEleme
ntById('hasil').innerHTML
</script>
Keterangan :
  • JavaScript harus ditempatkan dalam tag script
  • Kode di atas digunakan untuk mengcopi isi yang berada dalam Iframe untuk dipindahkan ke halaman utama web tanpa harus merefresh halaman.

SUMBER   = http://digilib.ittelkom.ac.id/index.php?view=article&catid=6%3Ainternet&id=720%3Aajax-iframe&tmpl=component&print=1&page=&option=com_content&Itemid=14

No comments:

Post a Comment