Bagi sahabat Belajar Pintar PHP , perlu anda ketahui bahwa setiap aplikasi web yang bekerja dengan AJAX bekerja secara asynchronously, artinya adalah mengirim dan menerima data dari user ke server tanpa perlu me-load kembali seluruh halaman browser kita, melainkan hanya melakukan penggantian pada bagian web yang hendak di ubah. AJAX (Asynchronouse JavaScript and XML) diperkenalkan oleh James Garrent dari Adaptive Path pada tahun 2005 dan mulai popular ketika digunakan oleh Google pada tahun 2005.
Pada hari istimewa ini tepat tanggal 12 bulan 12 tahun 2012, saya ingin berbagi script php yaitu skrip yang untuk mengecek username dan email yang telah terdaftar dan tersimpan dalam database dengan Object XMLHTTPRequest, yaitu pengecekan dapat dilakukan tanpa harus me-load seluruh halaman web.
Properti - properti dalam XMLHTTPRequest:
- Onreadystatechange : Mengangani event setiap kali status berubah.
- Ready state : 0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, 4 = complete.
- resrponseText : reponse yang dikembalikan dalam bentuk string
- Status : 404 = “Not Found”, 200 = ‘OK’.
- StatusText : “Not Fount” atau ”OK”
<html>
<head>
<title>code php untuk Mengecek Ketersediaan Username dan Email dengan AJAX</title>
<script type="text/javascript">
var RO = RequestObject();
function RequestObject(){
var browser = navigator.appName;
if(browser == 'Microsoft Internet Explorer')
return new ActiveXObject('Microsoft.XMLHTTP')
else
return new XMLHttpRequest();
}
function cekKetersediaan(target){
var username = document.getElementById('username').value;
var email = document.getElementById('email').value;
if(target =='username' && username !="){
RO.open('get', 'cek-username-email.php?username='+username+'&email=0', true);
}else if(target =='email' && email !="){
RO.open('get', 'cek-username-email.php?username=0&email='+email, true);
}else{
alert('Masukan '+target);
}
RO.onreadystatechange = function() {
if((RO.readyState ==4) && (RO.status == 200)){
var hasil =RO.responseText;
if( hasil == '1'){
document.getElementById('hasil-cek').style.color ='#FF0000';
document.getElementById('hasil-cek').innerHTML =target+' tidak tersedia';
}else{
document.getElementById('hasil-cek').style.color ='#000000';
document.getElementById('hasil-cek').innerHTML =target+' tersedia';
}
}
}
RO.send(null);
return false;
}
</script></head>
<body>
<body>
<div>
<p> </p>
<h1>Cek disini Username dan Email</h1>
<div>
<table border="0" cellspacing="0" cellpadding="0" id="tbl">
<tr>
<td>Username</td>
<td><input name="username" type="text" id="username" size="30" /></td>
<td><a href="#" onclick="return cekKetersediaan('username');">Cek Ketersediaan Username</a></td>
</tr>
<tr>
<td>Email</td>
<td><input name="email" type="text" id="email" size="30" /></td>
<td><a href="#" onclick="return cekKetersediaan('email');">Cek Ketersediaan Email</a></td>
</tr>
<tr>
<td> </td>
<td id="hasil-cek"></td>
<td> </td>
</tr>
</table>
<p> </p>
<p> </p>
</div>
</body>
</html>
</script>
Bagi sahabat yang berminat dapat download skrip / kodenya di download disini.
Sekian Tutorial ajax php dari saya, semoga bermanfaat.
