WEB3 - Ajax

Ajax의 적용

수업소개

배웠으면 써먹어야죠. 이번 시간엔 fetch API를 실전에 적용해보겠습니다. 

 

 

 

강의

소스코드

변경사항

<!doctype html>
<html>
<head>
  <title>WEB1 - Welcome</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="colors.js"></script>
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <input id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);
  ">
  <ol>
    <li><a onclick="
      fetch('html').then(function(response){
        response.text().then(function(text){
          document.querySelector('article').innerHTML = text;
        })
      });
    ">HTML</a></li>
    <li><a onclick="
      fetch('css').then(function(response){
        response.text().then(function(text){
          document.querySelector('article').innerHTML = text;
        })
      });
    ">CSS</a></li>
    <li><a onclick="
      fetch('javascript').then(function(response){
        response.text().then(function(text){
          document.querySelector('article').innerHTML = text;
        })
      });
    ">JavaScript</a></li>
  </ol>
  <article>

  </article>
  </p>
</body>
</html>

 

 

 

리팩토링 - 함수화

소스코드

변경사항

<!doctype html>
<html>
<head>
  <title>WEB1 - Welcome</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="colors.js"></script>
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <input id="night_day" 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>

 

댓글

댓글 본문
작성자
비밀번호
  1. 최주원
    참 쉽게 가르쳐주시는데 뭔가 아쉽네여 ㅋㅋㅋ
  2. metallsk
    마법사 같군요....egoing님..^^
  3. 강선웅
    리펙토링은 진짜 볼때마다 사랑인것 같아요...
  4. 의상
    해당 글자 누르면 article부분 출력까지 했는데요
    글자에 해당하는 파일 내용을 수정 후에 리로드하고 눌러보면 최초내용만 나오네요 이건 어떻게 해결하죠??
  5. 우탄
    네 <article>태그를 안 넣어줬었네요.
    article, innerHTML 새로운 것들이다 보니 이해없이 따라만 하려다 놓쳤습니다.
    완벽 이해했습니다. 감사합니다~
    대화보기
    • Byeongju Park
      document.querySelector('article').innerHTML = text;
      과 같이 작성하셨나요?
      article 태그가 body 태그 안에 있어야합니다.
      대화보기
      • 우탄
        index.html:38 Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null
        at index.html:38
        innerHTML속성을 사용할 수 없다는 말 같은데... 검색해도 모르겠습니다!!! 힘을 주세요 이고잉님!!!!!!!!!!!!
        (html:38은 로렘입썸 문구인데 왜 자꾸 엉뚱한 줄에다 오류 표시를 할까요?)
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기