AJAX(Asynchronous JavaScript And XML)

1. AJAX (Asynchronous JavaScript And XML)

(1): 특징

비동기 자바스크립트

비동기적 자바스크립트 동작을 하는 기술

서버로부터의 응답(response) 확인

XMLHttpRequest` 객체를 사용하는 것을 말함

페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있음.

(2): 특징

페이지 새로고침 없이 서버에 요청
서버로부터 데이터를 받고 작업을 수행

1) XMLHttpRequest

XMLHttpRequest - Web API | MDN

특징

초기 기획때부터 인터페이스를 제공하지 않아 브라우저간의 불일치가 발생
IE 지원.

(1) XMLHttpRequest 활용

DirectoryHTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜

hello.html

<!-- hello.html -->
 
<h1 class="text">안녕하세요</h1>
<h2 class="text">Ajax 입니다.</h2>

index.html (문서 불러오기를 클릭했을때 요청)

<!-- index.html -->
 
**<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css" />
    <style>
      body {
        margin: 30px;
      }
      .box {
        width: 400px;
        padding: 20px;
        border: 1px solid #000;
        margin-top: 20px;
      }
      .box h1 {
        font-size: 30px;
        color: red;
      }
      .box h2 {
        font-size: 25px;
        color: green;
      }
      .box p {
        font-size: 14px;
        color: #999;
      }
    </style>
  </head>
  <body>
    <button class="btn">문서불러오기</button>
    <div class="box">
      <p>데이터가 들어옴</p>
    </div>
    <script>
      const btn = document.querySelector(".btn");
      const box = document.querySelector(".box");
      btn.addEventListener("click", (e) => {
        e.preventDefault();
        const xhr = new XMLHttpRequest();
        const method = "GET";
        const url = "backend/hello.html";
 
        xhr.onreadystatechange = (e) => {
          console.log(e);
          const { target } = e;
 
          if ((target.readyState = XMLHttpRequest.DONE)) {
            //Ajax 처리 결과를 구현하는 위치
            if (target.status == 200) {
              alert("dd");
              const req = target.responseText;
              box.insertAdjacentHTML("beforeend", req);
            } else {
              const a = parseInt(target.status / 100);
              if (a == 4) {
                console.log(
                  "요청 주소가 잘못되었습니다",
                  target.status,
                  target.statusText
                );
              } else if (a == 5) {
                console.log(
                  "서버 응답이 없음",
                  target.status,
                  target.statusText
                );
              } else {
                console.log("요청에 실패", target.status, target.statusText);
              }
            }
          }
        };
 
        xhr.open(method, url);
        xhr.send();
      });
    </script>
  </body>
</html>
**

요청 결과값

2) Fetch

Fetch API - Web API | MDN

특징

promise 기반
이미 잘 명세된 API가 제공됨으로써 브라우저간의 불일치가 없음
IE 대부분에서 동작하지 않음

(1) Fetch 활용

Directory

hello.html

<!-- hello.html -->
 
<h1 class="text">안녕하세요</h1>
<h2 class="text">Ajax 입니다.</h2>

index.html (문서 불러오기를 클릭했을때 요청)

<!-- index.html -->
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css" />
    <style>
      body {
        margin: 30px;
      }
      .box {
        width: 400px;
        padding: 20px;
        border: 1px solid #000;
        margin-top: 20px;
      }
      .box h1 {
        font-size: 30px;
        color: red;
      }
      .box h2 {
        font-size: 25px;
        color: green;
      }
      .box p {
        font-size: 14px;
        color: #999;
      }
    </style>
  </head>
  <body>
    <button class="btn">문서불러오기</button>
    <div class="box">
      <p>데이터가 들어옴</p>
    </div>
    <script>
      const btn = document.querySelector(".btn");
      const box = document.querySelector(".box");
 
      btn.addEventListener("click", (e) => {
        const url = "backend/hello.html";
        fetch(url).then((res) => {
          console.log(res);
          res.text().then((text) => {
            box.insertAdjacentHTML("beforeend", text);
          });
        });
      });
    </script>
  </body>
</html>

요청 결과값

3) Axios

시작하기 | Axios Docs

특징

브라우저를 위해 XMLHttpRequests 생성
node.js를 위해 http 요청 생성
Promise API를 지원
요청 및 응답 인터셉트
요청 및 응답 데이터 변환
요청 취소
JSON 데이터 자동 변환
XSRF를 막기위한 클라이언트 사이드 지원
크로스 브라우징에 신경을 많이썼기에 브라우저 호환성이 좋다
IE 지원.

Axios 라이브러리 공식 문서

Axios 러닝 가이드

설치

npm 사용하기:

$npm install axios

bower 사용하기:

$ bower install axios

yarn 사용하기:

$yarn add axios

jsDelivr CDN 사용하기:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

unpkg CDN 사용하기:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

(1) Axios 활용

Directory

hello.html

<!-- hello.html -->
 
<h1 class="text">안녕하세요</h1>
<h2 class="text">Ajax 입니다.</h2>

index.html (문서 불러오기를 클릭했을때 요청)

<!-- index.html -->
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css" />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
      body {
        margin: 30px;
      }
      .box {
        width: 400px;
        padding: 20px;
        border: 1px solid #000;
        margin-top: 20px;
      }
      .box h1 {
        font-size: 30px;
        color: red;
      }
      .box h2 {
        font-size: 25px;
        color: green;
      }
      .box p {
        font-size: 14px;
        color: #999;
      }
    </style>
  </head>
  <body>
    <button class="btn">문서불러오기</button>
    <div class="box">
      <p>데이터가 들어옴</p>
    </div>
    <script>
      const btn = document.querySelector(".btn");
      const box = document.querySelector(".box");
 
      btn.addEventListener("click", (e) => {
        ///xxx.data: 정보가 들어가 있음 json파일을 불러오면 => 객체로 가져옴
        const url = "backend/hello.html";
        // axios.get(url).then(res=>console.log(res.data))
        axios
          .get(url)
          .then((res) => {
            console.log(res);
            box.insertAdjacentHTML("beforeend", res.data);
          })
          .catch((err) => {
            console.log("파일연결 에러");
            console.log(err.res.status);
            console.log(err.res.data);
          })
          .finally(() => {
            console.log("데이터 불러오기 완료");
          });
      });
    </script>
  </body>
</html>

요청 결과값