Pemakaian Ajax, Menampilkan data dari Server

Contoh penggunaan kali ini kolaborasi javascript dengan new technology Ajax, dimulai dengan mendeklarasikan objek XMLHttpRequest kemudian membuat variable objekxhr.

Ada tiga fungsi yang digunakan yaitu :

Fungsi ambil data

Fungsi buat objekxhr

Fungsi untuk menampilkan data

fungsi tampil menggunakan DOM dan innerHTML

untuk lebih jelasnya lihat script berikut ini : (beri nama tranferdata.html)

<html>
<head>
<title>
Menampilkan data dari server</title>

<script language=javascript>

//Mendeklarasikan objek XMLHttpRequest

var objekxhr;

function ambildata(){

/*untuk mengambil data dari server
fungsi ini akan dipecah menjadi beberapa fungsi terpisah
*/

buatxhr();

objekxhr.open(“GET”,”data/data.txt”);
objekxhr.send(null);
objekxhr.onreadystatechange=tampilkan;

}

function buatxhr(){
//ini fungsi untuk membuat objek XMLHttpRequest

if (window.activeXObject){
// ini kode untuk membuat objek xhr jika user menggunakan browser IE5 dan IE6

objekxhr = new

activeXObject(“Microsoft.XMLHttp”);

}
else if(window.XMLHttpRequest){
//ini kode untuk membuat objek xhr untuk non IE

objekxhr = new XMLHttpRequest();

}else{

alert(“Segera ganti browser anda browser ini tidak support AJAX”);
}

}

function tampilkan (){

/*ini mengunakan DOM dan innerHTML
mengenai DOM akan dijelaskan pada subBAB berikutnya*/
document.getElementById(“kotak”).innerHTML=objekxhr.responseText;
}

</script>
</head>

<body>
<input type=”button” value=“Klik untuk menampilkan table” onclick=“ambildata();”/>
<div id=“kotak”><!==ini tempat menampilkan teks></div>
</body>

</html>

Script di atas tampilanya sbb :

klik

Kemudian Klik tombol di bawah ini

tombol

Tampilannya akan tampak sbb :

tampil

Data berhasil di tampilkan, contoh di atas adalah penggunaan teknology Ajax (Asyncrounous Java XML)

isi dari data.txt sbb :

<table border=”2″ bgcolor=”pink”>

<tbdy>
<tr>
<td>Senin</td>
<td>Selasa</td>
<td>Rabu</td>
<td>Kamis</td>
<td>Jum at</td>
</tr>
<tr>
<td>matematika tekni</td>
<td>Fisika dasar</td>
<td>kalkulus</td>
<td>Algoritma pemrograman</td>
<td>C++</td>
</tr>
<tr>
<td>Kimia dasar</td>
<td>Biokimia</td>
<td>Agama</td>
<td>OOP</td>
<td>algoritma Pemrograman 2</td>
</tr>

</tbody>
</table>

terimakasih atas kunjungannya semoga artikle di atas bisa bermanfaat bagi perkembangan dunia TI Di Indonesia

Satu Tanggapan

  1. bagaimana menampilkan data berdasarkan data imputan yang di bandingkan misal ada form nama, alamat, dan jenis kelamin, jika nama dimasukan maka data alamat dan jenis kelamin akan muncul secara real time, terima kasih atas pencerahannya.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: