수업/└Spring Framework

[05]REST & Ajax_개념

onlyun 2022. 3. 10. 15:55

*프로젝트 실습*

https://exploreryun.tistory.com/manage/newpost/319?type=post&returnURL=https%3A%2F%2Fexploreryun.tistory.com%2F319

 

1. AJAX

서버측 Script와 통신하기 위해 XMLHttpRequest 객체 사용. 서버와 데이터 교환.

페이지 전체를 리프레쉬(Refresh)하지 않고서도 수행. 비동기적으로 전체 페이지가 아니라 일부분만 업데이트.

(*TCP-SCHOOL.COM [ http://www.tcpschool.com/ajax/ajax_intro_basic ] 참고)

(*https://exploreryun.tistory.com/283?category=1001611)

(1) AJAX 문법 - jQuery

//비동기 AJAX 요청 수행
$.ajax({name:value, name:value, ...})

//향후 AJAX 요청에 대한 기본 값 설정
$.ajaxSetup({name:value, name:value, ...})

-name이 매개변수로 주어지는 영역 역할

url data type dataType
request 요청할  URL
(필수)
서버에 전송할 데이터 GET, POST 응답받을 데이터 형식
(text, html, js, json)
success error complete async
request 응답 정상일 때
동작하는 콜백 함수
request 응답 비정상일 때
동작하는 콜백 함수
콜백 함수 완료 후
실행할 함수
동기 | 비동기 지정
(Boolean)

-success(data, status, xhr) : ajax 성공 이벤트 리스터 지정(function, array)

-error(error, status, xhr)

-complete(xhr, status)

 

(1-1) 기존 문법

$.ajax({
	type : 'post',  //다양한 통신 메소드 타입 - post, get, put 등등
    url : '/test',  //전송할 데이터를 요청할 서버 url
    async : true,  //동기화 여부(default : true)
    header : { //Http header - 헤더에 필요한 정보를 넣어줌
    	"Content-Type" : "application/json",
        "X-HTTP-Method-Override" : "POST"
        },
	dataType : 'text',  //리턴 데이터 타입(돌려받을 데이터타입) - html, xml, json, text ...
    data : JSON.stringify({  //보낼 데이터형(object, String, Array)
    	"no" : no,
        "name" : name,
        "nick" : nick
    }),
    success : function(result){ //결과 성공 콜백함수
    	console.log(result);
    },
    error : function(result){ //결과 에러 콜백 함수
    	console.log(result);
    }
})

└dataType : 게시물이면 BoardVO, 메시지일 때 text

 

(1-2) 최신 AJAX 문법

$ajax( "/text",
	{
    method : 'get',
    data : {name : "chan"},
    dataType : 'json'
    }
)
.done(function(){  //서버요청이 성공했을때 콜백 함수
	alert("success");
});
.fail(function(){  // 서버 요청이 실패했을때 콜백 함수
	alert("error");
});
.always(function(){  //항상 실행(try/catch의 finally 느낌)
	alert("complete");
});

2. REST 개념

컨트롤러와 response 합친 것.

하나의 URI는 하나의 고유한 리소스(Resource)를 대표 + 전송 방식 결합 = 원하는 작업 지정

 

스프링4부터는 @Controller외에 @RestController라는 Annotation을 추가해서 해당 Controller의 모든 메소드의 리턴 타입을 기존과 다르게 처리한다는 것을 명시.

@RestController메소드 리턴 타입으로 사용자가 정의한 클래스 타입을 사용할 수 있고 이를 JSON이나 XML로 자동 처리

 

(2-1) 웹 서비스

  과거 현재
전송방식 get, post get, post, put, delete
  고정된 브라우저 주소창 URI + 식별 데이터

 

(2-2) Annotaion

@RestController Controller와 ResponseBody 합친 것. 뷰 필요없이 값만 리턴할 때 사용.
@PathVariable URL 경로에 리소스를 직접 넣어주는 방법
@RequestBody JSON 데이터를 객체로 변환. <form> 방식으로 처리된 데이터.
@ResponseBody 데이터 자체를 전달(일반적 JSP와 같은 뷰로 전달되는 것 아님)
@CrossOrigin react랑 spring 연결 또는 안드로이드와 스프링 연결할 때 볼 수 있음.
스프링에서 어떤 URI를 가진 것을 통과시켜주는 것. 서버를 톰캣, 노드.js냐에 따라 URI 허용

 

(2-3) 반환 타입

String | Integer 등의 타입 사용자 정의 타입 responseEntity<> 타입
    주로 사용

 

(3) JavaScript 모듈


【 REST Controller 】

지금까진 값을 웹브라우저에 던지거나 jsp파일인 뷰로 리턴했는데 오늘은 값을 직접 던지는 작업.

3. REST - 연습

-REST Controller 사용해서 해볼 것.

-리턴 타입 : xml(기본), json, list, map 등등

 

(0) 연습용

(0-1) VO 생성

-위치 : com.wsy.webboard.domain

-클래스 이름 : SampelVO

package com.wsy.webboard.domain;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor  //default 생성자
public class SampleVO {
	private int mno;
	private String firstName;
	private String lastName;
}

 

(0-2) Controller

-위치 : com.wsy.webboard.controller

-이름 : SampleController

 

(0-3) 프로젝트 실행

>> 웹 브라우저에서 출력

xml 방식으로 출력
json 방식으로 출력

 

>> postman 

(json, xml, gson 코드를 pom.xml에 넣어두었기 때문에 처리가능)

xml 방식
.json 붙이면 제이슨 방식으로 출력

 

 

(2) ArrayList<> 타입 리턴

(2-1) SampleController

@GetMapping("getSampleList") //uri
public List<SampleVO> getList(){
	List<SampleVO> list = new ArrayList<SampleVO>();
	for(int i=0; i<10; i++) {
		list.add(new SampleVO(i, "first_"+i, "last_"+i));
	}
	return list;
}

(2-2) postman 출력

 

(3) Map 타입 리턴

(3-1) SampleController - 

@GetMapping("getSampleMap")
public Map<String, SampleVO> getSampleVO(){
	Map<String, SampleVO> map = new HashMap<String, SampleVO>();
	map.put("first", new SampleVO(1, "GilDong", "Hong"));
	map.put("second", new SampleVO(2, "GilDong", "Kim"));
	return map;
}

(3-2) postman

 

(4) ResponseEntity

데이터 + HTTP 상태 코드 등을 브라우저에 전달

HTTP 상태 정보를 보내야 하는 이유(REST)를 쓰 이유. 웹이 정상적으로 작동하는지 확인하기 위해.

(4-1) SampleController

@GetMapping(value="check", params={"height", "weight"})
public ResponseEntity<SampleVO> check(Double height, Double weight){
	SampleVO vo = new SampleVO(1, "aaaa", "bbb");
	ResponseEntity<SampleVO> result = null;
	if(height < 150) {
		result = ResponseEntity.status(HttpStatus.BAD_GATEWAY).body(vo);
	}else{
		result = ResponseEntity.status(HttpStatus.OK).body(vo);
	}
	return result;
}

(4-2) 웹 브라우저에서 실행

웹 브라우저에서 [f12]눌러서 '네트워크'에서 확인. 상태 200이면 정상

http://localhost:8081/sample/check.json?height=150&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;weight=50
http://localhost:8081/sample/check.json?height=100&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;weight=50

 

*빅데이터할 때

데이터 분석 : 파이썬, 장고로 하고, 웹 출력 : 스프링을 함. 각 프로그램이 잘하는 것이라.

그래서 데이터를 프로그램끼리 데이터를 주고받아야 함.

 

(5) @PathVarible

(5-1) sampleController

	@GetMapping("product/{cat}/{pid}")
	public String[] getPath(@PathVariable("cat") String cat, @PathVariable("pid") String pid) {
		return new String[] {"category: "+ cat, "productID: "+pid};
	}

(5-2) 웹 브라우저 실행

제이슨 방식 : http://localhost:8081/sample/product/bags/1234.json
기본(xml) : http://localhost:8081/sample/product/bags/1234

 

(6) @RequestBody

전송된 데이터가 JSON이고, 이를 컨트롤러에서는 사용자 정의 타입의 객체로 변환할 때 사용

 

 


- 코드 -

clone_coding.zip
5.74MB

 

 

댓글 기능 추가 안 된 버전

END