AJAX 데이터베이스
AJAX를 사용하여 데이터베이스와 대화형으로 통신할 수 있습니다.
AJAX 데이터베이스 예제
다음 예제에서는 웹 페이지가 AJAX를 통해 데이터베이스에서 정보를 읽는 방법을 보여줍니다.
Example
고객 정보가 여기에 나열됩니다...
설명 예시 - HTML 페이지
위 드롭다운 목록에서 사용자가 고객을 선택하면 "showCustomer()"라는 함수가 실행됩니다. 이 함수는 "onchange" 이벤트에 의해 트리거됩니다:
<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str==" ")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari용 코드
xmlhttp=new XMLHttpRequest( );
}
else
{// IE6용 코드, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState== 4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcustomer.asp?q="+str ,true );
xmlhttp.send();
}
</script>
</head
<body>
<form>
<name="customers" onchange="showCustomer(this .value )">
<option value="">고객 선택:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS "> ;북쪽/남쪽</option>
<option value="WOLZA">월스키 자자즈드</option>
</select>
</form>
<br>
<div id= "txtHint ">고객 정보가 여기에 나열됩니다...</div>
</body>
</html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str==" ")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari용 코드
xmlhttp=new XMLHttpRequest( );
}
else
{// IE6용 코드, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState== 4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcustomer.asp?q="+str ,true );
xmlhttp.send();
}
</script>
</head
<body>
<form>
<name="customers" onchange="showCustomer(this .value )">
<option value="">고객 선택:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS "> ;북쪽/남쪽</option>
<option value="WOLZA">월스키 자자즈드</option>
</select>
</form>
<br>
<div id= "txtHint ">고객 정보가 여기에 나열됩니다...</div>
</body>
</html>
소스 코드 설명:
고객을 선택하지 않은 경우(str.length==0) 이 함수는 txtHint 자리 표시자를 지우고 함수를 종료합니다.
고객이 선택된 경우 showCustomer() 함수는 다음 단계를 수행합니다.
XMLHttpRequest 객체 생성
서버 응답이 준비되면 실행되는 함수 생성
다음으로 요청 보내기 서버에 있는 파일
URL(드롭다운 목록의 내용 포함) 끝에 추가된 매개변수(q)에 주의하세요.
ASP 파일
호출되는 서버 페이지 위의 JavaScript는 "getcustomer.asp" 문서라는 ASP입니다.
"getcustomer.asp"의 소스 코드는 데이터베이스에 대해 쿼리를 실행하고 결과를 HTML 테이블로 반환합니다.
<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID = "
sql=sql & "'" & request.querystring("q") & "'"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB 4.0. "
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn
response.write("< ; table>")
rs.Fields
response.write("<tr><td><b>" & x.name & "</b>< ; /td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("< ; /테이블>")
%>
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID = "
sql=sql & "'" & request.querystring("q") & "'"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB 4.0. "
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn
response.write("< ; table>")
rs.Fields
response.write("<tr><td><b>" & x.name & "</b>< ; /td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("< ; /테이블>")
%>
