ajax 통신 개념정리

참고 블로그

webdevtechblog.com/ajax-%EC%9D%98-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8%EC%99%80-%EC%84%9C%EB%B2%84-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%86%B5%EC%8B%A0-d681c905e2a9

AJAX 의 클라이언트와 서버 비동기 통신

jinbroing.tistory.com/99

[자바스크립트] Ajax 통신

---

목표

JQuery의 Ajax를 이용해서 클라이언트와 서버간의 비동기 통신방법에 대해서 배워봅시다.

서론

개발을 하다보면 화면전환(Refresh) 없이, CRUD를 처리해야하는 상황이 생깁니다. 그럴때 편리하게 사용할 수 있는게 JQuery의 Ajax를 이용해서 비동기 통신을 하면 가능합니다. 제가 자바와 스프링을 이용하여 웹 개발을 하면서 공부한 내용을 정리하여 공유하고자 합니다.

 

 

[Ajax란]

- 자바스크립트를 이용해서 비동기적으로 브라우저와 서버가 데이터를 주고 받는 방식을 말함

- 새로운 언어나 프레임워크, 라이브러리가 아님, 네트워크 통신 방식을 말함

- Asynchronous Javascript and XML : 자바스크립트로 비동기 통신을 하고, XML 형식으로 데이터 리턴을 받는다는 뜻

- XML 데이터보다 JSON 데이터 포멧을 훨씬 더 많이 사용함

- 자바스크립트를 통해서 서버에 요청을 하고, 서버로부터 데이터를 리턴받음

- DOM을 제어해서 서버로부터 리턴받은 데이터를 가지고 랜더링함

 

[Ajax 사용하면 좋은 점]

- 비동기 통신의 이점 : 통신 후 데이터 바인딩하는 동안 사용자가 어플리케이션을 사용할 수 있음

- 전체 페이지 로딩(페이지 요청)시 모든 데이터를 서버로부터 받는 것이 아니라 필요한 부분을 그때마다 일부분 랜더링 시키는 것이 가능함

- 일부 데이터를 위해 클라이언트가 전체 페이지를 요청하지않아도됨

- 다시 말해 통신 때마다 페이지 전체 리로드를 하지 않음, 그 말은 브라우저 랜더링 엔진이 하는 일이 줄어든다는 것

- 이를 클라이언트 사이드 랜더링이라 함

클라이언트에서 서버로 데이터 전달

Ajax 를 사용하는데 있어 주로 사용되는 데이터 포맷은 CSV, JSON, XML 형식이 있다.(XML 만 사용하는 것이 아니다.) 

GET, POST, DELETE, UPDATE 등 일반적인 HTTP 요청을 이용해 CRUD 를 처리하며 REST API 와 궁합이 잘맞는다. 

 

클라이언트에서 서버로 데이터를 전송하려는 데이터들은 form 안에 위치하게 됩니다. 주로 input type들이서버로 전송해야할 데이터들입니다. 그리고 우리는 JQuery를 이용해서 form안에 있는 데이터들을 Ajax를 이용해 비동기 방식으로 서버로 전송하게 됩니다.

서버는 클라이언트에서 보낸 데이터를 받아 처리하고 비동기의 데이터 타입에 알맞은 반환을 해야합니다. 이렇게 서로 다른 언어간 데이터를 주고 받기 위해서는 특정한 문법이 필요한데 대표적인게 JSON 혹은 XML을 이용하게 되는데 JSON이 보편적이고 데이터 교환에 있어서 편리합니다.

이와 같은 과정을 진행하기 위해서는 차근차근 로직을 세우고 이해해야합니다. 그럼 저와 같이 로직을 세워보겠습니다. (참고로 제가 세운 로직보다 더 좋은 로직이 있을 수 있으며, 혼자 로직을 세워보는 습관을 들이는게 좋습니다.)

 

[Ajax 동작방식]

1) 서버로 정보 요청 : 이벤트 발생 -> 핸들러 함수 호출 -> 서버 요청 객체 생성 및 메서드 호출

2) 서버 내부 처리 후 응답 : json 또는 xml 형태로 데이터 전달

3) 응답을 받으면 이벤트 발생(onload), 이벤트의 콜백함수 호출

로직(Algorithm)

• 비동기 처리를 위해서 Ajax를 사용한다.
• GET 방식인지 POST 방식인지 정한다.
• 클라이언트가 서버로 보낼 데이터를 만들어 보낸다 : GET의 경우 전달할 데이터값이 있으면 보내야할 URL에 쿼리스트링 또는 data에 키와 밸류를 선언해서 보낸다. POST의 경우 폼에 있는 데이터를 서버로 전송하기 위해서 formData와 serialize를 사용한다.
• 서버에서 클라이언트로 보내야할 dataType을 정한다.
  
  

---

다음 포스팅에서 STS DynamicWebProject 로 다양한 형태(QueryString, json) Ajax예시를 만들어보겠습니다