[Web] 웹 개발에서 동기 요청과 비동기 요청: GET, POST, 그리고 jQuery 활용법

1. 동기 요청 vs 비동기 요청

✴︎ 동기 요청(GET)

: 페이지를 새로 로드하면서 서버에 데이터를 요청하는 방식

:요청이 완료될 때까지 페이지가 멈추며, 완료 후 화면이 새로 랜더링 됨

Ex) 웹툰 페이지 이동

 

✴︎ 비동기 요청(POST)

: 페이지를 새로 로드하지 않고, 서버와 데이터 통신을 하면서도 화면을 유지하는 방식

: 데이터를 비동기적으로 서버에 전송하고 그에 대한 응답을 받아오는 방식

Ex) 회원가입, 실시간 지도 검색, 폰 검색

 

2. GET과 POST의 사용 상황

✴︎ GET : URL을 통해 데이터를 서버로 요청. 페이지 이동이 필요할 때 사용

✴︎ POST : 서버로 데이터를 전송할 때 사용되며, 페이지 이동 없이 데이터를 전송하고 응답을 받음

Ex) 회원가입 폼을 제출 할 때, 비동기적으로 서버에서 

 

3. jQuery를 활용한 비동기 처리

✴︎ $.ajax{} 메서드를 통해 비동기 요청을 처리할 수 있으며, 페이지를 새로고침하지 않고, 데이터를 서버에서 받아온 후 UI를 갱신 가능

✴︎ jQuery는 JavaScript의 간결한 문법을 제공하여 비동기 요청을 간편하게 구현할 수 있게 도움

 

4. 웹 서버와 비동기 처리

✴︎ Backend에서 데이터를 처리할 때 @WebServlet을 사용하여 요청을 처리 가능

✴︎ 서버와 클라이언트 간의 데이터 통신을 효율적으로 구현 가능

Ex) 사용자가 입력한 아이디를 서버에서 비동기적으로 확인하여 "아이디 사용 가능/불가"를 실시간으로 보여주는 기능

 

5. 비동기 요청을 활용한 데이터 정렬

✴︎ 비동기 요청을 이용하여 실시간으로 데이터를 정렬하거나 페이지를 새로고침하지 않고 다른 조건으로 데이터를 조회하는 기능을 구현 가능

Ex) 기본 SELECTALL 을 제외한 다른 조건을 통해 데이터를 비동기적으로 조회하여 결과를 화면에 표시

 

예제

$.ajax({
   type: "POST",
   url: "/day034/check",
   data: { mid: mid },
   dataType: "text",
   success: function(response) {
       console.log("비동기 처리 성공[" + response + "]");
       if (response == "true") {
           result.text("아이디 사용 가능");
           result.css("color", "green");
       } else {
           result.text("아이디 사용 불가");
       }
   },
   error: function() {
       console.error("비동기 처리 실패");
   }
});