AJAX 데이터베이스 예제

AJAX는 데이터베이스와 대화식으로 통신하는 데 사용할 수 있습니다.

다음 예제는 웹 페이지가 AJAX를 사용하여 데이터베이스에서 정보를 가져올 수있는 방법을 보여줍니다:

Example

Customer info will be listed here…



<h2>The XMLHttpRequest Object</h2>

<form action=""> 
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>

<script>
function showCustomer(str) {
  var xhttp;    
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("txtHint").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "getcustomer.asp?q="+str, true);
  xhttp.send();
}
</script>

<h2>The XMLHttpRequest Object</h2>

<option value="">Select a customer:</option>

<option value="ALFKI">Alfreds Futterkiste</option>

<option value="NORTS ">North/South</option>

<option value="WOLZA">Wolski Zajazd</option>

</select>

</form>

<br>

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

function showCustomer(str) {

var xhttp;

if (str == "") {

document.getElementById("txtHint").innerHTML = "";

return;

}

xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("txtHint").innerHTML = this.responseText;

}

};

xhttp.open("GET", "getcustomer.asp?q="+str, true);

xhttp.send();

}

</script>

예제 설명 – showCustomer() 함수

사용자가 위의 드롭 다운 목록에서 고객을 선택하면, “showCustomer()”라는 함수가 실행됩니다. 함수는 “onchange”이벤트에 의해 트리거됩니다:

showCustomer


function showCustomer(str) {
  var xhttp; 
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    document.getElementById("txtHint").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "getcustomer.asp?q="+str, true);
  xhttp.send();
}

function showCustomer(str) {

var xhttp;

if (str == "") {

document.getElementById("txtHint").innerHTML = "";

return;

}

xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("txtHint").innerHTML = this.responseText;

}

};

xhttp.open("GET", "getcustomer.asp?q="+str, true);

xhttp.send();

}

showCustomer() 함수는 다음을 수행합니다:

고객이 선택되어 있는지 확인합니다.
XMLHttpRequest 객체를 만듭니다.
서버 응답이 준비되었을 때 실행될 함수를 생성합니다.
요청을 서버의 파일로 전송합니다.
매개변수(q)가 URL (드롭다운 목록의 내용으로)에 추가되었는지 확인합니다.

AJAX 서버 페이지

위 자바스크립트에 의해 호출된 서버의 페이지는 “getcustomer.asp”라는 ASP 파일입니다.

서버 파일은 PHP 나 다른 서버 언어로 쉽게 재 작성될 수 있습니다.

PHP ajax database에서 해당 예제를 보십시오 .

“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("/datafolder/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn

response.write("<table>")
do until rs.EOF
  for each x in rs.Fields
    response.write("<tr><td><b>" & x.name & "</b></td>")
    response.write("<td>" & x.value & "</td></tr>")
  next
  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("/datafolder/northwind.mdb"))

set rs=Server.CreateObject("ADODB.recordset")

rs.Open sql,conn

response.write("<table>")

do until rs.EOF

for each x in rs.Fields

response.write("<tr><td><b>" & x.name & "</b></td>")

response.write("<td>" & x.value & "</td></tr>")

rs.MoveNext

loop

response.write("</table>")

출처: AJAX Database Example