Day92 - [Jquery]비동기통신. ajax

이번에는 Jquery 의 비동기통신 방법인 ajax 에 대해서 알아 봅시다

 

ajax

비동기 통신은 페이지의 이동없이 서버와 데이터를 주고 받는 것을 의미 합니다.

 

예를 들면, 실시간 으로 되는 것들이 있겠네요

 

java script 에서는 fetch 라는 걸 썻었는데, Jquery 에서는 ajax 라는 걸 사용하면 됩니다.

 

이번에는 어제 배운 REST API 를 이용해서, 비동기 서버를 만들고, 만든 비동기 서버에 접속해서 데이터를 가져와 볼겁니다.

 

실습하는데 필요한 건, 이클립스 , 서버(Tomcat) , visual studio code 가 되겠습니다.

 

서로 다른 툴을 사용하는 이유는, 서버를 다르게 하기 위해서 입니다. 현재 이클립스는 8181 포트, vs code 는 5501 포트 를 실행하게 되어 있어서, 서로 서버가 다릅니다. ( 기본적으로, Tomcat 은 8080포트, vs code는 5501 포트 )

 

먼저, REST API 를 이용해서 비동기통신으로 접근할 수 있는 서버를 만들어 줍시다.

 

REST API 를 사용할 때는, 컨트롤러 의 위에 @RestController 를 작성 해주면 됩니다.

그리고 아래에서 비동기 서버를 가지고 있는 내 데이터에 접근할 수 있도록 메서드를 만들어 줍니다.

※ 비동기 통신을 할 때는 기본적으로 json 형식으로 받고, json 형식으로 보냅니다.

 

JAVA 에서는 JSON 이라는 것을 모르기 때문에, jackson 라이브러리를 추가해줘야 합니다.

저는 Spring 환경에서 사용하고 있기 때문에, 아래의 코드를 "pom.xml" 에 추가한 후 메이븐 업데이트를 합니다.

 

이렇게 작성을 해주었다면, vs code 에 들어가서 위의 데이터를 받아 봅시다.

 

Jquery 에서는 ajax 를 사용해주면 된다고 했죠?

 

아래처럼 사용해주면 됩니다.

ajax 에는 {} 를 이용해서 속성을 넣어주어야 하는데요,

type 에는 get , post 가 들어갑니다 ( 비동기 서버에서 어떤 Mapping 인지 )

url 에는 비동기서버의 주소가 들어갑니다. ( 내 서버더라도 앞에 "http://" 붙여야 합니다. 서버가 다르기 때문에 )

dataType 는 비동기통신을 하고 받을 데이터는 어떤 형식으로 받을건지에 대한 것 입니다.

contentType 은 내가 보내는 데이터의 타입 입니다.

data 는 보내는 데이터로써, JSON.stringify 를 이용해서 문자열로 보내줍니다 ( 이유는 웹 페이지는 객체를 모르고 문자열만 알고 있기 때문에 )

success : function(data) { } : 성공시 결과를 data 에 넣어주고 해당 함수를 실행 합니다.

error : function(status, error) {} : 실패시 서버의 상태를 status 에 , 에러의 내용을 error 에 넣어주고, 해당 함수를 실행 합니다.

 

이제 해당 페이지를 실행 해주세요. ( 이클립스의 Tomcat 서버는 실행되어 있어야 합니다. )

 

그런데, 이렇게 하면 아래와 같은 에러가 납니다.

REST API 는 자동적으로, 서버가 다르면 차단하도록 되어 있기 때문에, REST API 를 사용하는 메서드에서 다른 서버에서 접근할 수 있도록 열어주어야 합니다. ( 이는 데이터의 보안이 떨어지는 것 이기 때문에 이러한 과정이 필요 )

 

@CrossOrigin 을 사용하면 되는데요 매개변수로 들어가는 origins 에는 어떤 서버를 열어 줄건지. *를 사용하면 모든 서버를 허용하겠다는 뜻 입니다.

그래서 아래처럼.

이제 서버를 다시 실행한 후, 요청을 한다면 아래와 같이 나오게 됩니다.

비동기 서버에서 return 되는 list(이순신) 을 받아왔죠 ?

 

이클립스의 비동기 서버에서는 아래와 같이 ajax 에서 보낸 데이터를 확인 할 수 있습니다.

이렇게 Jquery 의 비동기통신 ajax 에 대해서 알아 보았는데요, 이번에는 json 으로 데이터를 받아오지 말고, xml 으로 받아와 봅시다.

 

먼저, JAVA 에서 xml 로 데이터를 반환하기 위해서는 아래의 라이브러리가 필요 합니다.

그리고, 비동기 서버를 담당하는 컨트롤러에 아래와 같이 메서드를 작성 합니다.

consumes 는 받을 데이터에 대한 타입

produces 는 반환하는 데이터에 대한 타입

 

vs code 에서는 아래와 같이 보내줍니다.

그저 위의 json 으로 보내는 방법에서, url , dataType 이 조금씩 바뀌었을 뿐 입니다.

 

그리고, 아래처럼 데이터를 반환 받을 수 있습니다.

 

이렇게, 비동기통신 ajax 와 REST API 를 간단하게 사용해 보았습니다.

 

고생 하셨습니다.