AJAX(Asynchronous JavaScript And XML)

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 활용

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

directory.png


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

  1. 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>
**

v1.png


  1. 요청 결과값

xmlhttp.png

result.png


2) Fetch

Fetch API - Web API | MDN

특징

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

(1) Fetch 활용

  1. Directory

directory.png


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

  1. 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>

v1.png


  1. 요청 결과값

fetch.png

result.png


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 활용

  1. Directory

directory.png


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

  1. 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>

v1.png


  1. 요청 결과값

axios.png

result.png