게시판〃(12) AJAX로 본문 미리보기 구현

이제 정말 정말 마지막 단계인 AJAX로 본문을 미리보는 단계만 남았습니다. 요 기능이 필요없다면 저번 글까지가 완성단계이고요.

게시판 만들기 프로젝트에 필요한 기초 이론들은 JQUERY 게시판에 글을 올렸기 때문에 참고하시거나 아래 링크를 통해 먼저 보고 오시는게 좋을것 같아요. 여기서는 간단하게 소스코드와 기능들에 대한 설명들을 할 생각입니다.

▼ 관련글

2015/12/14 - JQuery〃에이작스(AJAX) 동작원리, 설정, 비동기 요청함수

2015/12/10 - 게시판만들기〃(9) Board_List.jsp 작성하기

2015/12/08 - Jsp〃[EL]과 [JSTL] 한방에 정리 + Core

2015/12/06 - 게시판만들기〃(6) Controller 패키지 작성

그럼 글의 순서는 보드리스트.jsp에서 보내온 boardAjax.action을 처리하는 AJAX 컨트롤러에서 경로를 추적해 다시 역순으로 올라가 보드리스트의 AJAX구문을 살펴보는 식으로 작성하겠습니다.

■ AJAX 컨트롤러부터 preView따라가기

package board.controller;
 
import java.io.IOException;
import java.io.PrintWriter;
 
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
 
import board.mybatis.BoardManager;
import board.service.BoardService;
 
@Controller
public class AjaxController {
    @Resource(name="boardService")
    private BoardService boardService;
    
    @RequestMapping(value="/boardAjax.action")
    public void ajaxlist(HttpServletRequest req, HttpServletResponse res) 
            throws IOException{
        int seq = Integer.parseInt(req.getParameter("seq"));
        req.setCharacterEncoding("utf-8");
        res.setContentType("text/html; charset=utf-8");
        res.setHeader("Cache-Control", "no-cache");
        
        String preContent = BoardManager.preView(seq);
        PrintWriter out =res.getWriter();
        out.print(preContent);
    }
}

▲ Ajax컨트롤러 소스코드

이미 게시판 제목 6번에서 컨트롤러에 대한 자바파일은 작성했으나 AJAX에 대해서는 나중에 따로 빼서 올리기로 했기 때문에 이번 포스팅에서 작성하게 되었습니다. 어노테이션에 대한 설명은 위 링크중 6번 컨트롤러 패키지작성 링크를 통해 보시면 될거에요.

먼저 첫번째로 보드리스트.jsp에서 "/boardAjax.action"을 소환하여 Ajax컨트롤러에서 처리하도록 요청하는데요. 컨트롤러에선 인코딩을 UTF-8로 맞춰주고 [27번줄]에서 헤더를 설정해줍니다. 설정해주는 값들의 종류는 아래와 같고 저는 게시판에서 캐시를 남기지 않기 위해 " Cache-Control" , " no-cache "의 코드를 사용했습니다.  그 이유는~~??

JSP파일이 컴파일 과정을 거쳐 JAVA파일이 되면 JAVA 컴파일러가 동작합니다. 그럼 서블릿 클래스가 생성되고 이걸 실제로 실행하게 됩니다. 만약에 이 과정에서 캐시가 남아있는 경우 JSP가 서블릿으로 변환하지 못하게 되거나 , 남아 있는 캐시가 계속 출력되면 500 오류가 생길 수도 있기 때문에 캐시를 남기지 않기 위해 설정해주었습니다.

 

▶ response.setHeader (" 헤더설정 " )

* Cache-Control

클라이언트가 받은 문서를 캐시에 저장할지 말지 정하며, public / private / no-cache / no-store 등으로 값을 정해줍니다.

* Connection

브라우저의 연결방식을 지정합니다. Default값은 연결을 계속 유지하고, close값을 지정하여 반대값을 줄 수 있습니다.

* Expires 

문서가 캐시에 남아있게 될 시간을 지정합니다.

* Refresh

브라우저가 자동으로 로딩되게 합니다.

* SetCookie

쿠키를 설정합니다.

다음 [29번줄]에 있는 String preContent = BoardManager.preView(seq); 를 통해 SQL문을 담아 임의로 지정한 이름 preCotent의 변수에 저장하여 View역활을 하는 Board_List.jsp에 보냅니다. 그럼 보드매니저의 소스코드입니다.

    public static String preView(int seq){
        SqlSession session = sqlMapper.openSession();
        String content = session.selectOne("preView",seq);
        System.out.println(content);
        session.close();
        return content;
    }

▲ BoardManager.java 소스코드

좀 순서 따라가는게 복잡하지만 ① sqlMapper.openSession을 통해 session에 저장 ② sqlMapper는 sqlmapConfig.xml을 통해 boardMapper.xml의 preView의 SQL문중 seq를 하나만 뽑아 content에 저장 ③ content를 출력하고 세션을 닫고 리턴합니다. 

    <select id="preView" parameterType="int" resultType="String">
        select content from tbl_board where seq = #{seq}
    </select>

