XML in html

Pada kesempatan kali ini, saya ingin sekedar sharing tentang penggunaan XML HTTP Request dari dasar. Tidak usah malu belajar dari dasar, karena sebenernya XML HTTP Request di web yang sudah kompleks pun asalnya dari dasar ini. Jadi diharapkan ketika mengerti dasarnya ini, semoga bisa dimengerti saja dulu. Pengembangan kode untuk sesuai kebutuhan anda itu terserah pada anda hahah…

Dengan XML HTTP Request kita dapat menghemat bandwidth, karena metode ini merequest konten pada URL tertentu dan ditampilkan di bagian tertentu pada halaman website tanpa harus me-load lagi seluruh halaman. Oh iya, walaupun untuk bisa mencoba XML HTTP Request hanya perlu minimal halaman HTML, tetapi dibutuhkan peran webserver juga untuk merespon request. Jadi XML HTTP Request harus berjalan di lingkungan webserver, ga bisa asal taro di lokasi tertentu, double klik dan liat hasilnya Langsung saja ke percobaan…

Inti dari XML HTTP Request adalah script ini:

<script type="text/javascript">
function main(page){
http=new XMLHttpRequest();
var myurl=page;
http.open("GET", myurl, true);
http.onreadystatechange=httpResponse;
http.send(null);
}
function httpResponse(){
if (http.readyState==1){
document.getElementById("isi").innerHTML="Sedang proses meminta URL.. <br>(Pasang gambar <em>loading</em> juga boleh..)";
}
else if (http.readyState==4){
var textout=http.responseText;
document.getElementById("isi").innerHTML=textout;
}
}
</script>

Pertama adalah tahap request. Function main() akan mengambil variable page hasil input user dan diproses di objek http. Ntar objek http yang melakukan request dengan method GET. Setelah itu ada yang namanya tahap response. Jika status readyState respon masih tahap 1, tampilkan tulisan “Sedang proses meminta URL.. <br>(Pasang gambar <em>loading</em> juga boleh..)”. Biasanya ketika masih tahap 1, di situs-situs beken internet, menampilkan gambar animasi loading yang berputar-putar (ato apa lah) sehingga user tidak bosen menunggu. Ketika readyState sudah di tahap 4, seluruh hasil response dari request, ditampung dalam variable textout untuk selanjutnya di tampilkan di sebuah elemen dengan ID “isi” (akan dibahas letak elemen dengan ID “isi” tersebut).

Oke deh, ini dia letak elemen dengan ID isi tersebut (cari sendiri! hihi):

<table border="1"><caption>XML HTTP Request</caption>
<tr>
<th>Menu</th><th>Isi</th>
</tr>
<tr>
<td>
<a href="#1" onclick="javascript:main('page1.html')">Liat isi page-1</a><br>
<a href="#2" onclick="javascript:main('page2.html')">Liat isi page-2</a><br>
<a href="#3" onclick="javascript:main('page3.html')">Liat isi page-3</a>
</td>
<td bgcolor="#00FF00"><div id="isi"></div></td>
</tr>
</table>

Yap, ntar isi dari request yang kita minta ditampilkan di dalam <div> tersebut… Dengan kata lain jadi gini dah kalo diliat pake mata telanjang
<td bgcolor=”#00FF00″><div id=”isi”>DISINI HASIL RESPONSE DARI SERVERNYA (dari tampungan variable “textout”)</div></td>
Bagi yang masih bingung, ini saya lampirkan demo halaman sederhana (sangat amat sekaliiiii) biar tau apa itu XML HTTP Request. Silakan download di sini:
Filetype: zip
Namafile: xmlhttprequest.zip
Size: 2,1 Kb
Oh iya, selain itu ini contoh konkrit web yang menggunakan XMLHTTPREQUEST adalah ini http://inan.tibandung.com/ (naris.. padahal udah banyak situs yang make hahaha)