생활코딩

Coding Everybody

코스 전체목록

닫기

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. 비전공자
    오전 11:06 2024-05-12
  2. hanjaelee
    감사합니다 수강완료합니다.
  3. 서우
    221014
  4. 당당
    2022.10.01
  5. 코딩러버
    재밌어요
  6. yses9296
    2022-07-10
  7. mary5544
    와... 감사합니다!!!!!!
  8. melll
    2022.03.08
  9. pmxsg
    2022.02.02
  10. chio
    20220201
  11. 맛없는콩두유
    22.01.24 완료!
  12. 아까그애
    2022-01-21 완료
  13. couch
    안 그래도 헤메고 있었는데 감사합니다 ㅠㅠ 이전 강의들은 다 잘 따라왔는데 ajax 강의는 특히 제가 설명을 놓친 건지 중간에 설명이 빠진 부분이 많은 건지 더듬더듬 힘들게 따라가네요 ㅠㅠㅠㅠ
    대화보기
    • 소설가
      2021-12-28 완료
      고맙습니다.
    • Koma Doodugi
      2021.10.27 완료
    • 행달
      2021.10.21 감사!!
    • inventorh
      2021.09.29
    • 글램만두
      함수로 만들어서 파일이름을 인자로 받아야겠다 생각하고 있었는데 바로 밑에 함수로 바꾸는 것이 있네요 왠지 생활코딩님이랑 가까워진 느낌?ㅋㅋ
    • shg7271
      210805
    • labis98
      20210719 완료!
    • 좋은 강의 항상 감사합니다!!
    • Yohanesty
      완료
    • 별거
      2021.04.30 완료했습니다.
      Ajax의 즐거움이 이런 것인가요..
      코드가 길 때는 너무 어렵고 힘들었는데
      한번 함수를 만드니까 쉽고 재밌어져서 좋네요!
    • 단디
      완료
    • kujern
      따라하기 힘듭니다.
    • mymie
      완료
    • chimhyangmoo
      2021.02.07
    • jeisyoon
      2021.01.29 수강
    • hanel_
      21.1.27
    • 고니스타크
      2021 1일차
      document.querySelector('tag name').innerHTML = text 도 기억
    • 생활둘기
      2020 12 22
    • Yeonny
      2020.11.12 done.
    • Sunny
      2020.11.02.MON.
    • 웹짱
      2020.10.26 fetch 리팩토링까지 완료
    • 김광래
      uncaught (in promise) typeerror: cannot set property 'innerhtml' of null at

      이 에러가 나서 안되시는 분들

      index.html에

      <article>

      </article>

      이 존재하는지 먼저 확인해주세요

      저는 추가하고 해결보았습니다.

      정확히는 몰라도 document.querySelector에서 'article'을 불러와서 그런게 아닌가 싶습니다.
    • 허우룩
      2020.09.06
    • HyeonHui Jeong
      9/3
    • momo
      감사합니다
    • pupu
      2020/07/17 완료
    • 뽀짝이
      완료
    • 김혜린
      6월 25일 완료!
    • psyless
      20200620
    • Amousk
      좋은 강의 감사합니다.
    • 개발신
      2020.06.15
    • hpyseun
      05/22/2020 완료 감사합니다
    • 완료
    • 송형선
      한줄기 희망같은 강의 입니다.ㅎㅎ
    • 코딩꿈나뮤
      아름답다..ㅇㅅㅇ..
    • OneJae EE
      20.04.15 수 / 37세 비전공자 / 완료
    • 야루
      완료
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기