XMLImage via Wikipedia

Tutorial Ajax ini melanjutkan tutorial ajax sebelumnya yang membahas tentang pengenalan Ajax dan penggunaan Ajax untuk membaca file TXT. Kali ini akan dibahas penggunaan Ajax untuk berkomunikasi dengan server. Intinya Ajax akan digunakan untuk meretrieve data dari database.

Sebelumnya saya akan menjelaskan bagaimana Ajax berkomunikasi dengan server. Ajax berkomunikasi dengan server dengan mengirimkan request ke suatu URL, dimana di url tersebut terdpat file server site scripting(PHP, ASP, dll) yang akan memproses request. Jika diperlukan melakukan query ke database maka file ini yang akaan melakukannyaa. Data yang diterima dari server berbentuk XML.Untuk lebih jelaskan silahkan lihat gambar berikut ini :

Berikut ini source code untuk sisi clientnya :


<!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="www.ismartshare.com" />
<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, Opera 8.0+, Safari
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 browser.");
}
}

var request = getXmlHttpRequestObject();

function Baca() //Reading Data Function
{
if (request.readyState == 4 || request.readyState == 0)
{
request.open("POST", "index2.php", true); //Baca data.txt
request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

request.onreadystatechange = Tampil;  //Jalnkan fungsi Tampil()
var param = 'idku='+document.getElementById("idku2").value; //Parameter yang dikirimkan
request.send(param);
}
}

function Tampil() {    //Get Slide Function
if (request.readyState == 4) {
var xmlDoc = request.responseXML; //Terima respon sebagai XML

var tag_nama = xmlDoc.getElementsByTagName("nama");  //indentifisikasi node nama
var get_nama = tag_nama[0].firstChild.nodeValue;    //Mendapatkan nilai dari node nama

var tag_url = xmlDoc.getElementsByTagName("url");
var get_url = tag_url[0].firstChild.nodeValue;

var namaweb = document.getElementById('namaweb');//Identifikasi element namaweb, simpan dengan nama namaweb
var urlweb = document.getElementById('urlweb');//Identifikasi element urlweb, simpan dengan nama urlweb
namaweb.innerHTML = get_nama; //Tulis nama web
urlweb.innerHTML = get_url; //Tulis url web
request.send(null);
}
}

//-->
</script>

</head>

<body>
<input type="text" name="idku2" id="idku2" value="1" /> <!--id-->
<input type="submit" value="dispaly" onclick='Baca()' />  <!--panggil fungsi baca-->
<div id="namaweb"></div> <!--tempat untuk menulis nama web-->
<div id="urlweb"></div> <!--tempat untuk menulis urlweb-->
</body>
</html>

Berikut ini source code untuk sisi servernya :


<?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
header("Cache-Control: no-cache, must-revalidate" );
header("Pragma: no-cache" );
header("Content-Type: text/xml; charset=utf-8");

$link = mysql_connect ("localhost", "admin", "admin");
$q=mysql_select_db("ajax", $link) or die (mysql_error());

$query=mysql_query("select * from webku where web_id='$_POST[idku]'", $link)  or die (mysql_error());

echo '<?xml version="1.0" ?><web>';
while ($row=mysql_fetch_array($query))
{
echo "<webku>";
echo "<nama> $row[web_name] </nama>";
echo "<url> $row[web_url] </url>";
echo "</webku>";
}
echo '</web>';
?>

Diserver PHP melakukan query ke database kemudian hasilnya di kembalikan dalam bentuk XML. XML inilah yang nanti akan dibaca di client.

Jika Anda kurang mengerti tentang XML, anda bisa mempelajarinya di sini.

About the author

Related Post

7 Comments

  1. tc

    bos kita mau tanya ni, gimana cara menampilkan tabke/file yang kita buat di databses ke halaman web kita, contohnya saya sudah buat file absensi nama siswa di databases trus gimana cara menampilkannya ke halaman web….ditunggu ya jawabannya ok…salam sukses kawan…..

    • Mara Mei

      Pakai PHP query, coba search menmapilkan tabel mysql dengan php

  2. tc

    bos kita mau tanya ni, gimana cara menampilkan tabke/file yang kita buat di databses ke halaman web kita,..ditunggu ya jawabannya ok…salam sukses kawan…..

Leave a comment

Your email address will not be published. Required fields are marked *