Skrip untuk mengecek username dan email dengan AJAX

673

Aplikasi web yang bekerja dengan AJAX bekerja secara asynchronously, yang berarti mengirim dan menerima data dari user ke server tanpa perlu me-load kembali seluruh halaman, 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 kesempatan ini akan mencoba membuat sebuah skrip yang dapat 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. Berikut tampilan jika username atau email tidak tersedia (user bersangkutan telah terdaftar):

Lihat Demo Skrip

cek-username-email

Properti 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>Skrip 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 ersedia’;    
                }else{
                    document.getElementById(‘hasil-cek’).style.color =‘#000000;    
                    document.getElementById(‘hasil-cek’).innerHTML =target+‘ tersedia’;
                }
            }
        }
        RO.send(null);
        return false;
    }

</script>
</head>
<body>
<div>
<p> </p>
<h1>Cek 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>

Skrip selngkapnya dapat di download disini.

–Selamat Mencoba–

  • deni

    kalau di mozila atau gogle crome tetap bisa ga bang?da yg perlu dirubah ga?

    • di mozilla bisa, di google crome belum di coba, tp ky-nya bisa…

    • Mychael

      thx

  • fahmi

    thank’s gan . . .