Maen-maen dengan AJAX Yuk!!!


And XML, atau disingkat Ajax, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer,
melakukan pertukaran data dengan server di belakang layar, sehingga
halaman web tidak harus dibaca ulang secara keseluruhan setiap kali
seorang pengguna melakukan perubahan. Hal ini akan meningkatkan
interaktivitas, kecepatan, dan usability — sumber Wikipedia

Seperti definisi yang telah dijelaskan di wikipedia, AJAX merupakn gabungan client dan server scripting. AJAX bertujuan untuk meningkatkan interaktifitas, kecepatan dan usabiliti web scripting tanpa harus meload halaman secara secara keseluruhan. ajax menggunakan client side scripting semisal javascript dan server side scripting ex: php dengan memanfaatkan objek XMLHTTP Request.

berikut adalah contoh script yang akan digunakan untuk meload artikel menggunakan ajax. Dalam hal ini script yang digunakan adalah Javacsript dan PHP.

file index.php

<html>
<head>
<title>Ajax at work</title>
<link href=”style/style.css” rel=”stylesheet” type=”text/css”>
<script language = “javascript”>
var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHTTP”);
} else{
alert(“Browser tidak mendukung XMLHttpRequestObject”);
}

function getData(dataSource, divID){
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
try{
XMLHttpRequestObject.open(“GET”, dataSource);
}catch(err){
alert(err.description);
}
XMLHttpRequestObject.onreadystatechange = function(){
if (XMLHttpRequestObject.readyState == 4 &&    XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}

</script>
</head>
<body onLoad=”getData(‘/ajax/php-function.php?action=viewMainHeadline’, ‘headlineDiv’)”>
<table width=”80%” align=”center” class=”normal” border=”1″ cellpadding=”10″ cellspacing=”0″>
<tr>
<td valign=”top” width=”20%”><H1>Fetching data with Ajax</H1>
<div id=”headlineDiv”>Link</div>
</td>
<td valign=”top”  width=”80%”><div id=”contentDiv”>
<p>The fetched data will go here.</p>
</div></td>
</tr>
</table>

</body>
</html>

file php-function.php

<?php

$action = $_GET[“action”];
$id = $_GET[“id”];
if($action == “view”){
viewNewsDetail($id);
}else if($action == “viewMainHeadline”){
viewMainHeadLine();
}

function viewMainHeadLine(){
$host = “localhost”;
$dbname = “news”;
$user = “guest”;
$pass = “guest”;

$dbconnect = mysql_connect($host, $user, $pass) or die(“Gagal membuka Database: “.mysql_error());
$dbselect = mysql_select_db($dbname);
$query=”SELECT news_id, news_title FROM news WHERE news_date LIKE ‘”.date(“Y”).”-“.date(“m”).”%’ ORDER BY news_id DESC”;
$result = mysql_query($query);
while($data = mysql_fetch_array($result)){?>
&rsaquo; <a class=”content” href=”#<?=$data[‘news_id’]?>” onclick = “getData(‘/ajax/php-function.php?action=view&id=<?=$data[‘news_id’]?>’, ‘contentDiv’)”><?=strip_tags($data[‘news_title’]);?></a><br /><? //$sep?>
<?     }

mysql_close($dbconnect);
}

function viewNewsDetail($id){
$host = “localhost”;
$dbname = “news”;
$user = “guest”;
$pass = “guest”;

$dbconnect = mysql_connect($host, $user, $pass) or die(“Gagal membuka Database: “.mysql_error());
$dbselect = mysql_select_db($dbname);
$query=”SELECT * FROM $t_news WHERE news_id=’$id'”;
$result = querydb($query);
while($data = mysql_fetch_array($result)){
?>

<?=getDateFormat($data[‘news_date’])?><br>
<h1><?=$data[‘news_title’]?></h1><br><a id=”<?=$data[‘news_id’]?>”>
Oleh: <?=$data[‘news_author’]?><br>
<p align=”justify”><?=$data[‘news_content’]?></p><br>
<?
}
mysql_close($dbconnect);
}

?>

database mysql dengan nama “news”, lokasi di server local, dengan field news_id, news_title, news_content, news_date, dan news_author;

penjelasan:
script <body onLoad=”getData(‘/ajax/php-function.php?action=viewMainHeadline’, ‘headlineDiv’)”> pada index.php, akan memanggil php-function.php untuk mengirimkan url berita dan data pada function viewMainHeadLine() akan ditampilkan. kemudian url yang sudah diload ketika di klik yan g berasal dari viewMainHeadLine()akan memanggil function viewNewsDetail dengan filter $id. selajutnya oleh javascript akan di proses dan ditampilkan di tag contentDiv.

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