[자바학원/스프링교육/스프링부트교육추천_탑크리에듀]spring + ibatis + ajax 를 이용한 게시판 만들기 List페이지_2 (4)

리스트 페이지에 경우 게시물의 제목영역에 마우스를  갔다되면 게시물의 내용을 볼수 있는 툴팁기능을 구현하였습니다. 

툴팁기능에 대한 자세한 설명은 

http://blog.naver.com/jinoxst/140021735384 블로그를 참조하시면 원하는 소스코드를 보실수 있습니다. 


list.jsp페이지에서 전체코드는 생략하고 Ajax에 관련된 부분만 간단하게 설명하겠습니다.. 


Ajax에서 응답으로 가져오는 데이터는 한글데이터이므로 euc-kr로 설정한 경우 한글이 깨지는 문제가 발생합니다. list.jsp페이지에 charset을 utf-8로 설정합니다. 


<script type="text/javascript">        
        var xmlHttp; 
        var dataDiv; 
        var dataTable; 
        var dataTableBody; 
        var offsetEl; 

        function createXMLHttpRequest() { //xmlHttpRequest객체를 생성한다. 
            if (window.ActiveXObject) { 
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
            } 
            else if (window.XMLHttpRequest) { 
                xmlHttp = new XMLHttpRequest();                
            } 
        } 

        function initVars() {  // DOM객체를 얻어오기위해서 변수를 초기화시킨다. 
            dataTableBody = document.getElementById("courseDataBody");            
            dataTable = document.getElementById("courseData"); 
            dataDiv = document.getElementById("popup"); 
        } 

        function getCourseData(element) { 
      
          //onMouseOver이벤트가 일어날 때마다 호출된다. 
          //요청된 서블릿페이지로 해당게시물의 Prmimary key에해당하는 num값을 전달한다. 
                            initVars();            
            createXMLHttpRequest(); 
            offsetEl = element; 
            var paramName = encodeURIComponent(element.id); 
            var url = "/springBoard/tooltip.do?key=" + escape(paramName); 
                      
            xmlHttp.open("GET", url, true); 
            
            xmlHttp.onreadystatechange = callback;  //콜백함수 지정 
            xmlHttp.send(null); 
        } 

        function callback() { //콜백함수 
        
            if (xmlHttp.readyState == 4) { 
                if (xmlHttp.status == 200) { 
              setData(xmlHttp.responseXML); 
                } 
            } 
        } 
        
        function setData(courseData) {            
            clearData();  //데이터 영역삭제 
            setOffsets();  //Dom을 표시하고자원하는 offSet 위치를 계산하는 함수 
          var content = courseData.getElementsByTagName("content")[0].firstChild.data; //xml형식으로 날라온 데이터의 내용부분을변수에 저장한다. 
                  
            var row; 
            var contentData = content 
                        
            row = createRow(contentData);      //Table에 Row를 하나생성한다. 
                        
            dataTableBody.appendChild(row);  //생성한 Row를 테이블에 추가한다. 
        } 


        function createRow(data) {            //table객체에서 하나의 Row 
    //즉 Tr과 ,td를 생성하여 생성된 row를리턴한다. 
            var row, cell, txtNode; 
            row = document.createElement("tr"); 
            cell = document.createElement("td"); 

            cell.setAttribute("bgcolor", "#FFFAFA"); 
            cell.setAttribute("border", "0");                          

            txtNode = document.createTextNode(data); 
            cell.appendChild(txtNode); 
            row.appendChild(cell); 
          
            return row;  
        } 
        
        
        function setOffsets() { 
                
                
            var end = offsetEl.offsetWidth; 
            var top = calculateOffsetTop(offsetEl); 
            
            dataDiv.style.border = "black 1px solid"; 
            dataDiv.style.left = end + -40 + "px"; 
            dataDiv.style.top = top + -40 + "px"; 
            
        } 
        
        function calculateOffsetTop(field) { 
          return calculateOffset(field, "offsetTop"); 
        } 

        function calculateOffset(field, attr) { 
          var offset = 0; 
          while(field) { 
            offset += field[attr]; 
            field = field.offsetParent; 
          } 
          return offset; 
        } 

        function clearData() {        
      //현재 출력되어진 Row가 있으면 그 Row를 지운다  
            var ind = dataTableBody.childNodes.length;            
            for (var i = ind - 1; i >= 0 ; i--) { 
                dataTableBody.removeChild(dataTableBody.childNodes[i]);      
            } 
            dataDiv.style.border = "none"; 
        }        
        

    </script> 


Servlet쪽 코드 

SpringBoardTooltipController.java 


package web; 

import java.io.PrintWriter; 

import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 

import org.apache.commons.el.Logger; 
import org.apache.commons.logging.Log; 
import org.apache.commons.logging.LogFactory; 
import org.springframework.web.servlet.ModelAndView; 
import org.springframework.web.servlet.mvc.Controller; 

import boardDao.BoardTooltipDao; 

public class SpringBoardTooltipController implements Controller { 

        private BoardTooltipDao boardTooltipDao; 
        protected final Log logger = LogFactory.getLog(getClass()); 
        public BoardTooltipDao getBoardTooltipDao() { 
                return boardTooltipDao; 
        } 

        public void setBoardTooltipDao(BoardTooltipDao boardTooltipDao) { 
                this.boardTooltipDao = boardTooltipDao; 
        } 
        
        
        @Override 
        public ModelAndView handleRequest(HttpServletRequest request, 
                        HttpServletResponse response) throws Exception { 

                response.setContentType("text/xml;charset=UTF-8"); 
                //한글이 깨지는것을 막기위해 응답의 contentType을 설정한다. 
                int num=Integer.parseInt(request.getParameter("key")); 
                logger.info("Ajax_num "+num); 
                
                String content=boardTooltipDao.getContent(num); 
                  //db에 접근하여 원하는 결과 값을가져온다. 
                
                PrintWriter out = response.getWriter(); 
                
                      
        response.setHeader("Cache-Control", "no-cache"); 
      
        out.println("<response>"); 
        out.println("<content>" + content + "</content>"); 
        out.println("</response>"); 
        out.close(); 
        
                return null; 
        } 

        

}