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. 행달
    2021.10.21 감사!!
  2. inventorh
    2021.09.29
  3. 글램만두
    함수로 만들어서 파일이름을 인자로 받아야겠다 생각하고 있었는데 바로 밑에 함수로 바꾸는 것이 있네요 왠지 생활코딩님이랑 가까워진 느낌?ㅋㅋ
  4. shg7271
    210805
  5. labis98
    20210719 완료!
  6. 좋은 강의 항상 감사합니다!!
  7. Yohanesty
    완료
  8. 별거
    2021.04.30 완료했습니다.
    Ajax의 즐거움이 이런 것인가요..
    코드가 길 때는 너무 어렵고 힘들었는데
    한번 함수를 만드니까 쉽고 재밌어져서 좋네요!
  9. 단디
    완료
  10. kujern
    따라하기 힘듭니다.
  11. 완료
  12. chimhyangmoo
    2021.02.07
  13. jeisyoon
    2021.01.29 수강
  14. hanel_
    21.1.27
  15. 고니스타크
    2021 1일차
    document.querySelector('tag name').innerHTML = text 도 기억
  16. 생활둘기
    2020 12 22
  17. Yeonny
    2020.11.12 done.
  18. 2020.11.02.MON.
  19. 웹짱
    2020.10.26 fetch 리팩토링까지 완료
  20. 김광래
    uncaught (in promise) typeerror: cannot set property 'innerhtml' of null at

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

    index.html에

    <article>

    </article>

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

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

    정확히는 몰라도 document.querySelector에서 'article'을 불러와서 그런게 아닌가 싶습니다.
  21. 허우룩
    2020.09.06
  22. HyeonHui Jeong
    9/3
  23. momo
    감사합니다
  24. pupu
    2020/07/17 완료
  25. 뽀짝이
    완료
  26. 김혜린
    6월 25일 완료!
  27. psyless
    20200620
  28. Amousk
    좋은 강의 감사합니다.
  29. 개발신
    2020.06.15
  30. hpyseun
    05/22/2020 완료 감사합니다
  31. 완료
  32. 송형선
    한줄기 희망같은 강의 입니다.ㅎㅎ
  33. 코딩꿈나뮤
    아름답다..ㅇㅅㅇ..
  34. OneJae EE
    20.04.15 수 / 37세 비전공자 / 완료
  35. 야루
    완료
  36. abcd
    심진현님께
    원인은 다를지 모르겠지만 저도 같은 상황이 발생했었습니다.

    저 같은 경우에는 코드가
    <a onclick=
    "fetch('html').~~~~
    이런 식으로 써있을 땐 안 됐었는데요.

    <a onclick="
    fetch('html').~~~~
    이런 식으로 따옴표 위치 하나만 바꿨더니 되더라고요.
    대화보기
    • 심진현
      atom사용 htdocs에 newfile로 html이랑 css, javascript 파일 만들고
      <h2> HTML </h2>
      블라블라~~
      이런 식으로 각 파일에 써놨습니다.
      그런데 fetch를 사용하고 index.html에서 1.HTML을 클릭했는데 아래 아무것도 안 나옵니다. 코드는 틀린 게 없는데 혹시 파일 저장하는 형식이 달라야 하나요? 조언 부탁드립니다. ㅠㅠ
    • 1d1c
      완료
    • thsths
      완료
    • 스티븐잡숴
      완료
    • 샬롬
      완료
    • 홍주호
      20191124 완료
    • 정홍
      완료
    • 굼벵이
      완료
    • 코딩만이 살길이다
      완료
    • 쑤우
      수강완료. 감사합니다.
    • 시크릿모드에서 하지 않는 경우
      파일 저장 후 웹페이지 새로고침해도 바로바로 반응하지 않으니
      테스트시 시크릿모드로 하세요.
    • Hyeon-Jun Ha
      감사합니다.
    • incursio
      감사합니다
    • 허공
      190509 감사합니다.
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기