Irmante Astalavista

Simsalabim!!!
Blog ini bercerita tentang dunia IT, ilmu kebumian, dan lain-lain.

Monday, November 10, 2008

AJAX Tableless Div Pengganti Frame

AJAX udah diimplementasi pada banyak web, seperti: Yahoo, Gmail, adsense, dst.
Dengan menggunakan AJAX, ketika kita klik sesuatu link, image, atau apapun, halaman website tidak di-refresh seluruhnya melainkan hanya sebagian kecil panel saja. Misalnya hanya bagian iklan, hanya bagian panel kategori tema hiburan, bisnis, dst.
Dengan tidak ter-refreshnya seluruh halaman web itu membuat situs terasa lebih kenceng dan menarik. Termasuk juga mengurangi beban kanal jaringan.
Framing pada halaman web juga sudah mulai ditinggalkan, digantikan oleh borderless table atau tableless CSS. Nah pengisian isi materi dari website ini bisa dilakukan dengan memanggil halaman web lain menggunakan teknologi AJAX juga. Caranya:

Buat Javascript AJAX berikut dengan nama file pageframe.js:

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 ||
window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

Selanjutkan... eh selanjutnya...
Buat file index.html untuk memanggil halaman utamanya.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> AJAX HTML TO DIV </TITLE>
<SCRIPT LANGUAGE="JavaScript" src="pageframe.js"></SCRIPT>
</HEAD>
<BODY>
<div id="leftcolumn">
<li>
<a href="javascript:ajaxpage('anotherpage.html', 'rcol');">Test html to div</a>
</li>
</div>
<div id="rcol"></div>
</BODY>
</HTML>

Perhatian pada bagian:
  • <SCRIPT LANGUAGE="JavaScript" src="pageframe.js"></SCRIPT> digunakan untuk memanggil javascript pageframe.js.

  • <a href="javascript:ajaxpage('anotherpage.html', 'rcol');">Test html to div</a>, disitu keliatan tho kalo halaman web anotherpage.html, diisikan ke wadah bernama rcol.

  • <div id="rcol"></div> merupakan tempat penampung halaman web anotherpage.html yang diolah pageframe.js.


  • Buat file HTML anotherpage.html yang berisi halaman web yang akan dipanggil didalam halaman utama index.html:

    <html>
    <head>
    </head>
    <body>
    <!--Ini kode PHP lho-->
    <?php
    phpinfo();
    ?>

    <b>This content came from other page!</b>
    </body>
    </html>


    Perhatikan bagian daleman kodenya anotherpage.html, yaitu adanya kode PHP yang dipanggil ya tho...

    Selamat mencoba yah...

    Labels:


    1 Comments:

    Anonymous Karyo said...

    wah keren nih ...
    ini dia yg gw cari2 boss..
    target link ke dalem div...
    tapi kok kalo kita mao panggil external file yang ada stylenya / css kok format stylenya hilang yah ....

    ada solusi gak bos ...

    tksss

    1:00 AM  

    Post a Comment

    Links to this post:

    Create a Link

    << Home