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:
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: Dunia IT
posted by Irmanator @ 3:46 PM
1 Comments:
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
Post a Comment
<< Home