Tutorial Ajax Part 2 (Working With File)

Image by missha via Flickr

Beberap waktu yang lalu saya telah menulis gambaran sederhana tentang Ajax. Seperti yang telah diketahui, dengan Ajax halaman web tidak harus reload ulang secara keseluruhan setiap kali seseorang mengakses suatu link atau tombol pada halaman web. Kali ini kita akan belaajar bagaimana membaca isi dari suatu TXt dokumen, kemudian menampilkannya di halaman web dengan Ajax.

Ok, langsung saja berikut ini source codenya :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> contoh Aplikasi Ajax </title>
<meta name="generator" content="editplus" />
<meta name="author" content="Mara Mei" />
<meta name="keywords" content="" />
<meta name="description" content="" />

<script type="text/javascript">
<!--
function getXmlHttpRequestObject() {
if (window.<a class="zem_slink" title="XMLHttpRequest" rel="wikipedia" href="http://en.wikipedia.org/wiki/XMLHttpRequest">XMLHttpRequest</a>) { //Jika Firefox, <a class="zem_slink" title="Opera (web browser)" rel="homepage" href="http://www.opera.com/">Opera</a> 8.0+, <a class="zem_slink" title="Safari (web browser)" rel="homepage" href="http://www.apple.com/safari/">Safari</a>
return new XMLHttpRequest();
} else if(window.ActiveXObject) { //Jika IE
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("'Status: Cound not create XmlHttpRequest Object. Consider upgrading your <a class="zem_slink" title="Web browser" rel="wikipedia" href="http://en.wikipedia.org/wiki/Web_browser">browser</a>.");
}
}

var request = getXmlHttpRequestObject();

function Baca() //Reading Data Function
{
if (request.readyState == 4 || request.readyState == 0)
{
request.open("GET", "data.txt", true); //Baca data.txt
request.onreadystatechange = Tampil; //Jalnkan fungsi Tampil()
request.send(null);
}
}

function Tampil() { //Get Slide Function
if (request.readyState == 4) {
var obj = document.getElementById('box');//Identifikasi element box, simpan dengan nama obj
obj.<a class="zem_slink" title="Internet Explorer" rel="homepage" href="http://www.microsoft.com/windows/products/winfamily/ie/default.mspx">innerHTML</a> = request.responseText; //Tulis isi data.txt
request.send(null);
}
}

//-->
</script>

</head>

<body>
<input type="submit" value="dispaly" onclick='Baca()' />
<div id="box"></div>
</body>
</html>

Penjelasan :

1. Ini merupakan pembuatan XMLHttpRequest object

function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) { //Jika Firefox, Opera 8.0+, Safari
return new XMLHttpRequest();
} else if(window.ActiveXObject) { //Jika IE
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object. Consider upgrading your browser.';
}
}

2. Variabel request merupakan varibel untuk menyimpan getXmlHttpRequestObject();

var request= getXmlHttpRequestObject();

Variabel ini hanya digunakan untuk menyimpan objek XMLHttpRequest, suapaya lebih mudah dalam pemanggilannya.

3. Ini merupakan fungsi untuk melakukan request terhadap file data.txt

function Baca() //Reading Data Function
{
if (request.readyState == 4 || request.readyState == 0)
{
request.open("GET", "data.txt", true); //Baca data.txt
request.onreadystatechange = Tampil; //Jalankan fungsi Tampil()
request.send(null);
}

}

4. Fungsi untuk menampilkan isi dari data.txt

function Tampil() { //Get Slide Function
if (request.readyState == 4) {
var obj = document.getElementById('box');//Identifikasi element box, simpan dengan nama obj
obj.innerHTML = request.responseText; //Tulis isi data.txt
request.send(null);
}
}

responseText digunakan untuk menangkap isi dari suatu file text.

5. Tombol Display adalah tombol yang jika diklik akan menjalankan fungsi baca.

<input onclick="Baca()" type="submit" value="dispaly" />

6. Div box merupakan tempat dimana isi dari data.txt akan ditampilkan.

 <div id="box"></div>

Download Source Code

Next : Working with PHP and Database

Leave a Comment Cancel reply