본문 바로가기
Programing/Ajax

Ajax - Ajax(dwr)와 iBatis를 사용해서 DB에서 정보 가져오기

woony5231 2008. 7. 29. 21:11

사용자 삽입 이미지
사용자 삽입 이미지


//////////////////////////////////////////////////////////////////////////////////////////////////////////////

//                                                                               index.html

//////////////////////////////////////////////////////////////////////////////////////////////////////////////
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel='stylesheet' href='css/style.css' type='text/css'>
<script type='text/javascript' src='/selectEmp/dwr/interface/tt.js'></script>
<script type='text/javascript' src='/selectEmp/dwr/engine.js'></script>
<script type='text/javascript' src='/selectEmp/dwr/util.js'></script>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Emp 테이블 가져오기 + iBATIS</title>
<script type="text/javascript">


 function getSearchEmp(){
  var str = document.getElementById("input").value;
  tt.getSearchData(str, viewList);
 }


 function getAllEmp() {
  tt.getAllData(viewList);
 }
 
 function viewList(data) {
  str = "";  
  tableObj = document.getElementById("resultTable").children(0); // 결과 table 개체
  deleteChildElement(tableObj);
  for (n in data){
   objRow = createCell();
   for (m in data[n]){ // data[0]
    var val = data[n][m];
    if(data[n][m] == data[n].hiredate) { // 입사일이면 value값을 변경
     val = data[n][m].substring(2,10);
    }


    insertRow(objRow, val);
   } // end for
   
   // table에 tr 삽입
   tableObj.appendChild(objRow);
  } // end for
 }
 
 // tr 삽입하기
 function createCell() {
  return document.createElement("TR");
 }

 // td 삽입하기
 function insertRow(objRow, val) {
  // td 생성
  var objTd = document.createElement("TD");
  // td의 value값 넣기
  objTd.innerHTML = val;
 
  // tr의 align 값 설정
  objRow.style.textAlign = "center";

  // tr에 td 삽입
  objRow.appendChild(objTd);
 }

 // 존재하는 td를 모두 삭제 (제목 제외)
 function deleteChildElement(obj) {
  while(obj.rows(1)) {
   obj.removeChild(obj.rows(1));
  }
 }
</script>
</head>
<body >
<div align="center" style="padding:5px">
 <input type="text" style="width:80px" name="input" onkeyup="getSearchEmp();">
 <input type="button" value="Search" onclick="getSearchEmp();blur();" class="button">
 <input type="button" value="Search All" onclick="getAllEmp();blur();" class="button">
</div>


<div align="center" >
 <table id="resultTable" border="1" style="border-collapse:collapse" cellspacing="0">
  <tr style="background-Color:#E6DCD0">
   <th>부서번호</th>
   <th>사원번호</th>
   <th>이름</th>
   <th>입사일</th>
   <th>직업</th>
   <th>급여</th>
  </tr>
 </table>
</div>
</body>
</html>



//////////////////////////////////////////////////////////////////////////////////////////////////////////////

// 현재 HTML에서 비동기 방식을 사용하기 위하여 Ajax를 사용한다. 하지만 Ajax는 비동기 javascript and XML 언어이다.

// 하지만 자바 개발자 입장에서는 javascript언어보다는 java 언어가 더 편하다. 따라서 ajax에서 java처럼 사용을 하려면

// dwr을 사용하면 된다. dwr을 사용하기 위해 xml 파일들을 만들어준다.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

//                                                                        web.xml

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
 <display-name>selectEmp</display-name>
 <welcome-file-list>
  <welcome-file>index.html</welcome-file>
  <welcome-file>index.htm</welcome-file>
  <welcome-file>index.jsp</welcome-file>
  <welcome-file>default.html</welcome-file>
  <welcome-file>default.htm</welcome-file>
  <welcome-file>default.jsp</welcome-file>
 </welcome-file-list>
 <servlet>
   <servlet-name>my_dwr</servlet-name>
 <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
 <init-param>
  <param-name>debug</param-name>
  <param-value>true</param-value>
 </init-param>   
   </servlet> 
   <servlet-mapping>
    <servlet-name>my_dwr</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
   </servlet-mapping>
