6 minutes read (About 846 words)

javaScript/js.REST API

REST API

1. REST API의 구성

구성 요소 내용 표현 방법
자원(Resource) 자원 HTTP URI
행위(Verb) 자원에 대한 행위 HTTP 요청 메소드
표현(Representations) 자원에 대한 행위의 구체적 내용 HTTP 페이로드

GET 요청

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <pre></pre>
  <script>
    // XMLHttpRequest 객체 생성
    const xhr = new XMLHttpRequest();

    // HTTP 요청 초기화
    // todos 리소스에서 모든 todo를 취득 (index)
    xhr.open('GET', '/todos');
    
    // HTTP 요청 전송
    xhr.send();

    // load 이벤트는 요청이 성공적으로 완료된 경우 발생한다.
    xhr.onload = () => {

    // status는 response 상태 코드를 반환 : 200 => 정상응답 
      if (xhr.status === 200) {
        document.querySelector('pre').textContent = xhr.response;
      } else {
        console.error('Error', xhr.status, xhr.statusText);
      }
    };
    </script>
</body>
</html>

POST 요청

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <pre></pre>
  <script>
    // XMLHttpRequest 객체 생성
    const xhr = new XMLHttpRequest();

    // HTTP 요청 초기화
    // todos 리소스에서 모든 todo를 취득
    xhr.open('POST', '/todos');
    
    // 요청 몸체에 담아 서버로 전송할 페이로드의 MIME-type을 지정
    xhr.setRequestHeader('content-type', 'application/json');

    // HTTP 요청 전송
    // 새로운 todo를 생성하기 위해 페이로드가 필요
    xhr.send(JSON.stringify({ id: 4, content: 'Angular', completed: false}));

    // load 이벤트는 요청이 성공적으로 완료된 경우 발생한다.
    xhr.onload = () => {

    // status는 response 상태 코드를 반환 : 200 => 정상응답 
      if (xhr.status === 200 || xhr.status === 201) {
        document.querySelector('pre').textContent = xhr.response;
      } else {
        console.error('Error', xhr.status, xhr.statusText);
      }
    };
    </script>
</body>
</html>

PUT 요청

PUT은 특정 리소스의 저네를 교체할 때 사용한다.
(todos 리소스에서 id를 사용하여 todo를 특정하여 id를 제외한 리소스 전체를 교체한다.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <pre></pre>
  <script>
    // XMLHttpRequest 객체 생성
    const xhr = new XMLHttpRequest();

    // HTTP 요청 초기화
    // todos 리소스에서  id를 사용하여 todo를 특정하여 id를 제외한 리소스 전체를 교체
    xhr.open('PUT', '/todo/4');
    
    // 요청 몸체에 담아 서버로 전송할 페이로드의 MIME-type을 지정
    xhr.setRequestHeader('content-type', 'application/json');

    // HTTP 요청 전송
    // 리소스 전체를 교체하기 위해 페이로드가 필요
    xhr.send(JSON.stringify({ id: 4, content: 'Angular', completed: false}));

    // load 이벤트는 요청이 성공적으로 완료된 경우 발생한다.
    xhr.onload = () => {

    // status는 response 상태 코드를 반환 : 200 => 정상응답 
      if (xhr.status === 200 || xhr.status === 201) {
        document.querySelector('pre').textContent = xhr.response;
      } else {
        console.error('Error', xhr.status, xhr.statusText);
      }
    };
    </script>
</body>
</html>

PATCH 요청

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <pre></pre>
  <script>
    // XMLHttpRequest 객체 생성
    const xhr = new XMLHttpRequest();

    // HTTP 요청 초기화
    // todos 리소스에서  id를 사용하여 todo를 특정하여 completed만을 수정
    xhr.open('PATCH', '/todo/4');
    
    // 요청 몸체에 담아 서버로 전송할 페이로드의 MIME-type을 지정
    xhr.setRequestHeader('content-type', 'application/json');

    // HTTP 요청 전송
    // 리소스 수정하기 위해 페이로드가 필요
    xhr.send(JSON.stringify({ id: 4, content: 'Angular', completed: false}));

    // load 이벤트는 요청이 성공적으로 완료된 경우 발생한다.
    xhr.onload = () => {

    // status는 response 상태 코드를 반환 : 200 => 정상응답 
      if (xhr.status === 200 || xhr.status === 201) {
        document.querySelector('pre').textContent = xhr.response;
      } else {
        console.error('Error', xhr.status, xhr.statusText);
      }
    };
    </script>
</body>
</html>

DELETE 요청

(todos 리소스에서 id를 사용하여 todo를 삭제)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <pre></pre>
  <script>
    // XMLHttpRequest 객체 생성
    const xhr = new XMLHttpRequest();

    // HTTP 요청 초기화
    // todos 리소스에서  id를 사용하여 todo를 삭제
    xhr.open('DELETE', '/todo/4');
    

    // HTTP 요청 전송
    // 리소스 전체를 교체하기 위해 페이로드가 필요
    xhr.send();

    // load 이벤트는 요청이 성공적으로 완료된 경우 발생한다.
    xhr.onload = () => {

    // status는 response 상태 코드를 반환 : 200 => 정상응답 
      if (xhr.status === 200) {
        document.querySelector('pre').textContent = xhr.response;
      } else {
        console.error('Error', xhr.status, xhr.statusText);
      }
    };
    </script>
</body>
</html>

Like this article? Support the author with

You forgot to set the qrcode for Alipay. Please set it in _config.yml.
You forgot to set the qrcode for Wechat. Please set it in _config.yml.
You forgot to set the business and currency_code for Paypal. Please set it in _config.yml.
You forgot to set the url Patreon. Please set it in _config.yml.
javaScript/js.Module
javaScript/js.promise
Follow

Links

Categories

Recent

Archives

Tags

Recent

Archives

Tags

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×