[ Spring ] JSON 객체 타입을 리턴하는 비동기식 처리방식

동기식 처리방식과 비동기식 처리방식

EX ) 게시판 리스트를 뿌려주고, 지도를 가져오는 일이 동시에 이루어져야할때

동기식 처리방법은 순서대로 처리되어 하나의 작업이 끝나야 그 후 나머지 작업이 이루어진다.

때문에 클라이언트에게 응답 시간이 길어진다. 하나의 페이지에서 두가지를 동시에 하려면 각각의 JSP가 필요하게된다.

※ <form action="이동할 URI"> 동기방식으로 java에 보내주어 포워딩 또는 리다이렉트 해서 페이지를 새로 로딩해 데이터를 얻는 방식.

비동기식 처리방법은 하나의 Veiw에서 두가지의 일을 동시에 가능하다.

다른 일도 작업중이기 때문에, 동시에 두가지일을 하려면 jsp를 포워딩하면 안되고 콜백함수 (대신 처리 해주는 함수 = $ajax )를 사용해서 데이터를 요청하고 JAVA에서 요청한 데이터를 전달 받아 처리한다.

JSON 타입으로 데이터를 변환해서 사용하는 또 다른 이유 ?

모바일 환경의 대두로 서버 역할의 변화가 일어났다.

다양한 접속환경( 다양한 접속환경 : 안드로이드,웹브라우저, Iot )에서 사용할 수 있는 데이터 타입( xml 또는 JSON )으로 전달하기위해서 사용이된다. xml 또는 JSON 타입으로 데이터를 전달하면 해당 접속 환경이 화면을 가공하여 사용자에게 전달한다.

객체를 JSON 포멧 으로 결과 값을 리턴하기 위해 필요한 내용 !

1. API " jackson-databind " 추가

- jackson-databind API 를 pom.xml에 연결해주면 JSON포멧을 사용할 수 있다.

📑 pom.xml

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.9.8</version>
</dependency>

※ jackson-databind API ※

가벼운 데이터를 주고 받는 포멧이다.

Java Object를 JSON으로 변환하거나, JSON을 Java Object로 변환하는데 사용할 수 있는 Java 라이브러리이다.

※ JSON 타입 ※

name과 value를 한쌍으로해서 데이터를 표현한다.

Object = { "name" : "value" }
Array = [ { "name" : "value" }, { "name" : "value" }, { "name" : "value" } ]

https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind

2. JSON으로 반환 값을 받는 메서드에서 @ResponseBody 어노테이션 선언

- @ResponseBody 가 있으면 메이븐의 jackson-databind Api가 실행되어 json 형식 타입의 객체를 Object로 변환하여 Sql문을 실행하고 Object 객체를 View에 리턴하여 전달한다.

📑 boardController.java

@RequestMapping("/boardList.do")
public @ResponseBody List<Board> boardList(){
    List<Board> list =boardmapper.getLists();

    return list; // 리턴이 객체를 리턴함
}

3. View 화면에서 자바에게 Json 타입 데이터를 보내주는 Jquery 문과 $ajax 작성

📑 main.jsp

- 처음페이지가 시작될시 loadList()함수를 실행

- function loadList 함수 $.ajax를 사용해 JAVA서버와 통신하여 게시판 리스트 객체(VO) 가져오기

ㄹ

$(document).ready(function(){
    loadList();
});

function loadList(){
    $.ajax({
        url : "boardList.do", //1 . java 요청
        type : "get",	//get방식으로
        dataType :"json", // Json타입의 데이터를 자바에 전달한다.
        success : makeView, //2 . java에서 리턴(응답)되는 것이 콜택함수로 이동.
        error : function(){ alert("error"); }
    })
}

- 위의 객체 바인딩 성공시 수행되는 함수

- json으로 만들어진 데이터를 받아서 처리할 것이 필요.

- 게시판 리스트를 동적으로 만들어서 뿌려준다.

data =[{"name":"value"},{"name":"value"},...]

배열 = 0, 1, 2

function makeView(data){ 

    var listHtml = "<table class='table table-boardered'>";
        listHtml += "<tr>";
            listHtml += "<td>번호</td>";
            listHtml += "<td>제목</td>";
            listHtml += "<td>작성자</td>";
            listHtml += "<td>작성일</td>";
            listHtml += "<td>조회수</td>";
        listHtml += "</tr>";


        //반복문 
        // 인덱스와 데이터(객체)를 받아준다.
        // 객체의 속성에 접근 (.)점을 사용한다. 
        $.each(data,function(index,obj){
            listHtml += "<tr>";
                listHtml += "<td>"+ obj.idx +"</td>";
                listHtml += "<td><a href='javascript:goContent("+ obj.idx +")'>"+ obj.title +"</a></td>";
                listHtml += "<td>"+ obj.writer +"</td>";
                listHtml += "<td>"+ obj.indate +"</td>";
                listHtml += "<td>"+ obj.count +"</td>";
            listHtml += "</tr>";
            listHtml += "<tr id='con_" + obj.idx + "' style='display:none;'>";
            listHtml += "<td>내용</td>";

            listHtml += "<td colspan='4'>";
            listHtml += "<textarea rows='7' class='form-control' readonly>"+ obj.content +" </textarea>";
            listHtml += "<br />";
            listHtml += "<button onclick='goUpdate("+ obj.idx +")' type='button' class='btn btn-success btn-sm'>수정</button>&nbsp;";
            listHtml += "<button onclick='goDelete("+ obj.idx +")' type='button' class='btn btn-warning btn-sm'>삭제</button>";
            listHtml += "</td>";
            listHtml += "</tr>";
        });
        listHtml += "<tr>";
        listHtml += "<td colspan='5' align='center'>";
        listHtml += "<button onclick='goForm()' class='btn btn-primary btn-sm'>글쓰기</button>";
        listHtml += "</td>";
        listHtml += "</tr>";
    listHtml += "</table>";

    //$("") 선택자로 접근 하여 table을 넣어준다
    $("#view").html(listHtml);
}

※ $ajax 사용방법

$ajax 에서 데이터를 java에 요청하고 결과를 받아와 성공 후 action을 처리를 해준다.

$ajax{
  type : “post” or “get”,
  url : “요청할 URL”, 
  data : { 서버로 전송할 데이터}, 
  dataType : “서버에서 전송받을 데이터형식”, 
  success : function(서버로부터 데이터 받기){ 
      // 정상 요청, 응답시 처리
  }, 
  error : function(오류정보){ 
      // 오류 발생시 처리 
  }

}

4. 객체 직렬화를 통한 데이터 전달 ! < form > 으로 부터 전달 받은 JSON형태의 데이터를 자바 시스템에서 사용할 수 있도록 Byte형태로 전달

※ 직렬화(Serialize)

자바에서 사용되는 Object 또는 Data를 외부의 자바 시스템에서도 사용할 수 있도록 byte 형태로 데이터를 변환한다.