</web-app>


//////////////////////////////////////////////////////////////////////////////////////////////////////////////

// Ajax를 통해 DB에서 필요한 정보를 가져오고 싶은데, Ajax에서는 바로 DB에 접근이 힘들어서 중간에 중계기(?)를 두는데

// 그게 여기서는 dwr패키지에 있는 Relay.java파일이다.

// convert부분은 디비에서 받아온 객체를 수신하는 부분인데

// 내가 미리 만들어둔 자바빈즈(여기서는 Emp.java) 객체에 넣어준다.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

//                                                                               dwr.xml

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">
<dwr>
 <allow>
  <!-- 서비스 모듈(자바 빈즈) 설정 -->
  <create creator="new" javascript="tt">
   <param name="class" value="dwr.Relay" />
   <include method="getAllData" />
   <include method="getSearchData" />
  </create>


  <!-- 클라이언트가 수신 할 객체 (value Object) 설정! -->
  <!-- convert 는 수신 객체를 의미하고 이것을 클라이언트에게 JSON 형태로 전달한다. -->
  <convert converter="bean" match="vo.Emp">
   <!-- 멤버변수 (얘네들이 있어야 getter 호출가능) -->
   <param name="include" value="empno,ename,job,hiredate,sal,deptno" />
  </convert>
 </allow>
</dwr>


//////////////////////////////////////////////////////////////////////////////////////////////////////////////

// 디폴트 생성자는 꼭 불러줘야 한다.((EmpDAO)DataService.getDao(EmpDAO.class);)

// DB로 부터 넘어온 정보를 ArrayList로 받아서 이걸 다시 배열로 변환해서 반환하는데

// 이유는, ArrayList로 반환하면 불안하기 때문에 배열로 반환한다고 한다.

// 이걸로 인해 ajax와 DB과 연결되어 자료를 주고 받을수 있게되었다.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

//                                                                        Relay.java

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

package dwr;
import java.util.ArrayList;

import vo.Emp;
import dao.DataService;
import dao.EmpDAO;

public class Relay {
 private EmpDAO e;


 public Relay() {
  e = (EmpDAO)DataService.getDao(EmpDAO.class);
 }
 
 public Emp[] getAllData() {
  ArrayList<Emp> list = e.getSelectAll();
  Emp[] data = null;
  if(list != null && list.size() >0){
   data = new Emp[list.size()];
   return list.toArray(data);
  }
  return data;
 }
 
 public Emp[] getSearchData(int n) {
  ArrayList<Emp> list = e.getSearchData(n);
  Emp[] data = null;
  if(list != null && list.size() >0){
   data = new Emp[list.size()];
   return list.toArray(data);
  }
  return data;
 }
}



//////////////////////////////////////////////////////////////////////////////////////////////////////////////

// iBatis를 사용하면 jdbc를 사용할때보다 간단한 코딩때문에 좋다.

// 여기서 자바빈즈를 만들어준 이유는

// 내가 쓰고자 하는 객체를 만들어서 DB로 부터 넘어온 내가 필요한 정보를 받기위해 만들었다고 볼 수있다.

// 따라서 자바빈즈를 만들고 getter와 setter를 다 지정해 주어야 한다.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

//                                                                               Emp.java

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

package vo;

public class Emp {
 String empno, ename, job, hiredate, sal, deptno;

 public String getEmpno() {
  return empno;
 }

 public String getJob() {
  return job;
 }

 public String getHiredate() {
  return hiredate;
 }

 public String getSal() {
  return sal;
 }

 public String getEname() {
  return ename;
 }

 public void setEmpno(String empno) {
  this.empno = empno;
 }

 public void setEname(String ename) {
  this.ename = ename;
 }

 public void setJob(String job) {
  this.job = job;
 }

 public void setHiredate(String hiredate) {
  this.hiredate = hiredate;
 }

 public void setSal(String sal) {
  this.sal = sal;
 }

 public String getDeptno() {
  return deptno;
 }

 public void setDeptno(String deptno) {
  this.deptno = deptno;
 }
}



//////////////////////////////////////////////////////////////////////////////////////////////////////////////

