JavaScript

[JavaScript] 10. Ajax

서회정's avatar
서회정
Apr 07, 2025
[JavaScript] 10. Ajax
Contents
✅ Ajax란✅ Ajax를 사용하는 이유1. 블로그 만들기 실행 테스트2. get / post / put / delete 실행

✅ Ajax란

📃
JavaScript와 XML 형식을 이용한 비동기적 정보 교환 기법.
이름에 XML이 포함되어있긴 하지만 대부분 JSON 형식을 다룬다.
 

✅ Ajax를 사용하는 이유

Ajax를 사용하기 전에는 웹 브라우저가 어떠한 정보를 요청할 때, 서버는 해당 정보와 함께 페이지 전체를 전달해주었다. 이는 서버와 클라이언트 양측에게 효율적인 통신 방법은 아니었다. 따라서 요청한 일부 데이터만 부분적으로 리로드하는 ajax 기술이 발전되었다.
 
 
notion image
notion image
notion image

1. 블로그 만들기 실행 테스트

1. git clone

 

2. 서버 실행

 

3. html 문서 작성 후 라이브 서버 열어보기

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 1px solid black;
            padding: 10px;
            margin-bottom: 5px;
        }

        .red {
            background-color: red;
        }

        .orange {
            background-color: orange;
        }

        .yellow {
            background-color: yellow;
        }

        .green {
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="outer-box">

    </div>

    <script>
        let site = document.querySelector("#outer-box");

        makeRedBox();
        makeOrangeBox();
        makeWhiteBox2();
        makeYellowBox();
        makeGreenBox();


        function makeRedBox() {
            let divDom = document.createElement("div");
            divDom.setAttribute("class", "red");
            site.append(divDom);
        }

        function makeOrangeBox() {
            let divDom = document.createElement("div");
            divDom.setAttribute("class", "orange");
            site.append(divDom);
        }
        function makeYellowBox() {
            let divDom = document.createElement("div");
            divDom.setAttribute("class", "yellow");
            site.append(divDom);
        }
        function makeGreenBox() {
            let divDom = document.createElement("div");
            divDom.setAttribute("class", "green");
            site.append(divDom);
        }

        function makeWhiteBox() {
            let request = new XMLHttpRequest();
            request.open('GET', 'http://localhost:8080/api/boards/1', false); // 마지막 인자 false → 동기 요청
            request.send(null);
            let responseBody = JSON.parse(request.responseText);
            let divDom = document.createElement("div");
            divDom.innerHTML = responseBody.body.title;
            site.append(divDom);
        }

        async function makeWhiteBox2() {
            let response = await fetch("http://localhost:8080/api/boards/1");
            let responseBody = await response.json();
            let divDom = document.createElement("div");
            divDom.innerHTML = responseBody.body.title;
            site.append(divDom);
        }

    </script>
</body>

</html>

2. get / post / put / delete 실행

📃
get / post / put / delete 실행해보고 값이 잘 들어갔는지 확인해보자

비동기 연결

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <h1>fetch get, post, put, delete</h1>
    <hr />
    <button onclick="get1()">get</button>
    <button onclick="post1()">post</button>
    <button onclick="put1()">put</button>
    <button onclick="delete1()">delete</button>

    <script>
        let response = await fetch("http://localhost:8080/api/boards", {
          method: "post",
          body: JSON.stringify(requestBody),
          headers: { "Content-Type": "application/json" },
        });

        let responseBody = await response.json();

        console.log(responseBody);
      }

      async function get1() {
        let response = await fetch("http://localhost:8080/api/boards/1", {
          method: "get",
        });
        let responseBody = await response.json();

        console.log(responseBody);
      }

      async function post1() {
        let requestBody = {
          title: "제목9",
          content: "내용9",
          author: "ssar",
        };

        let response = await fetch("http://localhost:8080/api/boards", {
          method: "post",
          body: JSON.stringify(requestBody),
          headers: { "Content-Type": "application/json" },
        });

        let responseBody = await response.json();

        console.log(responseBody);
      }

      async function put1() {
        let requestBody = {
          title: "제목11",
          content: "내용11",
          author: "ssar",
        };

        let response = await fetch("http://localhost:8080/api/boards/1", {
          method: "put",
          body: JSON.stringify(requestBody),
          headers: { "Content-Type": "application/json" },
        });

        let responseBody = await response.json();
        console.log(responseBody);
      }

      async function delete1() {
        let response = await fetch("http://localhost:8080/api/boards/1", {
          method: "delete",
        });

        let responseBody = await response.json();

        console.log(responseBody);
      }
    </script>
  </body>
</html>
 
    <form>
      <input type="text" id="title" placeholder="title" /> <br />
      <input type="text" id="content" placeholder="content" /> <br />
      <input type="text" id="author" placeholder="author" /> <br />
      <button type="button" onclick="write1()">게시글쓰기</button>
      <!-- onclick="write()" 사용 시 action이 적용되기때문에 이부분 주의하자 -->
    </form>

    <script>
      async function write1() {
        let requestBody = {
          title: document.querySelector("#title").value,
          content: document.querySelector("#content").value,
          author: document.querySelector("#author").value,
        };

        let response = await fetch("http://localhost:8080/api/boards", {
          method: "post",
          body: JSON.stringify(requestBody),
          headers: { "Content-Type": "application/json" },
        });

        let responseBody = await response.json();

        console.log(responseBody);
      }

      async function get1() {
        let response = await fetch("http://localhost:8080/api/boards/1", {
          method: "get",
        });
        let responseBody = await response.json();

        console.log(responseBody);
      }

      async function post1() {
        let requestBody = {
          title: "제목9",
          content: "내용9",
          author: "ssar",
        };

        let response = await fetch("http://localhost:8080/api/boards", {
          method: "post",
          body: JSON.stringify(requestBody),
          headers: { "Content-Type": "application/json" },
        });

        let responseBody = await response.json();

        console.log(responseBody);
      }

      async function put1() {
        let requestBody = {
          title: "제목11",
          content: "내용11",
          author: "ssar",
        };

        let response = await fetch("http://localhost:8080/api/boards/1", {
          method: "put",
          body: JSON.stringify(requestBody),
          headers: { "Content-Type": "application/json" },
        });

        let responseBody = await response.json();
        console.log(responseBody);
      }

      async function delete1() {
        let response = await fetch("http://localhost:8080/api/boards/1", {
          method: "delete",
        });

        let responseBody = await response.json();

        console.log(responseBody);
      }
    </script>

post

notion image

게시글쓰기

notion image
 
Share article

clubnerdy

RSS·Powered by Inblog