▲ boardMapper.xml 소스코드

②에 해당하는 SQL문입니다. 테이블에서 content중에 있는 seq(시퀀스)를 선택하여 뽑아내죠. 그리고 다시 역순으로 올라가 보드리스트.jsp로 가게 됩니다.

<style type="text/css">

       #layer1{
             position:absolute;
             padding:5px;
             filter:alpha(opacity=50);
             width:250px; height:auto;
             background-color:white;
             border:2px #000000 dotted;
             visibility:hidden; 
       }
 
</style>
<script language="javascript" type="text/javascript" src="js/createXMLHttpRequest.js"></script>
<script type="text/javascript">
 
    var xmlHttp;
    var xmlDoc;
    var message;
 
    function contentprev(seq) {
 
        var url = "boardAjax.action?seq=" + seq; //미리보기 서블릿 호출
        xmlHttp = createXMLHttpRequest();
        xmlHttp.onreadystatechange = handleStateChange;
        xmlHttp.open("get", url, true);
        xmlHttp.send(null);
    }
 
    function handleStateChange() {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                xmlDoc = xmlHttp.responseText;
                document.getElementById("layer1").innerHTML = xmlDoc;
            }
        }
    }
 
    function showlayer(id) {
        if (document.all[id]) {
            document.all[id].style.visibility = "visible";
        } else if (document.layers[id]) {
            document.layers[id].style.visibility = "visible";
        }
    }
 
    function hidelayer(id) {
        if (document.all[id])
            document.all[id].style.visibility = "hidden";
        else if (document.layers[id])
            document.layers[id].style.visibility = "hidden";
    }
 
    function movetip() {
        layer1.style.marginTop = event.y + document.body.scrollTop + 10 +"px";        
        layer1.style.marginLeft = event.x + document.body.scrollLeft + 10 +"px";
    }
    document.onmousemove = movetip;
</script>
</head>
 
<body>
    <a href="javascript:read(${list[i].seq })" onmouseover="contentprev('${list[i].seq}');showlayer('layer1');" 
    onmouseout="hidelayer('layer1');">${list[i].title }</a>
</body>
</html>

▲ Board_List.jsp 중 AJAX에 해당하는 소스코드

지금까지 한 과정이 [22번줄]에서 boardAjax.action으로 보낸 요청에 대한 응답내용이였습니다. 

이제부터 순서가 이리저리 왔다갔다 하니 소스코드를 잘보셔야됩니다.

꼭 여기서 링크글을 보시면 좋은게 [20~36번줄]까지 설명과 

<script language="javascript" type="text/javascript" src="js/createXMLHttpRequest.js"></script>

AJAX 환경설정 설명을 적어놨습니다. 

2015/12/14 - JQuery〃에이작스(AJAX) 동작원리, 설정, 비동기 요청함수

[62번줄] 본문 제목에 onmouseover 속성으로 마우스를 올리면 

contentprv('${list[i]seq')가 처리하는데 그것이 [20~27번줄]의 자바스크립트가 처리합니다.

그리고 showlayer('layer1') → [38~44번줄]

onmouseout="hidelayer('layer1);" → [46~51번줄]

자바스크립트에서 처리하죠.

간단하게 설명하면 마우스를 올리면 "visible" 본문 미리보기를 보여주고

마우스를 벗어나면 "hidden"으로 숨깁니다. 

[53번줄]의 function movetip( )은

x축과 y축에 10px을 더한 만큼 위치에

본문 미리보기 내용을 표시한다라는 좌표 설정값입니다.

마지막 [1~10번줄]의 Style은

본문이 표시되는 디자인을 넣어주는 역활을 합니다.

position: absolute; 

→ 절대적인 위치를

filter: alpha(opacity=50);

→ alpha는 투명조 조절효과 / opacity는 불투명도 조절

추가로 blur (흐리게 하는효과) / chroma (투명효과) / wave (물결모양) / grow (번짐효과)

등이 있습니다.

width:250px; height:auto;

→ 폭너비조정으로 height에 auto값을 넣어 글의 길이만큼 본문이 미리보이도록 설정

visibility: hidden;

→ 속성값에는 visible / hidden / collapse / inherit 4가지가 있습니다.

차례대로 

보여주고 / 숨기고 / 테이블의 tr,td를 숨기고 / 부모의 상태값을 상속한다의 기능입니다.

■ 본문 미리보기 사진

이제 전부 완성도 됬으니 화면이 출력된 사진을 올릴 수 있네요. 지금까지 해온 작업을 한다면 게시글에 마우스를 올렸을때 본문내용이 X축과 Y축으로 10px 벗어난 만큼 공간에 미리보기가 가능해집니다. 당연히 마우스를 벗어나면 보이지 않고요. 다음글에서는 출력된 사진들과 동영상으로 찾아 뵙겠습니다.