// DB에서 필요한 정보를 받기위해 객체(자바빈즈)를 준비해 뒀는데 여기서는 iBatis를 이용해서 내가 필요한 정보를

// 받는 곳이라고 할 수 있다.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

//                                                                               Emp.xml

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

<?xml version="1.0" encoding="EUC-KR"?>
<!DOCTYPE sqlMap PUBLIC "-//ibatis.apache.org//DTD SQL Map 2.0//EN" "http://ibatis.apache.org/dtd/sql-map-2.dtd">
<sqlMap namespace="emp">
 <typeAlias alias="empVO" type="vo.Emp" />
 <resultMap id="empResult" class="empVO">
  <result property="ename" column="ENAME" />
  <result property="empno" column="EMPNO" />
  <result property="job" column="JOB" />
  <result property="hiredate" column="HIREDATE" />
  <result property="sal" column="SAL" />
  <result property="deptno" column="DEPTNO" />
 </resultMap>
 <!-- resultMap 을 설정함과 동시에 컬렉션이 세팅된다 -->
 <sql id="select-emp">
  SELECT EMPNO, ENAME, JOB, HIREDATE, SAL, DEPTNO FROM EMP
 </sql>
 <sql id="where-empno-value">
  <![CDATA[
   WHERE DEPTNO = #value#
  ]]>
 </sql>
 <select id="selectAll" resultMap="empResult">
  <include refid="select-emp" />
 </select>
 <select id="selectSearchData" resultMap="empResult" parameterClass="int">
  <include refid="select-emp" />
  <include refid="where-empno-value" />
 </select>
</sqlMap>


//////////////////////////////////////////////////////////////////////////////////////////////////////////////

// 이 부분은 iBatis에서 JDBC 설정이라고 생각하면 된다.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

//                                                                               sqlMapConfig.xml

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

<!DOCTYPE sqlMapConfig PUBLIC '-//ibatis.apache.org/DTD SQL Map Config 2.0//EN' 'http://ibatis.apache.org/dtd/sql-map-config-2.dtd'>
<sqlMapConfig>
    <properties resource="config/sqlMapConfig.properties" />
    <transactionManager type="JDBC" commitRequired="false">
        <dataSource type="SIMPLE">
            <property name="JDBC.Driver" value="${driver}" />
            <property name="JDBC.ConnectionURL" value="${url}" />
            <property name="JDBC.Username" value="${user}" />
            <property name="JDBC.Password" value="${pwd}" />
        </dataSource>
    </transactionManager>
 <sqlMap resource="config/Emp.xml" />
</sqlMapConfig>



//////////////////////////////////////////////////////////////////////////////////////////////////////////////

// 이 부분은 sqlMapConfig부분을 그냥 보내면 보안상 문제때문에 지정해 주는 곳이다.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

//                                                                               sqlMapConfig.properties

//////////////////////////////////////////////////////////////////////////////////////////////////////////////
driver=oracle.jdbc.driver.OracleDriver
url=jdbc:oracle:thin:@localhost:1521:ORCL1
user=SCOTT
pwd=TIGER



//////////////////////////////////////////////////////////////////////////////////////////////////////////////

// 이건 설명이... 그냥 dao들을 묶어주는 역활을 한다고 생각하면될듯하다.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

//                                                                               dao.xml

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

<?xml version="1.0" encoding="EUC-KR"?>
<!DOCTYPE daoConfig PUBLIC "-//ibatis.apache.org//DTD DAO Configuration 2.0//EN" "http://ibatis.apache.org/dtd/dao-2.dtd">
<daoConfig>
 <!-- dao 컨텍스트 설정 : 서로 관련된 설정 정보와 DAO 구현체를 묶어주는 역할을 한다. -->
 <context id="sqlMap">
  <!-- 트랜잭션은 SqlMaps 가 관리하도록 설정 -->
  <transactionManager type="SQLMAP">
   <property name="SqlMapConfigResource" value="config/sqlMapConfig.xml" />      
  </transactionManager>
  <!-- dao 정의-->
  <dao interface="dao.EmpDAO" implementation="dao.EmpDAOImpl" />
 </context>
</daoConfig>



//////////////////////////////////////////////////////////////////////////////////////////////////////////////

