What is AJAX?
AJAX =
Asynchronous JavaScript and XML.
AJAX is a
technique for creating fast and dynamic web pages.
AJAX allows
web pages to be updated asynchronously by exchanging small amounts of data with
the server behind the scenes. This means that it is possible to update parts of
a web page, without reloading the whole page.
Classic web
pages, (which do not use AJAX) must reload the entire page if the content
should change.
Examples of
applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.
AJAX is Based on Internet Standards
AJAX is
based on internet standards, and uses a combination of:
- XMLHttpRequest object (to exchange data asynchronously with a server)
- JavaScript/DOM (to display/interact with the information)
- CSS (to style the data)
- XML (often used as the format for transferring data)
AJAX applications are
browser- and platform-independent!
Contoh script koneksi.php
<?php
$Host='localhost';
$User='root';
$Pass='';
$Database='siswa_baru';
$db = mysql_connect("$Host",
"$User", "$Pass") or die ("gagal koneksi: " .
mysql_error());
mysql_select_db("$Database", $db) or die
("data gagal: " . mysql_error());
?>
Script di atas sebagai koneksi dengan database.
Contoh script index.php
<?php
include("koneksi.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Penerimaan Siswa Baru</title>
<script
src="select.js"></script>
</head>
<body bgcolor="silver">
Pilih nama siswa :
<select name="siswa"
onChange="showNama_siswa(this.value)">
<option></option>
<?php
$query="select
* from admin";
$rs
= mysql_query($query);
while($result_data
= mysql_fetch_array($rs)){
list($id_siswa,
$nama_siswa)=$result_data;
?>
<option
value="<?php echo "$id_siswa"?>"><?php echo
"$nama_siswa"?></option>
<?php
}
?>
</select>
<br/><br/>
<div
id="txtHint"></div>
</body>
</html>
Script di atas menampilkan admin seperti gambar berikut :
Contoh scrpit get.php
<?php
$q
= $_GET["q"];
include("koneksi.php");
$sql
= "SELECT * FROM siswa WHERE id_admin = '".$q."'";
$result
= mysql_query($sql);
$sql1
= "SELECT * FROM admin WHERE id_admin = '".$q."'";
$result1
= mysql_query($sql1);
$row1
= mysql_fetch_assoc($result1);
?>
<tr>Nama
Admin: <b/><?php echo strtoupper ($row1['nama'])?>
</b></tr>
<?php
echo
"<table bgcolor='blue' border=''>
<tr>
<td><b>Id
siswa</td></b>
<td><b>Nama
siswa</td></b>
</tr>";
while($row
= mysql_fetch_array($result)){
echo
"<tr>";
echo
"<td><b>" . $row['id_siswa'] .
"</td></b>";
echo
"<td><b>" . $row['nama_siswa'] .
"</td></b>";
echo
"</tr>";
}
echo
"</table>"; ?>
Script di atas menampilkan siswa menurut pilihan admin gambar sebagai berikut :
Contoh script
select.js
var xmlHttp
function showSiswa(str){
xmlHttp=GetXmlHttpObject()
if(xmlHttp==null){
alert("Browser
anda tidak support")
return
}
var url="get.php"
url=url+"?q="+str
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged(){
if(xmlHttp.readyState==4
|| xmlHttp.readyState=="complete"){
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject(){
var
xmlHttp=null;
try{
xmlHttp=new
XMLHttpRequest();
}catch(e){
xmlHttp=new
ActiveXObject("Microsoft.XMLHTTP");
}
return
xmlHttp;
}
