[Web] 웹 개발에서 JSON 처리와 비동기 요청 활용: jQuery와 AJAX로 데이터 전송하기

1. Model-Controller 구조 → 서비스

: Model은 데이터를 다루고, Controller는 사용자의 요청을 처리

: Service는 비즈니스 로직을 담당

: 데이터 처리와 요청을 효율적으로 관리하기 위해 이 구조를 사용, Controller는 Service와 Model을 연결하는 중요한 역할!

이번 프로젝트는 Controller니 열심히 공부해보기...

 

2. JSON의 중요성

• JSON : JavaScript Object Notation

: 데이터 교환 형식으로, 사람이 읽고 쓰기 쉽고, 기계가 분석하고 생성하기에 용이한 텍스트 기반의 데이터 포맷

: JSON은 .xml을 대체하며, 웹 개발에서 데이터를 교환하는데 중요한 역할

: XML은 태그 기반이라 복잡

: JSON은 맵 형태로 되어 가독성이 좋고 사용이 간편

• JSON vs XML

: XML → 데이터가 태그로 감싸져 있어 구조가 복잡하고 읽기 어려움

: JSON → 키-값 쌍으로 데이터를 표현, 더 직관적이고 간결

 

3. JSON 활용 예시

: 데이터를 객체 형태로 처리 가능

: 사용자가 입력한 값을 JSON 객체에 담아 서버로 전달 가능

JSONObject result = new JSONObject();
result.put("apple", "사과");
result.put("banana", "바나나");
out.print(result);

: JSON 객체를 KEY와 VALUE로 구성하여 데이터를 처리 → 서버와 클라이언트 간 데이터 전송이 더욱 효율적

 

4. 폼 전송 및 비동기 처리

• 폼 데이터를 submit 하는 대신, 비동기 적으로 데이터를 서버로 보내기 위해 AJAX를 사용

$.ajax({
    type: "GET",
    url: "/search",
    data: { searchkeyword: searchKeyword },
    success: function(response) {
        console.log("서버 응답: ", response);
    }
});

 

: 비동기 요청은 페이지를 새로 고침하지 않고 서버와 데이터를 주고받을 수 있어 사용자 경험을 개선하는데 유리

 

5. jQuery 라이브러리

• jQuery는 JavaScript의 기능을 간소화, DOM 요소를 쉽게 다를 수 있게 도와주는 라이브러리. 갤러리 예제나 애니메이션 처리 등 다양한 기능 제공

: toggle() 함수는 특정 클래스를 추가하거나 제거

: trigger() 함수는 특정 이벤트를 강제로 실행 가능

 

6. 데이터 전송 및 처리 흐름

• 서버로 데이터를 GET 방식으로 보낼 때, 폼 데이터를 JSON 형식으로 변환하여 전송 가능

• 사용자가 입력한 searchKeyword를 받아와서, 해당 값을 JSON 객체로 처리하고 서버에서 결과로 반환

String searchKeyword = request.getParameter("searchkeyword");
System.out.println("백엔드에서 받은 키워드: " + searchKeyword);