// 이 부분은 iBatis를 이용해서 DB를 가져온다고 생각하면 될 듯 하다. DAO(Database Access Object)는 객체를

// 가져올 수 있으므로, iBatis를 사용해서 DB에서 객체를 가져오려면 이걸 꼭 써야한다.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

//                                                                               DataService.java

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

package dao;

import java.io.Reader;

import com.ibatis.common.resources.Resources;
import com.ibatis.dao.client.Dao;
import com.ibatis.dao.client.DaoManager;
import com.ibatis.dao.client.DaoManagerBuilder;

// iBATIS 가 DAO 를 생성할 때 사용하는 팩토리(!) 클래스~!
public class DataService {
 private static DaoManager daoManager;
 private static synchronized DaoManager getDaoManager() {
  //설정파일의 내용을 로드하기 위한 스트림 필요
  Reader reader;
 
  // 설정파일의 위치 지정!
  // - dao.xml 은 파일의 경로가 아니라 Class Path 의 Resource 위치를 의미한다.
  String daoXmlResource = "dao.xml";
 
  if(daoManager == null) {
   try {
    // DaoManager 구성에 필요한 reader 객체 가져오기!
    // - Resources 클래스는 설정파일을 Class Path에서 찾아서
    // reader 로 만든 후 DAoManagerBuilder 클래스에 전달한다.
    reader = Resources.getResourceAsReader(daoXmlResource);
   
    // DaoManager 구성하기
    // DaoManagerBuilder는 DaoManager 인스턴스를 생성한다.
    daoManager = DaoManagerBuilder.buildDaoManager(reader);
   } catch (Exception e) {
    // TODO: handle exception
    e.printStackTrace();
   }
  }
  return daoManager;
 }
 
 // Memo m = (Memo)DataService.getDao(Memo.class); 으로 DAO 객체를 생성할 수 있다.
 public static Dao getDao(Class inter) {
  return getDaoManager().getDao(inter);
 }
}



//////////////////////////////////////////////////////////////////////////////////////////////////////////////

// DAO는 interface와 extends를 가지는데

// 여기서는 인터페이스로 선언되었으므로 선언만 하고, 정의는 empDAOImpl.java에서 해야한다.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

//                                                                               empDAO.java

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

package dao;

import java.util.ArrayList;

import vo.Emp;

public interface EmpDAO {
 public ArrayList<Emp> getSelectAll();
 public ArrayList<Emp> getSearchData(int n);
}



//////////////////////////////////////////////////////////////////////////////////////////////////////////////

// 인터페이스에서 구현한 내용을 정의하는 곳인데, 여기서는 DB에서 가져온 정보를 xml에서 정의해 뒀는데

// 그 부분을 처리(?) 해준다고 생각할 수 있다.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

//                                                                               empDAOImpl.java

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

package dao;

import java.util.ArrayList;

import vo.Emp;

import com.ibatis.dao.client.DaoManager;
import com.ibatis.dao.client.template.SqlMapDaoTemplate;

public class EmpDAOImpl extends SqlMapDaoTemplate implements EmpDAO {
 //반드시 구현 객체는 DaoManager객체를 인자로 받는 생성자를 정의해야 한다.
 public EmpDAOImpl(DaoManager daoManager) {
  super(daoManager);
 }

 @SuppressWarnings("unchecked")
 public ArrayList<Emp> getSelectAll() {
  return (ArrayList<Emp>)queryForList("selectAll");
 }

 @Override
 public ArrayList<Emp> getSearchData(int n) {
  return (ArrayList<Emp>)queryForList("selectSearchData", n);
 }
}

[출처] Ajax - Ajax(dwr)와 iBatis를 사용해서 DB에서 정보 가져오기|작성자 비틀박

'Programing > Ajax' 카테고리의 다른 글

Ajax - suggest  (0) 2008.07.29
Ajax - DB 값 빼오기  (0) 2008.07.29
Ajax - innerHTML  (0) 2008.07.29
Ajax - innerHTML  (0) 2008.07.29
Ajax - 비동기식?  (0) 2008.07.29

'Programing/Ajax' Related Articles

티스토리툴바