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. thsths
    완료
  2. 스티븐잡숴
    완료
  3. 샬롬
    완료
  4. 2019.11.24 완료
  5. 홍주호
    20191124 완료
  6. 정홍
    완료
  7. 굼벵이
    완료
  8. 코딩만이 살길이다
    완료
  9. 쑤우
    수강완료. 감사합니다.
  10. 시크릿모드에서 하지 않는 경우
    파일 저장 후 웹페이지 새로고침해도 바로바로 반응하지 않으니
    테스트시 시크릿모드로 하세요.
  11. Hyeon-Jun Ha
    감사합니다.
  12. incursio
    감사합니다
  13. 허공
    190509 감사합니다.
  14. johnlee
    위 소스의 innerHTML에 대해 설명 드리자면 문서 내 'article'이라는 HTML Element를 찾아서 가져오고,
    해당 Element에는 innerHTML이라는 속성이 존재하여 해당 article 요소 내 텍스트 값을 수정할 수 있게 됩니다.
    이 외에도 비슷한 개념의 속성으로 textContent,, innerText, nodeValue 등이 있는데 약간의 차이가 존재합니다.
    예를 들면 textContent 속성 값으로는 html 코드를 넣을 수 없지만,
    innerHTML 내에는 html 코드, 텍스트 모두 소화 가능합니다.

    자세한 내용은 다음 링크를 참조하시면 도움이 될 것 같습니다.
    http://xahlee.info......tml
  15. 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 자세히 보기