Ajax ?
Ajax adalah kepanjangan dari Asynchonous JavaScript dan XML.
Teknologi Ajax terdiri dari pemograman HTML, JavaScript, DHTML (Dinamic HTML) dan DOM (Document Objek Model). yang dimana digabungkan dengan bahasa pemograman web server seperti PHP dan ASP (Acitive Server Pages) dan JSP (Java server Page). Sehingga menjadi suatu aplikasi berbasis web yang mudah dan interaktif.
Dengan teknologi Ajax halaman dapat langsung berkomunikasi ke server side dengan menggunakan objek XMLHttpRequest. yang dimana halaman web tidak melakukan proses loading halaman web secara keseluruhan atau refresh page.
Proses teknologi Ajax berawal dari client. kemudian client request PHP ke server side . Kemnudian server memproses permintaan dari halama php dan memberikan respon halam berupa HTML atau XML. setelah mendapat respon dari server akan dikembalikan ke client dalam bentuk HTML. dan akan ditampilkan di sebuah halaman web client yang akan menghasilkan sebuah halaman tanpa harus merefresh halaman web.
XMLHttpRequest
XMLHttpRequest sebuah objek yang beroperasi di belakang layar. Metode ini berwujud suatu obyek yang berbeda dalam browser sehingga dalam penggunaanya harus disesuaikan dengan jenis browsernya.
Objek XMLHttpRequest disupport hampir semua browser (Internet Explorer, Firefox, Chrome, Opera, Safari, dll).
Pada contoh berikut kita akan membuat sustu program yang mengambil data dari database:
Contoh Ajax Sederhana :
Buat database dengan tabel dibawah ini untuk mengambil nilai yang akan ditampilkan di browser
1. buat file index.php sepert dibawah ini
2. buat file data.php untuk sebagai proses dan koneksi ke database
//menghubung ke host
//mengambil nlai dari database
Ajax adalah kepanjangan dari Asynchonous JavaScript dan XML.
Teknologi Ajax terdiri dari pemograman HTML, JavaScript, DHTML (Dinamic HTML) dan DOM (Document Objek Model). yang dimana digabungkan dengan bahasa pemograman web server seperti PHP dan ASP (Acitive Server Pages) dan JSP (Java server Page). Sehingga menjadi suatu aplikasi berbasis web yang mudah dan interaktif.
Dengan teknologi Ajax halaman dapat langsung berkomunikasi ke server side dengan menggunakan objek XMLHttpRequest. yang dimana halaman web tidak melakukan proses loading halaman web secara keseluruhan atau refresh page.
Proses teknologi Ajax berawal dari client. kemudian client request PHP ke server side . Kemnudian server memproses permintaan dari halama php dan memberikan respon halam berupa HTML atau XML. setelah mendapat respon dari server akan dikembalikan ke client dalam bentuk HTML. dan akan ditampilkan di sebuah halaman web client yang akan menghasilkan sebuah halaman tanpa harus merefresh halaman web.XMLHttpRequest
XMLHttpRequest sebuah objek yang beroperasi di belakang layar. Metode ini berwujud suatu obyek yang berbeda dalam browser sehingga dalam penggunaanya harus disesuaikan dengan jenis browsernya.
Objek XMLHttpRequest disupport hampir semua browser (Internet Explorer, Firefox, Chrome, Opera, Safari, dll).
Pada contoh berikut kita akan membuat sustu program yang mengambil data dari database:
Contoh Ajax Sederhana :
Buat database dengan tabel dibawah ini untuk mengambil nilai yang akan ditampilkan di browser
id
|
nama
|
alamat
|
1
|
Budi
|
Jl.Melati
|
2
|
Angga
|
Jl.Kawi
|
1. buat file index.php sepert dibawah ini
<html>
<head>
<title>Prak.Web 2</title>
<script>
var xml=xmlAjax();
function xmlAjax(){
if(window.XMLHttpRequest){
//untuk browser firefox,opera,safari
//untuk browser firefox,opera,safari
return new XMLHttpRequest();
}
if(window.ActiveXObject){
// untuk browser IE.
// untuk browser IE.
return new ActiveObject("Microsoft.XMLHTTP");
}
return null;
}
//proses untuk memangil file data menggunakan Get
//proses untuk memangil file data menggunakan Get
function proses(){
var nama=document.getElementById("dicari").value;
xml.open("GET","dataku.php?cari="+nama,true);
xml.send();
xml.onreadystatechange=function()
{
if(xml.readyState==4 &&
xml.status==200)
{
document.getElementById("id").innerHTML=xml.responseText;
}
}
}
</script>
</head>
<body>
Masukan nama : <input type="text"
id="dicari">
<input type="button" value="Cari"
onClick="proses()">
<br>
<div
id="id"></div>
</body>
</html>2. buat file data.php untuk sebagai proses dan koneksi ke database
<?php
$ambil="";
if(isset($_GET['cari']))
{
$ambil=$_GET['cari'];
}
$host="localhost";
$user="root";
$pass="";
$db="web"; // isikan nama database sesuai database yang dibuat
//menghubung ke host
mysql_connect($host,$user,$pass);
//memlih database yang digunakan
//memlih database yang digunakan
mysql_select_db($db);
//mengambil nlai dari database
$query=mysql_query("select * from
prak where nama like '".$ambil."%'");
echo "<table border=1>
<tr>
<td>No</td>
<td>Id</td>
<td>Nama</td>
<td>Alamat</td>
</tr>";
$no=1;
while($data=mysql_fetch_array($query))
{
echo
"<tr>
<td>".$no."</td>
<td>".$data['id']."</td>
<td>".$data['nama']."</td>
<td>".$data['alamat']."</td>
</tr>";
$no++;
}
echo "</table>";
?>
Tidak ada komentar:
Posting Komentar