AHAH
AHAH (Asynchronous HTML over HTTP) adalah format data dari respon ajax. Format datanya
langsung berupa HTML, jadi kita langsung bisa menampilkan respon tersebut.
ElementHTML.innerHTML = objekAjax.responseText;
Pada contoh berikut kita akan membuat tab menggunakan Ajax, di mana url yang direquest bukan
file PHP seperti biasanya, tetapi langsung berupa file HTML, yang berisi kode-kode HTML yang
merupakan konten suatu halaman.
Pertama-tama untuk membuat tab seperti di atas kita buat dengan HTML
<li class="tabs" id="tab1">Tab 1</li>
<li class="tabs" id="tab2">Tab 2</li>
<li class="tabs" id="tab3">Tab 3</li>
<li class="tabs" id="tab4">Tab 4</li>
<div id="content" style="overflow:auto">
</div>
Kemudian untuk mengatur posisi masing-masing tab, kita gunakan CSS
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.tabs {
list-style-type: none;
width:50px;
margin-right:5px;
padding:4px;
text-align:center;
float:left;
cursor:pointer;
border:1px solid #ccc;
border-bottom:0;
background: white url(shade.gif) top left repeat-x;
}
#content {
width:500px;
height: 250;
clear:both;
border:1px solid #ccc;
padding : 3px
}
Sekarang mari kita lihat kode javascript dan kode keselurhan halaman tab ajax tersebut.
AHAH (Asynchronous HTML over HTTP) adalah format data dari respon ajax. Format datanya
langsung berupa HTML, jadi kita langsung bisa menampilkan respon tersebut.
ElementHTML.innerHTML = objekAjax.responseText;
Pada contoh berikut kita akan membuat tab menggunakan Ajax, di mana url yang direquest bukan
file PHP seperti biasanya, tetapi langsung berupa file HTML, yang berisi kode-kode HTML yang
merupakan konten suatu halaman.
Pertama-tama untuk membuat tab seperti di atas kita buat dengan HTML
<li class="tabs" id="tab1">Tab 1</li>
<li class="tabs" id="tab2">Tab 2</li>
<li class="tabs" id="tab3">Tab 3</li>
<li class="tabs" id="tab4">Tab 4</li>
<div id="content" style="overflow:auto">
</div>
Kemudian untuk mengatur posisi masing-masing tab, kita gunakan CSS
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.tabs {
list-style-type: none;
width:50px;
margin-right:5px;
padding:4px;
text-align:center;
float:left;
cursor:pointer;
border:1px solid #ccc;
border-bottom:0;
background: white url(shade.gif) top left repeat-x;
}
#content {
width:500px;
height: 250;
clear:both;
border:1px solid #ccc;
padding : 3px
}
Sekarang mari kita lihat kode javascript dan kode keselurhan halaman tab ajax tersebut.
Kode 8. ajaxtab.html
<html>
<head>
<title>Ajax Tab</title>
<script type="text/javascript">
var ajaxku = buatAjax();
function init (){
var tabs = document.getElementsByClassName('tabs');
for (var i = 0; i < tabs.length; i++) {
tabs[i].onclick = function () {
ambilTabData(this.id);
}
}
}
function ambilTabData(id) {
var url;
switch(id){
case 'tab1' : url = "halaman1.html";break;
case 'tab2' : url = "halaman2.html";break;
case 'tab3' : url = "halaman3.html";break;
case 'tab4' : url = "halaman4.html";break;
}
ajaxku.open("GET",url,true);
ajaxku.onreadystatechange = tampilkanHalaman;
ajaxku.send(null);
}
function buatAjax(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function tampilkanHalaman(){
if(ajaxku.readyState == 4){
var halaman = ajaxku.responseText;
document.getElementById("content").innerHTML = halaman;
}else{
document.getElementById("content").innerHTML = "Loading....";
}
}
</script>
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.tabs {
list-style-type: none;
width:50px;
margin-right:5px;
padding:4px;
text-align:center;
float:left;
cursor:pointer;
border:1px solid #ccc;
border-bottom:0;
background: white url(shade.gif) top left repeat-x;
}
#content {
width:500px;
height: 250;
clear:both;
border:1px solid #ccc;
padding : 3px
}
</style>
</head>
<body onload=init()>
<li class="tabs" id="tab1">Tab 1</li>
<li class="tabs" id="tab2">Tab 2</li>
<li class="tabs" id="tab3">Tab 3</li>
<li class="tabs" id="tab4">Tab 4</li>
<div id="content" style="overflow:auto">
</div>
</body>
</html>
Dari kode di atas, awal-awal, ketika seluruh body telah di load, akan menjalankan fungsi
init(). Fungsi ini berguna untuk menentukan hal apa yang akan dilakukan jika elemen <li>
dengan class=”tabs” di click oleh user, yaitu menjalankan fungsi ambilTabData(id).
Fungsi ambilTabData(id) berguna untuk menentukan halaman apa yang akan di-load untuk
masing-masing tab. Kemudian halaman yang telah ditentukan diambil dari server dengan metode
open dan send.
Isi dari halaman HTML yang diambil dari server kita tampilkan ke dalam elemen <div>
var halaman = ajaxku.responseText;
document.getElementById("content").innerHTML = halaman;
Berikut adalah contoh isi dari halaman HTML yang diambil dari server
Kode 9. halaman1.html
<font color=red>
Ini adalah isi dari halaman "halaman1.html"<br />
Ini adalah isi dari halaman "halaman1.html"<br />
Ini adalah isi dari halaman "halaman1.html"<br />
</font>
Untuk isi dari halaman2.html dan lainnya hamper sama aja, content yang berupa dari koda-kode
HTML.
<html>
<head>
<title>Ajax Tab</title>
<script type="text/javascript">
var ajaxku = buatAjax();
function init (){
var tabs = document.getElementsByClassName('tabs');
for (var i = 0; i < tabs.length; i++) {
tabs[i].onclick = function () {
ambilTabData(this.id);
}
}
}
function ambilTabData(id) {
var url;
switch(id){
case 'tab1' : url = "halaman1.html";break;
case 'tab2' : url = "halaman2.html";break;
case 'tab3' : url = "halaman3.html";break;
case 'tab4' : url = "halaman4.html";break;
}
ajaxku.open("GET",url,true);
ajaxku.onreadystatechange = tampilkanHalaman;
ajaxku.send(null);
}
function buatAjax(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function tampilkanHalaman(){
if(ajaxku.readyState == 4){
var halaman = ajaxku.responseText;
document.getElementById("content").innerHTML = halaman;
}else{
document.getElementById("content").innerHTML = "Loading....";
}
}
</script>
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.tabs {
list-style-type: none;
width:50px;
margin-right:5px;
padding:4px;
text-align:center;
float:left;
cursor:pointer;
border:1px solid #ccc;
border-bottom:0;
background: white url(shade.gif) top left repeat-x;
}
#content {
width:500px;
height: 250;
clear:both;
border:1px solid #ccc;
padding : 3px
}
</style>
</head>
<body onload=init()>
<li class="tabs" id="tab1">Tab 1</li>
<li class="tabs" id="tab2">Tab 2</li>
<li class="tabs" id="tab3">Tab 3</li>
<li class="tabs" id="tab4">Tab 4</li>
<div id="content" style="overflow:auto">
</div>
</body>
</html>
Dari kode di atas, awal-awal, ketika seluruh body telah di load, akan menjalankan fungsi
init(). Fungsi ini berguna untuk menentukan hal apa yang akan dilakukan jika elemen <li>
dengan class=”tabs” di click oleh user, yaitu menjalankan fungsi ambilTabData(id).
Fungsi ambilTabData(id) berguna untuk menentukan halaman apa yang akan di-load untuk
masing-masing tab. Kemudian halaman yang telah ditentukan diambil dari server dengan metode
open dan send.
Isi dari halaman HTML yang diambil dari server kita tampilkan ke dalam elemen <div>
var halaman = ajaxku.responseText;
document.getElementById("content").innerHTML = halaman;
Berikut adalah contoh isi dari halaman HTML yang diambil dari server
Kode 9. halaman1.html
<font color=red>
Ini adalah isi dari halaman "halaman1.html"<br />
Ini adalah isi dari halaman "halaman1.html"<br />
Ini adalah isi dari halaman "halaman1.html"<br />
</font>
Untuk isi dari halaman2.html dan lainnya hamper sama aja, content yang berupa dari koda-kode
HTML.