如何通过javascript访问数据库？

我正在创建一个管理页面，其中有多个文本框。当我在一个文本框中输入用户 ID 时，我想在管理员移动到下一个文本框时在下一个文本框中显示用户名。为此我可以使用ajax or javascript？哪一个会更好？我怎样才能通过javascript做到这一点。

<script>
    function showUser(str) {
        if (str=="") {
          document.getElementById("spName").innerHTML="";
          return;
        } 

        if (window.XMLHttpRequest) {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
        } else {
          // code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange=function() {
          if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("spName").innerHTML=xmlhttp.responseText;
          }
        }

        xmlhttp.open("GET","getUserName.php?q="+str,true);
        xmlhttp.send();
    }
</script>

getUsreName.php

<?php

$q=$_GET["q"];

$host="localhost"; // Host name 
$username="root"; // Mysql username 
$password=""; // Mysql password 
$db_name="pnpdb"; // Database name 

// Connect to server and select databse.
$link = mysql_connect("$host", "$username", "$password")or die("cannot connect"); 
mysql_select_db("$db_name",$link)or die("cannot select DB");


$sql="SELECT name FROM tblprofile WHERE userId = '".$q."'";

$result = mysql_query($sql);

$row = mysql_fetch_array($result);

$name =$row['name'];

if($name == '' || empty($name)) {
  echo "<b>ID not found.</b>";
} else {
  echo "<b>".$name."</b>";
}

mysql_close($link);
?>