본문 바로가기
jQuery

[고급] AJAX 데이터베이스 예제

by ethanjoh 2009. 8. 4.
AJAX를 데이터베이스와 함께 사용하면 좀 더 상호적일 수 있다.

AJAX 데이터베이스 예제

다음의 예제는 AJAX 기술을 이용해 데이터베이스로부터 정보를 얻어오는 방법에 대해 보여준다.



AJAX 예제 설명

예제는 단순한 HTML 폼과 자바스크립트 연결을 포함하고 있다.

<html>
<head>
<script type="text/javascript" src="selectcustomer.js"></script>
</head>

<body>

<form>
Select a Customer:
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>

<div id="txtHint"><b>Customer info will be listed here.</b></div>

</body>
</html>

위에서 볼 수 있듯이 "customers"라는 드롭다운박스와 간단한 HTML 폼으로 되어 있다.
폼 아래의 <div>는 웹서버로부터 정보를 얻어와 보여주는 자리이다.

사용자가 데이터를 선택하면, "showCustomer()" 함수가 실행된다. 이 함수는 "onchange" 이벤트가 발생했을 때 실행된다. 다른 말로 하자면, 사용자가 드롭다운 박스의 값을 바꿀 때마다 showCustomer() 함수를 호출하는 것이다.

AJAX 자바스크립트

"selectcustomer.js"라는 파일명으로 저장한다.

var xmlhttp

function showCustomer(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
var url="getcustomer.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
  {
  document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  }
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

AJAX 서버 페이지

위의 자바스크립트가 "getcustomer.php"라는 서버 페이지를 호출하게 된다.

<?php
$q=$_GET["q"];

$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("ajax_demo", $con);

$sql="SELECT * FROM customers WHERE customerid = '".$q."'";

$result = mysql_query($sql);

echo "<table>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr><td><b>CustomerID</b></td><td>".$row['CustomerID']."</td></tr>";
  echo "<tr><td><b>CompanyName</b></td><td>".$row['CompanyName']."</td></tr>";
  echo "<tr><td><b>ContactName</b></td><td>".$row['ContactName']."</td></tr>";
  echo "<tr><td><b>Address</b></td><td>".$row['Address']."</td></tr>";
  echo "<tr><td><b>City</b></td><td>".$row['City']."</td></tr>";
  echo "<tr><td><b>PostalCode</b></td><td>".$row['PostalCode']."</td></tr>";
  echo "<tr><td><b>Country</b></td><td>".$row['Country']."</td></tr>";
  }

echo "</table>";

mysql_close($con);
?>

(*주: 원문에서 ASP 소스로 되어 있다. 위의 데모를 실행하기 위해서는 데이터베이스 서버에 ajax_demo 라는 DB가 있어야 하고, 해당 DB에는 customers 테이블에 있어야 한다.)