AJAX를 데이터베이스와 함께 사용하면 좀 더 상호적일 수 있다.
다음의 예제는 AJAX 기술을 이용해 데이터베이스로부터 정보를 얻어오는 방법에 대해 보여준다.
예제는 단순한 HTML 폼과 자바스크립트 연결을 포함하고 있다.
위에서 볼 수 있듯이 "customers"라는 드롭다운박스와 간단한 HTML 폼으로 되어 있다.
폼 아래의 <div>는 웹서버로부터 정보를 얻어와 보여주는 자리이다.
사용자가 데이터를 선택하면, "showCustomer()" 함수가 실행된다. 이 함수는 "onchange" 이벤트가 발생했을 때 실행된다. 다른 말로 하자면, 사용자가 드롭다운 박스의 값을 바꿀 때마다 showCustomer() 함수를 호출하는 것이다.
"selectcustomer.js"라는 파일명으로 저장한다.
위의 자바스크립트가 "getcustomer.php"라는 서버 페이지를 호출하게 된다.
(*주: 원문에서 ASP 소스로 되어 있다. 위의 데모를 실행하기 위해서는 데이터베이스 서버에 ajax_demo 라는 DB가 있어야 하고, 해당 DB에는 customers 테이블에 있어야 한다.)
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>
<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;
}
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);
?>
$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 테이블에 있어야 한다.)
'jQuery' 카테고리의 다른 글
| 이미지를 모바일 해상도에 맞게 조절하기 (0) | 2013.10.11 |
|---|---|
| [jQuery mobile] back 버튼을 누르면 강제로 refresh 하기 (0) | 2013.04.05 |
| [고급] AJAX 제시어 소스코드 (0) | 2009.08.03 |
| [고급] AJAX 제시어 예제 (0) | 2009.08.03 |
| [기초] AJAX - 서버 측 스크립트 (0) | 2009.07.28 |
