[AJAX 수업] 7강 - AJAX와 RESTful API

프로그래밍/Ajax

[AJAX 수업] 7강 - AJAX와 RESTful API

월횽 2024. 6. 18. 06:30

728x90

SMALL

AJAX와 RESTful API를 이용한 웹 애플리케이션 개발

안녕하세요, 그레이해커 월횽입니다. 오늘은 AJAX와 RESTful API를 결합하여 웹 애플리케이션을 개발하는 방법을 배워보겠습니다. AJAX를 이용하면 비동기 통신으로 서버와 데이터를 주고받을 수 있고, RESTful API는 이러한 통신을 효과적으로 관리할 수 있도록 해줍니다. 이번 강의에서는 RESTful API의 기본 개념과 AJAX를 이용한 다양한 HTTP 메서드 요청 예제를 다룰 것입니다.

1. RESTful API 개념 이해

REST란?

REST(Representational State Transfer)는 웹 서비스 설계 아키텍처 스타일입니다. 클라이언트와 서버가 HTTP 프로토콜을 사용하여 통신하며, RESTful API는 이러한 통신을 표준화된 방식으로 수행합니다.

RESTful API의 설계 원칙

자원(Resource): URL을 통해 접근할 수 있는 엔티티.
표현(Representation): 자원의 상태를 JSON, XML 등으로 표현.
상태 없는 통신: 각 요청은 완전하고 독립적이어야 합니다.
HTTP 메서드: CRUD 동작을 나타내는 메서드 사용 (GET, POST, PUT, DELETE).

2. AJAX를 이용한 RESTful API 요청

이제 AJAX를 사용하여 RESTful API와 통신하는 방법을 살펴보겠습니다. 각 HTTP 메서드를 사용하는 예제를 다루어 보겠습니다.

2-1. GET 요청

GET 요청은 서버에서 데이터를 가져올 때 사용됩니다. 예를 들어, 블로그 게시물을 가져오는 경우를 생각해볼 수 있습니다.

아래 코드는 /posts 엔드포인트에서 데이터를 가져오는 GET 요청입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GET 요청 예제</title>
    <script>
        function fetchPosts() {
            const xhr = new XMLHttpRequest();
            xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    const posts = JSON.parse(xhr.responseText);
                    console.log(posts);
                }
            };
            xhr.send();
        }
    </script>
</head>
<body>
    <h1>GET 요청 예제</h1>
    <button onclick="fetchPosts()">게시물 가져오기</button>
</body>
</html>

2-2. POST 요청

POST 요청은 서버에 데이터를 전송할 때 사용됩니다. 주로 새로운 리소스를 생성하는 데 사용됩니다.

아래 코드는 /posts 엔드포인트로 데이터를 전송하여 새로운 게시물을 생성하는 POST 요청입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST 요청 예제</title>
    <script>
        function createPost() {
            const xhr = new XMLHttpRequest();
            xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 201) {
                    const newPost = JSON.parse(xhr.responseText);
                    console.log(newPost);
                }
            };
            const postData = JSON.stringify({ title: "foo", body: "bar", userId: 1 });
            xhr.send(postData);
        }
    </script>
</head>
<body>
    <h1>POST 요청 예제</h1>
    <button onclick="createPost()">게시물 생성</button>
</body>
</html>

2-3. PUT 요청

PUT 요청은 서버의 리소스를 업데이트할 때 사용됩니다. 기존 데이터를 수정하는 데 주로 사용됩니다.

아래 코드는 /posts/1 엔드포인트로 데이터를 전송하여 게시물 ID 1을 업데이트하는 PUT 요청입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PUT 요청 예제</title>
    <script>
        function updatePost() {
            const xhr = new XMLHttpRequest();
            xhr.open("PUT", "https://jsonplaceholder.typicode.com/posts/1", true);
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    const updatedPost = JSON.parse(xhr.responseText);
                    console.log(updatedPost);
                }
            };
            const postData = JSON.stringify({ id: 1, title: "foo", body: "bar", userId: 1 });
            xhr.send(postData);
        }
    </script>
</head>
<body>
    <h1>PUT 요청 예제</h1>
    <button onclick="updatePost()">게시물 업데이트</button>
</body>
</html>

2-4. DELETE 요청

DELETE 요청은 서버에서 리소스를 삭제할 때 사용됩니다.

아래 코드는 /posts/1 엔드포인트로 DELETE 요청을 보내어 게시물 ID 1을 삭제합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DELETE 요청 예제</title>
    <script>
        function deletePost() {
            const xhr = new XMLHttpRequest();
            xhr.open("DELETE", "https://jsonplaceholder.typicode.com/posts/1", true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log("게시물 삭제됨");
                }
            };
            xhr.send();
        }
    </script>
</head>
<body>
    <h1>DELETE 요청 예제</h1>
    <button onclick="deletePost()">게시물 삭제</button>
</body>
</html>

이제 AJAX와 RESTful API를 이용하여 다양한 HTTP 메서드를 사용하는 방법을 알게 되셨습니다. 이러한 기법을 통해 효율적이고 유연한 웹 애플리케이션을 개발할 수 있습니다. 다음 강의에서는 AJAX와 보안 이슈에 대해 다루어 보겠습니다.

- 이전 수업 목록

728x90

LIST

저작자표시 비영리 변경금지

'프로그래밍 > Ajax' 카테고리의 다른 글

AJAX로 실시간 검색 기능 구현하기 (0)	2024.06.20
[AJAX 수업] 8강 - AJAX와 보안 (0)	2024.06.19
[AJAX 수업] 6강 - AJAX와 jQuery (1)	2024.06.17
AJAX 오류 처리와 디버깅, 오류 상황 및 디버깅 기법 (0)	2024.06.14
AJAX와 JSON, JSON의 이해 (0)	2024.06.13

현재글[AJAX 수업] 7강 - AJAX와 RESTful API

250x250

월횽

그레이해커 월횽의 코딩 기록

Today :
Yesterday :

월횽