TIL. 15 Ajax - fetch 함수

Minjae Choi·2021년 5월 25일

Ajax

목록 보기

1/2

🎈 Ajax란?

Ajax(Asynchronous JavaScript And XML) 전체 페이지를 새로 고치지 않고 페이지 일부만을 위한 데이터를 로드하는 기법이다.(파일을 여는게 아니라, 웹 서버를 통해서 작업해야 한다.)
fetch() 웹 브라우저에 괄호 안의 인자를 서버에게 응답해달라고 요청한다는 뜻의 비동기적 API이다.
then 서버의 응답이 끝나면 다른 일을 할 수 있도록 해주는 기능
response fetch를 사용해 요청했을 때, 웹 서버가 응답한 결과를 담고있는 객체(object)이며, 이 안에 있는 여러 속성을 통해 서버와 통신을 할 때 어떠한 상태로 이루어졌는지를 알 수 있다.

  fetch('html').then(function(response) {
      response.text().then(function(text) {
          alert(text);
          document.querySelector('article').innerHTML = text;
      })
  })
  ---------------------------------------------------------------------------

// 서버에 html이라는 파일을 요청하고 응답이 끝나면 최종적으로 경고창이 실행된다.
   이 때 응답해준 데이터는 text라는 변수에 담겨 있다.

// 웹 페이지의 내용으로 바꾸고 싶다면 <body> 태그 안에 <article> 태그를 만들고,
   alert(text) 부분을 document.querySelector('article').innerHTML = text로 변경

  function callbackme() {
      console.log('response end');
  }
  fetch('html').then(callbackme);
  console.log(1);
  console.log(2);
  ---------------------------------------------------------------------------

// html이라는 파일을 요청 후, 응답이 끝나면 callbackme 함수를 실행해라.

// html을 요청 후 콘솔에 1, 2를 출력하고 응답이 끝나면 then으로 인해
   'response end'를 콘솔에 출력한다.

익명 함수 이름이 없는 함수를 말하며, 한 곳에서만 독접적으로 사용하는 함수는 굳이 선언할 필요가 없다.

  function callbackme() {
      console.log('response end');
  }
  ----------------------------------------------------------------------------
  callbackme = function() {
      console.log('response end');
  }
// 위 함수선언과 아래 함수선언은 같은 의미이다.
  fetch('html').then(function() {
      console.log('response end');
  });
  console.log(1);
  console.log(2);
// callbackme라는 함수선언을 삭제하고, 그와 같은 의미의 코드를 붙여넣으면 익명 함수로 만들 수 있다.

📋 fetch API 실습

<html>
<head>
    <script src="
    https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <script src="colors.js"></script>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <input type="button" value="night" onclick="
        nightDayHandler(this);
    ">
    <ol>
        <li><a onclick="fetchPage('html')">HTML</a></li>
        <li><a onclick="fetchPage('css')">CSS</a></li>
        <li><a onclick="fetchPage('javascript')">JavaScript</a></li>
    </ol>
    <article></article>
    <script>
        function fetchPage(name) {
            fetch(name).then(function(response) {
                response.text().then(function(text) {
                    document.querySelector('article').innerHTML = text;
                })
            });
        }
    </script>
</body>
</html>

// 중복되는 fetch를 함수화 시켜 name이라는 변수를 선언하고, fetchPage('name')으로 간단하게 코드를 작성할 수 있다.

// 기본적인 .js, .html 파일들은 한번만 불러오며 html, css, javascript 텍스트 파일을 생성하여 내용만 따로 관리하여 변경된 사항을 그 때 그 때 불러온다.

Minjae Choi

TIL

다음 포스트

TIL. 15 Ajax - fetch 함수

Ajax

🎈 Ajax란?

📋 fetch API 실습

TIL. 16 Ajax - hash

0개의 댓글