Java Script Ajax

목차
Ajax가 뭔가요 어떤 것을 담당하고 있죠?
Ajax를 사용하면 기존 방식과 어떤 차이가 있을까요?
JSON 이 뭔가요?
JSON이 제공하는 정적 프로토타입 메서드에 대해 몇가지 말해볼 수 있나요?
Ajax로 HTTP 요청을 보내기 위해서는 어떤 방법을 사용할 수 있나요?
XMLHttpRequest와 fetch 메서드의 차이는 무엇이라고 생각하시나요? 🌊

1. Ajax가 뭔가요 어떤 것을 담당하고 있죠?

Ajax(Asynchronous JavaScript and XML)
- 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식
- 브라우저에서 제공하는 호스트 객체 Web API인 XMLHttpRequest 객체를 기반으로 동작
* XMLHttpRequest : HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공
Ajax의 역할
- 서버로부터 웹페이지의 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹페이지를 변경할 필요가 없는 부분까지 다시 렌더링하지 않고,
  변경할 필요가 있는 부분만 한정적으로 렌더링하는 방식이 가능하게 해줌

2. Ajax를 사용하면 기존 방식과 어떤 차이가 있을까요?

변경할 부분을 갱신하는데 필요한 데이터만 서버로부터 전송받기 때문에 불필요한 데이터 통신이 발생하지 않음
변경할 필요가 없는 부분은 다시 렌더링하지 않기 때문에 화면이 순간적으로 깜박이는 현상이 발생하지 않음
클라이언트와 서버와의 통신이 비동기 방식으로 동작하기 때문에 서버에게 요청을 보낸 이후 블로킹이 발생하지 않음

3. JSON 이 뭔가요?

JSON(JavaScript Object Notation)
- 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷
- 자바스크립트에 종속되지 않는 언어 독립형 데이터 포맷으로 대부분의 프로그래밍 언어에서 사용할 수 있음
- 키와 값으로 구성된 순수한 텍스트

4. JSON이 제공하는 정적 프로토타입 메서드에 대해 몇가지 말해볼 수 있나요?

JSON.stringify()
- JSON.stringify 메서드는 객체를 JSON 포맷의 문자열로 변환
- 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화해야 하는데 이를 직렬화(serializing)라 함
JSON.parse()
- JSON.parse 메서드는 JSON 포맷의 문자열을 객체로 변환
- 서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열
- 이 문자열을 객체로 사용하려면 JSON 포맷의 문자열을 객체화해야 하는데 이를 역직렬화(deserializing)라 함

5. Ajax로 HTTP 요청을 보내기 위해서는 어떤 방법을 사용할 수 있나요?

XMLHttpRequest

자바스크립트를 사용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용
Web API인 XMLHttpRequest 객체는 HTTP 요청 전송과 HTTP 응답 수신을 위한 다양한 메서드와 프로퍼티를 제공

readyState가 4가 되어야 ajax 요청이 정상적으로 진행됨

readyState	설명
UNSENT 0	XMLHttpRequest 객체가 생성됨(요청이 초기화되지 않음)
OPENED 1	open() 메소드가 성공적으로 실행됨(서버와 연결됨)
HEADERS_RECEIVED 2	모든 요청에 대한 응답이 도착함(서버가 요청을 받음)
LOADING 3	요청을 처리하는 중
DONE 4	요청 처리 종료, 응답 준비 완료됨

요청 전송과 응답

open() 과 send() 메서드를 사용해 요청
onreadystatechange 는 XMLHttpRequest 의 객체의 readyState 값이 변경될 때마다 callback 함수를 불러온

HTTP GET 요청 전송

  
// XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();
// HTTP 요청 초기화
xhr.open("GET", "/users");
// HTTP 요청 헤더 설정
// 클라이언트가 서버로 전송할 데이터의 MIME 타입 지정: json
xhr.setRequestHeader("content-type", "application/json");
// HTTP 요청 전송
xhr.send();

HTTP POST 요청 전송

  
// XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();
// HTTP 요청 초기화
xhr.open("POST", "/users");
// HTTP 요청 헤더 설정
// 클라이언트가 서버로 전송할 데이터의 MIME 타입 지정: json
xhr.setRequestHeader("content-type", "application/json");
// HTTP 요청 전송
xhr.send(JSON.stringify({ id: 1, content: "HTML", completed: false }));

HTTP 응답 처리

  
// XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();
// HTTP 요청 초기화
// https://jsonplaceholder.typicode.com은 Fake REST API를 제공하는 서비스다.
xhr.open("GET", "https://jsonplaceholder.typicode.com/todos/1");
// HTTP 요청 전송
xhr.send();
// load 이벤트는 HTTP 요청이 성공적으로 완료된 경우 발생한다.
xhr.onload = () => {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.response));
    // {userId: 1, id: 1, title: "delectus aut autem", completed: false}
  } else {
    console.error("Error", xhr.status, xhr.statusText);
  }
};

