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. pupu
    2020/07/17 완료
  2. 뽀짝이
    완료
  3. 김혜린
    6월 25일 완료!
  4. psyless
    20200620
  5. Amousk
    좋은 강의 감사합니다.
  6. 개발신
    2020.06.15
  7. hpyseun
    05/22/2020 완료 감사합니다
  8. 완료
  9. 송형선
    한줄기 희망같은 강의 입니다.ㅎㅎ
  10. 코딩꿈나뮤
    아름답다..ㅇㅅㅇ..
  11. OneJae EE
    20.04.15 수 / 37세 비전공자 / 완료
  12. 야루
    완료
  13. 심진현님께
    원인은 다를지 모르겠지만 저도 같은 상황이 발생했었습니다.

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

    <a onclick="
    fetch('html').~~~~
    이런 식으로 따옴표 위치 하나만 바꿨더니 되더라고요.
    대화보기
    • 심진현
      atom사용 htdocs에 newfile로 html이랑 css, javascript 파일 만들고
      <h2> HTML </h2>
      블라블라~~
      이런 식으로 각 파일에 써놨습니다.
      그런데 fetch를 사용하고 index.html에서 1.HTML을 클릭했는데 아래 아무것도 안 나옵니다. 코드는 틀린 게 없는데 혹시 파일 저장하는 형식이 달라야 하나요? 조언 부탁드립니다. ㅠㅠ
    • 완료
    • thsths
      완료
    • 스티븐잡숴
      완료
    • 샬롬
      완료
    • 2019.11.24 완료
      나는 비밀번호가 1234인 바보입니다
    • 홍주호
      20191124 완료
    • 정홍
      완료
    • 굼벵이
      완료
    • 코딩만이 살길이다
      완료
    • 쑤우
      수강완료. 감사합니다.
    • 시크릿모드에서 하지 않는 경우
      파일 저장 후 웹페이지 새로고침해도 바로바로 반응하지 않으니
      테스트시 시크릿모드로 하세요.
    • Hyeon-Jun Ha
      감사합니다.
    • incursio
      감사합니다
    • 허공
      190509 감사합니다.
    • johnlee
      위 소스의 innerHTML에 대해 설명 드리자면 문서 내 'article'이라는 HTML Element를 찾아서 가져오고,
      해당 Element에는 innerHTML이라는 속성이 존재하여 해당 article 요소 내 텍스트 값을 수정할 수 있게 됩니다.
      이 외에도 비슷한 개념의 속성으로 textContent,, innerText, nodeValue 등이 있는데 약간의 차이가 존재합니다.
      예를 들면 textContent 속성 값으로는 html 코드를 넣을 수 없지만,
      innerHTML 내에는 html 코드, 텍스트 모두 소화 가능합니다.

      자세한 내용은 다음 링크를 참조하시면 도움이 될 것 같습니다.
      http://xahlee.info......tml
    • Gimme_Gsuit
      innerHTML HTML에 코드에 js코드를 입력할떄 사용하는 코드입니다. 자세한건 구글링 ㅎㅎ
      대화보기
      • 폭신한남자
        innerhtml이 뭐죠?
      • 발헤
        감사합니다. 완료
      • JuicyFresh
        그저 감사합니다.
      • Seong-Won Bae
        키야 굳
      • php 수업을 조금 듣다가 ajax수업을 듣고있는데 php랑 비슷한?점이 있네용ㅎㅎㅎ
      • 삼고잉
        구시대적이라 그런가 ..fetch가 AJax라는게 뭔가 믿겨지지가 않네요
      • 최주원
        참 쉽게 가르쳐주시는데 뭔가 아쉽네여 ㅋㅋㅋ
      • metallsk
        마법사 같군요....egoing님..^^
      • 강선웅
        리펙토링은 진짜 볼때마다 사랑인것 같아요...
      • 의상
        해당 글자 누르면 article부분 출력까지 했는데요
        글자에 해당하는 파일 내용을 수정 후에 리로드하고 눌러보면 최초내용만 나오네요 이건 어떻게 해결하죠??
      • 우탄
        네 <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 자세히 보기