개발자의 길

[AJAX] XMLRequest 활용. jsp에서 db내용을 가져와 보여주기 본문

2. JS

[AJAX] XMLRequest 활용. jsp에서 db내용을 가져와 보여주기

자르르 2011. 7. 6. 10:06



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<title>Ajax XMLHttpRequest!</title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
</head>
<body>
<script language="javascript">
<!--
 var httpReq = null;
 
 function getInstance(){
  var httpReq = null;
 
  try{
   httpReq = new ActiveXObject("Msxml2.XMLHTTP"); 
  } catch(Ex) {
   try{
    httpReq = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (Ex2) {
    httpReq = null;
   }
  }
  return httpReq; 
 }
 
 function sendData(){
 
  httpReq = getInstance();   
    
  httpReq.open("POST", "ajax_XMLRequest_db.jsp", true);
  httpReq.onreadystatechange = handleStateChange;
  httpReq.send();  
 
 }
 
 function handleStateChange(){
  if (httpReq.readyState==4) {
  
   
   if(window.ActiveXObject){   //IE일 경우
          xmlDocument = new ActiveXObject('Microsoft.XMLDOM');
          xmlDocument.async = false;
          xmlDocument.loadXML(httpReq.responseText);
      } else if (window.XMLHttpRequest) {   //Firefox, Netscape일 경우
          xmlParser = new DOMParser();
          xmlDocument = xmlParser.parseFromString(httpReq.responseText, 'text/xml');
      } else {
          return null;
      }     
                 
                                 
   var personList = xmlDocument.getElementsByTagName("company")[0];
   var person = personList.childNodes[0]
   var writeStr = "";
            
   for(i = 0; i < personList.childNodes.length; i++){
    person  = personList.childNodes[i]; 
                
    writeStr += person.getElementsByTagName("name")[0].childNodes[0].nodeValue + " | ";        
    writeStr += person.getElementsByTagName("age")[0].childNodes[0].nodeValue + " | ";       
   }   
                        
   document.getElementById('myDiv').innerHTML = writeStr;
  }
 }    
//-->
</script>
<form name="myForm" method="post">
 <input type="button" name="myname" onClick="sendData()" value="XmlHttpRequest Send">
</body>
<div id = "myDiv"></div>
</html>

----------------------------------------------------------------------------------------------
//ajax_XMLRequest_db.jsp
<%@page contentType="text/xml; charset=utf-8" %>
<%@ page language="java" import="java.sql.*"%>

<%
String driver="com.mysql.jdbc.Driver";
String user="root";
String pass="1234";
String dbURL="jdbc:mysql://localhost/mysql";


String sql;
String rtn_xml;

Connection connection;
Statement stmt  = null;
ResultSet rs  = null;
rtn_xml = "";

try{
 Class.forName(driver);
 connection=DriverManager.getConnection(dbURL,user,pass);
 
 sql = "select * from ajax_test";
 
 stmt = connection.createStatement();
 rs = stmt.executeQuery(sql);  
%>       
<company>
<%
 while (rs.next()){  
  out.println("<person>");
  out.println("<name>" + rs.getString("name") + " </name>");
  out.println("<age>" + rs.getString("age") +  "</age>");
  out.println("</person>");  
 }  
%>
</company>
<%
}
catch(ClassNotFoundException cne){
 
}catch(SQLException se){
}
%>
-----------------------------------------------------------------------------------


-----------------------------------------------------------------------------------
얼핏보면 이전꺼랑 거의 비슷하다고 할수있다.
단지 jsp의 내용이 이전에는 그냥 텍스트였지만 이번에는 데이터를 DB에서 가져온 것이다.

jsp 내용은 DB연결하고 셀렉트 쿼리를 이용해 테이블을 가져오고
그것을 xml형식으로 출력한것이다.
<company>
  <person>
    <name> ... </name>
    <age>  ...   </age>
  </person>
  ...
</company>
이런식으로 출력이 되는것이다.
이것을 가져와서 보여주면 되는것이다.

다른함수는 동일하고 handleStateChange()를 살펴보자
먼저 객체를 가져오는데 IE경우와 Firefox,Netscape경우가 각각 다르므로 알맞게 객체를 가져와야한다.
(조건문에 해당됨)
객체를 가져오면 사용법은 같으므로 통합적으로 해주면 된다.

var personList = xmlDocument.getElementsByTagName("company")[0];
var person = personList.childNodes[0]
company를 찾아 가져온후 그것의 첫번째 자식노드를 가져온다.
자식노드는 person이 된다. person은 db에서 가져온 튜플의 갯수만큼 있다.
db에 두개의 튜플이 잇으므로 자식노드는 0,1,3 세개가 잇다.
근데 밑의 반복문에 같은 문장이 있으므로 생략해도 상관없다....;;;
솔까.. 이거 왜적었는지 모르겟다;;;
            
for(i = 0; i < personList.childNodes.length; i++){
    person  = personList.childNodes[i];    
                
    writeStr += person.getElementsByTagName("name")[0].childNodes[0].nodeValue + " | ";        
    writeStr += person.getElementsByTagName("age")[0].childNodes[0].nodeValue + " | ";       
}   
반본문을 이용하여 company밑에있는 person의 갯수만큼 반복문을 실행하여
각 노드가 가지는 속성들의 내용을 문자열에 추가한다.
                        
document.getElementById('myDiv').innerHTML = writeStr;
각 노드의 정보를 저장한 문자열을 문서에 추가한다.

---------------------------------------------------------------------------------------
이해의 도움을 위해 트리를 그려보앗다..
확실한지는 잘 모르겟다...

[]안의 숫자는 주소번호이다. 각 경로대로 값을 가져온것이다
저작자표시

'2. JS' 카테고리의 다른 글

[자바스크립트] 이벤트 적용 및 발생  (0) 2011.07.29
[javascript] 숫자 세자리 마다 콤마 찍기 (돈표시 할때 사용)  (1) 2011.07.28
[자바스크립트]불펌 방지, 드래그 방지, 마우스 오른쪽 클릭 방지  (1) 2011.05.23
[자바스크립트] 뒤로 가기 버튼 아예 막기  (0) 2011.05.13
[자바스크립트] 뒤로 가기 막기 & 마우스 오른쪽 금지  (1) 2011.05.13


이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
공유하기 링크
'2. JS' Related Articles more
Comments