AJAX 데이터베이스
AJAX를 사용하면 데이터베이스와 동적으로 통신할 수 있습니다.
AJAX 데이터베이스 예제
다음 예제에서는 웹 페이지가 AJAX를 통해 데이터베이스에서 정보를 읽는 방법을 보여줍니다. 아래 드롭다운 목록에서 고객을 선택하세요.
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="">
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
인스턴스 설명 - showCustomer() function
위 드롭다운 목록에서 사용자가 고객을 선택하면 "showCustomer()"라는 함수가 실행됩니다. 이 함수는 "onchange" 이벤트에 의해 트리거됩니다.
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="" ;
return;
}
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari용 코드 new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && .innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcustomer.html?q="+str,true);
xmlhttp.send() ;
}
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="" ;
return;
}
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari용 코드 new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && .innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcustomer.html?q="+str,true);
xmlhttp.send() ;
}
showCustomer() 함수는 다음 작업을 수행합니다.
고객이 선택되었는지 확인
XMLHttpRequest 객체 생성
서버 응답이 준비되면 생성된 함수 실행
URL에 매개변수 q를 추가했습니다(입력 필드의 내용 포함).
AJAX 서버 페이지
위의 JavaScript에서 호출한 서버 페이지는 "getcustomer.php"라는 PHP 파일.
PHP나 다른 서버 언어로 서버 파일을 작성하는 것도 쉽습니다. PHP로 작성된 해당 예제를 참조하세요.
"getcustomer.php"의 소스 코드는 데이터베이스를 쿼리한 다음 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.EOF까지 완료
rs.Fields
의 각 x에 대해 response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
다음
rs.MoveNext
loop
response.write("</table>")
%>
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.EOF까지 완료
rs.Fields
의 각 x에 대해 response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
다음
rs.MoveNext
loop
response.write("</table>")
%>
