Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

DeFacto-Standard IT

AJAX REST API Request 본문

JavaScript

AJAX REST API Request

defacto standard 2017. 11. 16. 23:11

AJAX를 사용하여 REST API에 Request를 요청하고, Response를 출력한다.


ajax, jquery를 검색해보기도 하고, 공식문서도 봤는데 나처럼 영어가 약하고 많이 사용하지 않은 사람들은 이해하는데 시간이 걸린다.

문제는 시간걸려서 봐도 모르겠다는것.


주석도 친절하게 일일이 달려있는 예제도 얼마 없어서, 혼자 실험하다가 알아낸거 포스팅한다.

깊이있는 공부를 하지 않은 책임은 본인에게 있다.


참고로, 이 포스팅은 웹프레임워크인 Spring과 웹프로그래밍에 관련된 CSS, HTML, JavaScript를 어느정도 알고있다는 가정하에 포스팅한 것이므로 웹프로그래밍만 공부하고 Spring을 따로 공부하지않았다면 뭔소린지 모를수도 있다.


그 이유는 내가 위에껀 다 공부했는데 프론트엔드 기술인 JQuery를 사용한 AJAX는 모르기때문.


다음은 REST API를 제공하는 RestController이다. AJAX로부터 Request를 받아서 Response를 리턴하는 것이다.Annotation이 @Controller가 아니고 @RestController를 쓴 이유는 JSON 포맷으로 response를 넘기기 위함이다. 따라서 Model 클래스에 Serializable Interface를 implements해야한다.


@RestController는 HTTP ResponseBody에 Object를 Serialization하여 자동으로 넣기 위한 @ResponseBody 어노테이션이면서,

동시에 @Controller 어노테이션 역할을 합친 것.

이는 AJAX보단 Spring과 RESTful API에 관련된 사항이므로 자세한 내용은 따로 공부를 하기 바란다.

@RestController
@RequestMapping("/rest/reply")
public class ReplyController {
 
    ...
  
    @RequestMapping(value = "/{boardno}", method = RequestMethod.GET)
    public ResponseEntity<List<ReplyVO>> getRepliesByBoardNo(@PathVariable(value = "boardno") int boardNo) {
 
        List<ReplyVO> replies = replyService.getRepliesByBoardNo(boardNo);
        return new ResponseEntity<List<ReplyVO>>(replies, HttpStatus.OK);        
    }
}

replyService에서 게시판번호를 기준으로 reply리스트를 JSON 포맷으로 Serialization하여 response로 반환한다.


다음은 AJAX를 사용하여 서버에 특정 URL로 Request를 보내고 response를 받아서 출력하는 jsp이다.

<%@ page language="html" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<title>Insert title here</title>
</head>
<body>

    <h1>Board Read Page</h1>
 
    <h1>${boardVO.boardno}</h1>
    ...
 
    <script type="text/javascript">
        $.ajax({
            type : 'GET', // GET방식으로 요청
            url : '/rest/reply/' + ${boardVO.boardno}, // Request보낼 URL
            success : function(data) { // 성공적으로 수행 시 response를 data라는 인자로 받는다.
                alert("AJAX Success!");
                
                //자바스크립트 객체에 data의 0번째 배열에서 content에 해당하는 텍스트값을 저장
                var description = $('<p>').text(data[0].content);
                // 자바스크립트 객체를 id값이 'replyarea'인 태그에 html을 그림
                $('#replyarea').append(description); 
            },
            error : function() { // 실패시
                alert("AJAX Failed!");
            }
        });
    </script>
    
    <!-- id값이 'replyarea'인 태그, 실질적으로 여기에 그리게 된다. -->
    <div id="replyarea"></div>
</body>
</html>

우선, AJAX를 사용하기 위해서는 8번 코드가 있어야 한다.

15번 라인의 Expression Language 역시 다른 Controller에서 Model객체에 담아서 넘긴 것.


AJAX를 사용하기 위해서 18번 라인처럼  태그를 작성하고 그 안에 작성을 해야한다.

전체적으로 $.ajax(); 를 사용한다.


몇가지 옵션을 줄 수 있다. 이 옵션이 AJAX를 처음사용하는 사람들이 가장 무슨소린지 모를만한 요소이다.


type - Request를 어떠한 방식으로 줄 것인가에 대한 RequestMethodType옵션. Controller가 받을 MethodType에 맞춰서 적는다. 여기서 RestController는 GET방식으로 동작하기 때문에 GET으로 값을 준다.

url - Request를 보낼 URL. Expression Language를 사용하여 'boardno'를 PathVariable로 넘긴다. RestController에서는 이를 인자로 받는 부분이 있다. (@PathVariable)

success - 성공 시에 행동할 함수를 기술한다.

error - 실패 시에 행동할 함수를 기술한다.

함수는 보통 Anonymous Function으로 기술하여 헷갈릴 수 있지만, 결국 자바스크립트이다. 따로 함수를 빼고 함수명만 기술하여도 똑같이 작동한다. 함수의 인자로는 data인데, 인자명이 data일 뿐 사실 Response이다. 바로 여기에 JSON 데이터가 들어있다.


여기선 안쓰였지만 자주 쓰이는 옵션 2가지는

1. dataType - 받는 Response에 대한 dataType을 의미한다. 'json'을 값으로 주면 JSON 포맷으로 받는다는 말이다. response의 값을 ajax요청 후 다시 사용 할 때 자료의 포맷을 결정하므로 값을 받아서 쓸 일이 있다면 기술한다.


2. data - Request에 담아서 보낼 자바스크립트 data객체를 의미한다. JSON 포맷으로 기술하여 서버에 보내면 서버에서는 보통 DeSerialization을 하여 DataBinding 후 객체를 사용한다.

예를 들면

var datas = JSON.stringify(객체);    라는 문장을 ajax호출 전에 기술하면

datas라는 변수에 '객체'의 내용이 JSON포맷으로 들어간다.  Controller에서는 이를 @RequestBody를 사용하여 받는다.


var datas = JSON.stringify(객체);

$ajax(

...

data : datas ,

...

);

 

와 같이 주면 된다.


자바스크립트 객체 description에 <p>태그를 그리고,

이어서 response로 넘어온 data의 0번째 요소에서(RestController에서 replies라는 List객체를 Response에 JSON 포맷으로 넘겼기 때문에 배열의 형태로 Serialization되어있다.), content에 해당하는 key값에 대한 value를 그린다.


즉, description 변수에는 "<p>value" 라는 html태그가 들어간 것.


셀렉터를 이용하여(셀렉터는 css와 관련있는 내용) id값이 replyarea인 태그에 추가한다는 의미의 append()함수를 쓰고, 인자를 description 객체를 넘긴다.


이는 결국 <div id="replyarea">___ </div> 태그의 innerHTML속성(div태그의 밑줄친 부분)에 "<p>value" 라는 값을 추가한것과 동일한 결과를 가져온다. 따라서 <div>태그 쪽에 data[0].content 에 대한 내용이 그려지는 것이다.

저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

JQuery를 사용한 AJAX 옵션  (0) 2017.11.23
자바스크립트 ajax요청 후 JSON객체 사용하기  (0) 2017.11.16
'JavaScript' Related Articles more
Comments