AJAX란? - 데이터베이스

AJAX 데이터베이스 예제

아래 예제는 AJAX를 이용해서 데이터베이스에서 읽어온 자료를 처리하는 것을 보여줍니다.

예제

form 태그가 먹히지 않는 관계로 예제는 실습하기 버튼을 눌러서 W3Schools로 가셔서 해보시기 바랍니다.

실습하기 »

예제 설명 - showCustomer() 함수

사용자가 드랍다운 리스트에서 고객을 선택하면, "showCustomer()" 함수가 호출되어 실행됩니다. 이 함수는 "onchange" 이벤트가 발생하면 호출되도록 되어있습니다.

showCustomer 함수 소스 코드

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

showCustomer() 함수는 아래와 같은 작업을 합니다.

• customer가 선택이 되었는지 검사합니다.
• XMLHttpRequest 객체를 생성합니다.
• 서버로부터 응답을 받고나서 실행될 함수를 정의합니다.
• 서버에 있는 파일로 요청을 보냅니다.
• 요청을 보낼 때 파라미터 "q" 와 드랍다운 리스트에서 읽어온 str을 URL에 추가했습니다.

---

 AJAX Server Page

위 예제에서 사용된 서버페이지는 "getcustomer.asp"입니다.

서버 페이지 파일은 PHP, JSP와 같은 다른 서버 언어로도 구현할 수 있습니다.

PHP로 구현한 동일한 기능의 소스 보기

 "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>")
%>

자, 큰 그림이 그려지나요?

정리를 한번 해드리자면,

1. 드랍다운 리스트에서 항목을 선택한다.

2. 항목이 선택되면 onchange 이벤트에의해 showCustomer() 함수를 호출하여 ajax 요청이 서버로 전송되고

3. 서버에서 getcustomer.asp파일이 실행이 되는데 이 파일은 DB를 조회해서 읽어온 정보를 html형태의 테이블을 만들어서 응답으로 보냅니다.

4. 그러면 이 응답으로 받은 html형식의 정보를 드랍다운 리스트 아래쪽에 뿌려줍니다.

이런식으로 ajax를 이용한 요청이 처리가 되는 겁니다.

별로 어렵지 않죠? ^-^ 

여기서 AJAX 포스팅은 마치도록 하겠습니다.

참고로 AJAX포스팅에 사용된 자료는 W3Schools에 있는 자료를 번역해놓은 수준입니다.

궁금한게 있으시면 댓글 달아주시면 답글 달아드리도록 하겠습니다.