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. 허공
    190509 감사합니다.
  2. johnlee
    위 소스의 innerHTML에 대해 설명 드리자면 문서 내 'article'이라는 HTML Element를 찾아서 가져오고,
    해당 Element에는 innerHTML이라는 속성이 존재하여 해당 article 요소 내 텍스트 값을 수정할 수 있게 됩니다.
    이 외에도 비슷한 개념의 속성으로 textContent,, innerText, nodeValue 등이 있는데 약간의 차이가 존재합니다.
    예를 들면 textContent 속성 값으로는 html 코드를 넣을 수 없지만,
    innerHTML 내에는 html 코드, 텍스트 모두 소화 가능합니다.

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