กรอกฟอร์มขณะพิมพ์ด้วย Ajax (ตอนที่ 1)

<form>
<p>Username : <input type="text" id="user" name="user" /><span id="result">&nbsp;</span></p>
<p>ลองพิมพ์คำว่า demon ลงในช่อง Username (ทีละตัว)</p>
<p>Email : <input type="text" id="email" name="email" /></p>
<p>Display Name : <input type="text" id="displayname" name="displayname" /></p>
</form>

<script type="text/javascript">
var doKeyUp = function(event){
    // input เจ้าของ event (user)
    var input = GEvent.element(event);
    // พื้นที่แสดงผลรูปรอโหลด
    var result = $E('result');
    // แสดงรูปรอโหลด เพื่อบอกว่ากำลังส่งข้อมูลไปตรวจสอบ
    result.innerHTML = '<img src="https://www.goragod.com/skin/img/wait.gif" alt="" />';
    // ajax ส่งข้อมูลไปตรวจสอบ
    var req = new GAjax();
    req.send('find.php' ,  'user=' + encodeURIComponent(input.value) , function(xhr) {
        result.innerHTML = '&nbsp;';
        var datas = xhr.responseText.toJSON();
        var prop, val;
        // วนลูปส่งข้อมูลมาแสดงตาม input ต่างๆ
        for (prop in datas[0]) {
            val = datas[0][prop];
            $E(prop).value = val;
        };
    });
}
// กำหนด event
$G('user').addEvent('keyup', doKeyUp);
</script>

<?php
    // สำหรับตรวจสอบในขณะกรอกข้อมูล
    header("content-type: text/html; charset=UTF-8");

    // กำหนดข้อมูล (ตัวอย่าง)
    $users = array('demo', 'demon');
    $emails = array('demo@goragod.com', 'demon@yahoo.com');
    $displaynames = array('ตัวอย่าง', 'Demon !');

    // ค่าที่ส่งมา
    $user = trim($_POST['user']);

    // ค้นหาข้อมูล
    $i = 0;
    while($i < count($users)){
        if($users[$i] == $user){
            break;
        }
        $i++;
    }

    // กำหนดค่าที่คืน
    $ret[] = 'email":"'.$emails[$i];
    $ret[] = 'displayname":"'.$displaynames[$i];

    // คืนค่าเป็น JSON
    echo '[{"'.implode('","', $ret).'"}]';
?>