[ Spring ] 7. ajax

AJAX

• Asynchronous JavaScript And XML
• http는 동기적 통신 방식이다. 
• 자바스크립트는 내부의 ajax 엔진을 이용해서 비동기식으로 서버와 통신한다.
• XML 혹은 JSON을 사용하나, 최근은 대부분 JSON을 더 많이 사용한다.

 

비동기란?

• 여러가지 일이 동시적으로 발생하기에, 서버와 통신하는 동안 다른 일을 할 수 있다.
• 자바스크립트의 XMLHttpRequest를 제이쿼리의 $.ajax()로 사용할 수 있다.

 

JSON이란

• 자바스크립트에서 객체를 만들 때 사용하는 표현식이다.
• 속성 - 쌍 값으로 이루어진 데이터 객체를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포멧이다.
• 클라이언트와 서버간의 데이터를 주고받을 때 사용할 수 있는 표현의 하나이다.

 

---

 

AJAX 함수 설명

$.ajax({
type: "post",	http 요청방식 (get / post)
url: "serverPage",	서버측 페이지
dataType: "json",	응답데이터 타입설정 (json / xml)
success: function(data) {               콜백함수         }	콜백함수 : 응답결과가 성공상태 코드로 반환되면 호출된다.
error: function(data) {               콜백함수         } })	콜백함수 : 응답 결과가 에러상태 코드로 반환되면 호출된다.

 

 

 

위의 ajax를 받으려면?

@ResponseBody                                         => 내가 받는 건 html 전체가 아니라 body 안의 일부 내용이야 !! @PostMapping("/serverPage") public String getLoginResult(String id) {       String client_auth = "JSON ... ";       return client_result;       => 결과물은 jsp페이지가 아닌 JSON이다. }

 

 

 

 

그런데?

• 자바스크립트는 json을 객체로 인식한다.
• 자바는 json을 일정 형식의 string 으로 인식한다.
• 자바객체를 json형식으로 변환해주는 라이브러리가 필요하다.

 

 

---

 

 

실습

로그인하면 유저가 입력한 값을 ajax로 출력할 것이다.

1. 로그인폼으로 가는 컨트롤러 생성

2. 로그인폼.jsp 생성

3. jQuery로 ajax 설정한다.

 

 

파일 ajax 처리시 주의점

encType=multi/form-data로 설정하지 않으면 모두 하나의 스트링으로 묶어간다.

여기부턴 내일 진행한다.

 

 

1. 컨트롤러

• 멤버 전체 리스트를 반환한다.
• @ResponseBody 사용 이유 : html 전체를 보내는 것이 아닌 body에 담긴 것을 사용해 html의 일부를 바꾸는 것이기에 이 어노테이션을 사용한다.
• value를 굳이 붙이는 이유 : 만약 url만 있다면 안 붙여도 되지만, 뒤에 produces가 있기에 붙여야 한다.
• produces란 : 응답 타입이다. 아래의 Content-Type과 같다.

 

 

 

 

2. 로그인폼 (ajax 처리법)

• 폼 입력하는 곳 !
• ajaxresult라는 id를 가진 div는 json으로 온 값이 들어갈 것이다.

 

 

 

ajax 사용법

1. form으로 온 값 뽑아서 출력하기

• Controller에서 넘기는 것 : process ("로그인 성공" 혹은 "로그인 실패" 문자열 메세지)
• loginajax로 매핑시킨다.
• 타입은 post이다.
• 보내는 건 id값, pw값이다.

 

• 받는 데이터타입은 json이다.
• 성공시 콜백함수로 data.process를 html에 추가한다.
• 실패시 실패 정보가 담긴 alert를 띄운다.

 

 

 

 

2. 객체 출력하기

• Controller에서 넘기는 것 : MemberDTO(만약 id와 pw가 모두 일치할 경우는 입력된 값이 set된 dto를, 그렇지 않은 경우에는 새롭게 생성된 dto(내부값 null)를 넘긴다. )
• myinformajax로 매핑시킨다.
• 타입은 post이다.
• 보내는 건 id값, pw값이다.

 

• json으로 받는다.
• data안에는 dto값이 들어있기에, data.id와 같은 형태로 꺼내서 사용한다.

 

 

 

 

 

3. list 출력하기

• Controller에서 넘기는 것 : List<MemberDTO>(service.memberlist()에서 생성된 dto객체가 담긴 list를  넘긴다. )
• memberlistajax로 매핑시킨다.
• 타입은 post이다.
• data가 없다. 왜냐면 파라미터 없이 모든 데이터를 출력하기 때문에 넘길 데이터가 없기 때문이다.

 

• json으로 받는다.
• data안에는 dto값이 들어있기에, data.id와 같은 형태로 꺼내서 사용한다.
• data는 리스트 형태이지만 자바스크립트에서는 배열로 사용된다.
• data의 length만큼 data[ i ].변수이름을 나오게 하고 - html에 append한다.

 

 

 

 

 

4. @PathVariable 받기

• Controller에서 넘기는 것 : List<MemberDTO> (페이징처리된 dto가 담긴 list)
• memberlistajax로 매핑시킨다.
• 타입은 post이다.
• data가 없다. 왜냐면 파라미터가 아닌 @PathVariable로 넘기기 때문이다.
• @PathVariable은 url에서 /뒤에 오는 것을 말한다. 쿼리 아님!!!
• 여기서는 number input에 입력한 값의 val()을 조회해서 / 뒤에 넣는 방식을 사용했다.

 

• json으로 받는다.
• data안에는 dto값이 들어있기에, data.id와 같은 형태로 꺼내서 사용한다.
• data는 리스트 형태이지만 자바스크립트에서는 배열로 사용된다.
• data의 length만큼 data[ i ].변수이름을 나오게 하고 - html에 append한다.

 

 

 

 

+) 다운받은 파일 경로 설정하기

• 상품이미지명은 first 프로젝트 내부가 아닌 외부 파일 안에 있다. 
• 그래서 servlet-contextdp "/upload/**"를 mapping 해준다.
• url를 입력할 때, http://ip:port/spring/upload/a.jpg 의 형태로 입력해야 한다.

• 항상 다운로드 해주는 건 아니고, 사진이면 보여주고 / js면 코드를 보여주고 / sql이면 다운받거나 그런 식으로 된다.

 

 

 

 

6. AJAX 파일 업로드하기

• encType : 여러 폼데이터
• processData: img1=123&img2=456 이런 식으로 하나의 문자열로 표현하지 않겠다
• contentType : "text/html utf-8" 기본 설정 사용하지 않겠다

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

JSON으로 응답된 값