반응형

전자정부프레임워크에서 Ajax를 활용하여 비동기 통신 기능을 구현하는 방법을 학습합니다. Ajax는 웹 페이지를 새로고침하지 않고도 서버와 데이터를 주고받을 수 있도록 하며, 사용자 경험(UX)을 크게 향상시킵니다.

1. Ajax 개요

Ajax (Asynchronous JavaScript and XML)

  • Ajax는 JavaScript를 사용하여 서버와 비동기적으로 데이터를 주고받는 기술입니다.
  • XML뿐만 아니라 JSON이나 일반 텍스트 데이터도 주고받을 수 있습니다.

2. 서버 설정

Ajax 요청을 처리하기 위한 간단한 컨트롤러를 작성합니다.

2-1. Ajax 요청 처리 컨트롤러

AjaxController.java

import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/ajax")
public class AjaxController {

    @GetMapping("/getData")
    public String getData(@RequestParam("param") String param) {
        return "서버로부터 받은 데이터: " + param;
    }

    @PostMapping("/postData")
    public String postData(@RequestBody String data) {
        return "POST 요청 처리 완료: " + data;
    }
}

2-2. JSON 데이터 응답 컨트롤러

AjaxJsonController.java

import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/ajax")
public class AjaxJsonController {

    @GetMapping("/getJson")
    public Map<String, String> getJson() {
        Map<String, String> response = new HashMap<>();
        response.put("message", "JSON 데이터 전송 성공");
        response.put("status", "200");
        return response;
    }
}

3. 클라이언트 설정

3-1. jQuery를 이용한 Ajax 요청

ajaxExample.jsp

<!DOCTYPE html>
<html>
<head>
    <title>Ajax Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Ajax 예제</h1>

    <!-- GET 요청 -->
    <button id="getRequest">GET 요청 보내기</button>
    <p id="getResult"></p>

    <!-- POST 요청 -->
    <button id="postRequest">POST 요청 보내기</button>
    <p id="postResult"></p>

    <!-- JSON 요청 -->
    <button id="getJsonRequest">JSON 데이터 요청</button>
    <p id="jsonResult"></p>

    <script>
        // GET 요청
        $("#getRequest").click(function () {
            $.ajax({
                url: "/ajax/getData",
                type: "GET",
                data: { param: "테스트 데이터" },
                success: function (response) {
                    $("#getResult").text(response);
                },
                error: function () {
                    $("#getResult").text("GET 요청 실패");
                }
            });
        });

        // POST 요청
        $("#postRequest").click(function () {
            $.ajax({
                url: "/ajax/postData",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify({ test: "테스트 데이터" }),
                success: function (response) {
                    $("#postResult").text(response);
                },
                error: function () {
                    $("#postResult").text("POST 요청 실패");
                }
            });
        });

        // JSON 요청
        $("#getJsonRequest").click(function () {
            $.ajax({
                url: "/ajax/getJson",
                type: "GET",
                success: function (response) {
                    $("#jsonResult").text("JSON 응답: " + JSON.stringify(response));
                },
                error: function () {
                    $("#jsonResult").text("JSON 요청 실패");
                }
            });
        });
    </script>
</body>
</html>

4. Ajax 기능 테스트

4-1. GET 요청 테스트

  1. GET 요청 보내기 버튼을 클릭합니다.
  2. 결과 영역에 서버에서 전송된 데이터가 표시됩니다.

4-2. POST 요청 테스트

  1. POST 요청 보내기 버튼을 클릭합니다.
  2. 결과 영역에 서버 처리 결과가 표시됩니다.

4-3. JSON 요청 테스트

  1. JSON 데이터 요청 버튼을 클릭합니다.
  2. 결과 영역에 JSON 응답이 표시됩니다.

5. Ajax 구현 시 유의사항

  1. Cross-Origin Resource Sharing (CORS)
    • Ajax 요청 시 다른 도메인에 요청하는 경우, 서버에서 CORS 설정이 필요합니다.
    @Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*");
    }
}
  2. 보안
    • CSRF 공격을 방지하기 위해 토큰 기반 인증을 사용합니다.
  3. 에러 처리
    • 서버 응답 코드를 기반으로 클라이언트에서 적절한 에러 처리를 구현합니다.

6. 마무리

오늘 학습한 Ajax를 활용한 비동기 통신 기능은 웹 애플리케이션에서 빠르고 유연한 사용자 경험을 제공하는 핵심 기술입니다. 다음에서는 RESTful 웹 서비스 개발에 대해 학습합니다.

반응형
저작자표시

'개발 > 전자정부프레임워크' 카테고리의 다른 글

Spring Security를 활용한 인증 및 권한 관리  (0) 2024.12.26
RESTful 웹 서비스 개발  (0) 2024.12.25
전자정부프레임워크에서 로그 기능 및 예외 처리 구현  (0) 2024.12.25
전자정부프레임워크에서 파일 업로드 및 다운로드 구현  (0) 2024.12.24
전자정부프레임워크에서 공통 코드 관리 및 메시지 처리  (2) 2024.12.24

+ Recent posts

티스토리툴바