Fetch

HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API
XMLHttpRequest 객체보다 사용법이 간단하고 프로미스를 지원하기 때문에 비동기 처리를 위한 콜백 패턴의 단점에서 자유로움

비교적 최근에 추가된 Web API로서 인터넷 익스플로러를 제외한 대부분의 모던 브라우저에서 제공

요청 전송과 응답

HTTP 요청을 전송할 URL과 HTTP 요청 메서드, HTTP 요청 헤더, 페이로드 등을 설정한 객체를 전달함
GET 외의 HTTP메서드를 사용할 때는 옵션을 설정해주어야 함
- method: HTTP 메서드를 설정(GET, POST, DELETE, PUT 등)
- header: API 응답에 대한 헤더정보
- body: 전달하려는 응답 내용
1 const promise = fetch(url [, options])

fetch 함수는 HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환함

  
fetch("https://jsonplaceholder.typicode.com/todos/1").then((response) =>
  console.log(response)
);

Response 객체

Response.prototype에는 Response 객체에 포함되어 있는 HTTP 응답 몸체(response.body)를 위한 다양한 메서드를 제공

  
fetch("https://jsonplaceholder.typicode.com/todos/1")
  // response는 HTTP 응답을 나타내는 Response 객체이다.
  // json 메서드를 사용하여 Response 객체에서 HTTP 응답 몸체를 취득하여 역직렬화한다.
  .then((response) => response.json())
  // json은 역직렬화된 HTTP 응답 몸체이다.
  .then((json) => console.log(json));
// {userId: 1, id: 1, title: "delectus aut autem", completed: false}

CRUD 구현

  
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <pre></pre>
    <script>
      const render = (res) => {
        console.log(res);
        const result = JSON.stringify(res);
        document.querySelector("pre").innerHTML = `<b>${result}</b>`;
      };

      const request = {
        // get 메서드
        get(url) {
          return fetch(url);
        },
        // post 메서드
        post(url, payload) {
          return fetch(url, {
            method: "POST",
            headers: { "content-Type": "application/json" },
            body: JSON.stringify(payload),
          });
        },
        // patch 메서드
        patch(url, payload) {
          return fetch(url, {
            method: "PATCH",
            headers: { "content-Type": "application/json" },
            body: JSON.stringify(payload),
          });
        },
        // delete 메서드
        delete(url) {
          return fetch(url, { method: "DELETE" });
        },
      };

      // get
      request
        .get("https://jsonplaceholder.typicode.com/todos/1")
        .then((response) => response.json())
        .then((todos) => render(todos))
        .catch((err) => console.log(err));

      // post
      request
        .post("https://jsonplaceholder.typicode.com/todos", {
          userId: 1,
          title: "JavaScript",
          completed: false,
        })
        .then((response) => response.json())
        .then((todos) => console.log(todos))
        .catch((err) => console.log(err));

      // patch
      request
        .patch("https://jsonplaceholder.typicode.com/todos/1", {
          completed: true,
        })
        .then((response) => response.json())
        .then((todos) => console.log(todos))
        .catch((err) => console.log(err));

      // delete
      request
        .delete("https://jsonplaceholder.typicode.com/todos/1")
        .then((response) => response.json())
        .then((todos) => console.log(todos))
        .catch((err) => console.log(err));
    </script>
  </body>
</html>

</div></details>

6. XMLHttpRequest와 fetch 메서드의 차이는 무엇이라고 생각하시나요? 🌊

fetch 메서드 또한 XMLHttpRequest 처럼 Ajax 통신을 위해 사용됨
fetch 메서드는 Promise를 기반으로 구성되어 있어서 더 간편하게 사용할 수 있다는 특징이 있음
fetch 메서드는 Promise의 후속 처리 메서드 .then() .catch() . finally() 등을 사용하여 코드를 작성할 수 있음

출처

Ajax
[JavaScript] 자바스크립트에서 Ajax 사용하기
데이터 전달의 꽃 AJAX 다루기 - JS, JQuery, jsp(feat. 실시간 아이디 중복검사)

Java Script | Ajax

목차

1. Ajax가 뭔가요 어떤 것을 담당하고 있죠?

2. Ajax를 사용하면 기존 방식과 어떤 차이가 있을까요?

3. JSON 이 뭔가요?

4. JSON이 제공하는 정적 프로토타입 메서드에 대해 몇가지 말해볼 수 있나요?

5. Ajax로 HTTP 요청을 보내기 위해서는 어떤 방법을 사용할 수 있나요?

6. XMLHttpRequest와 fetch 메서드의 차이는 무엇이라고 생각하시나요? 🌊

Further Reading

Java Script | JSON 정리

Java Script | Callback

Java Script | 변수