WEB3 - Ajax

초기 페이지 구현

수업소개

우리의 ajax를 이용해서 리로드 없이 정보를 부분적으로 변경할 수 있게 되었습니다만, 사용자가 자신이 보고 있는 정보를 다른 사람에게 공유할 수는 없게 되었습니다. 이런 문제를 개선하는 방법을 알아보겠습니다. 

 

 

 

fragment identifier를 이용한 초기 페이지 기능 구현

소스코드

<!doctype html>
<html>
  <body>
    <a href="#three">three</a>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam minima voluptatum iure iusto, sequi aperiam, totam reiciendis cum consequatur molestias exercitationem ex nulla? Reiciendis velit odit minus dolore, nihil consequuntur qui pariatur nesciunt cupiditate debitis porro, autem recusandae necessitatibus assumenda aut a molestias in aliquam eligendi, eius totam. Reprehenderit deleniti consequuntur incidunt culpa fuga maxime sed, reiciendis voluptate facere sapiente, pariatur! Suscipit possimus a at corrupti rerum. Pariatur praesentium, veniam vitae voluptates, quidem labore impedit ab quos soluta modi eveniet quia mollitia quod natus iste earum, dolorem minus! Ullam possimus commodi alias, et reiciendis provident quidem nesciunt atque repellendus cum?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sint hic, omnis in at excepturi, ipsum perspiciatis distinctio, optio vitae veniam consectetur praesentium est! Minus repudiandae inventore blanditiis ullam sit culpa dicta soluta modi, totam ab consequatur laudantium temporibus aut perspiciatis aspernatur quos amet autem earum sequi! Voluptatem optio tenetur distinctio enim voluptatum sapiente praesentium, similique iste. Facilis cupiditate, vitae quisquam deleniti porro magnam neque autem perspiciatis itaque tenetur adipisci iste optio! Porro quidem mollitia ea, nemo, ab, quibusdam nihil sint quisquam rerum perspiciatis fugit, et consectetur odio rem eius obcaecati? Numquam vitae molestiae, alias aut, porro ab maxime fugiat.
    </p>
    <p id="three">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum soluta saepe, necessitatibus asperiores incidunt quis quibusdam aspernatur voluptatibus, distinctio nostrum nobis commodi sequi iusto vitae dicta! Magnam maiores deleniti iste sequi eveniet laudantium amet, sed adipisci? Nisi voluptates labore atque nihil quia, at tempora eius iure commodi dolore officia vitae ducimus excepturi. Asperiores maxime, atque cum ad deleniti illo sed ab nostrum dolor culpa mollitia molestiae vitae veritatis aut quibusdam accusamus aperiam, voluptatem nemo, cumque! Porro expedita, harum, nisi rerum nesciunt nobis impedit cumque ut ab quasi cupiditate beatae dolorem enim veniam accusantium autem odit reiciendis! Fugit soluta, vero optio.
    </p>
    <script>
      if(location.hash) {
        console.log(location.hash.substr(1));
      } else {
      // Fragment doesn't exist
      }
    </script>
  </body>
</html>

 

 

적용

소스코드

변경사항

index.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="#!welcome">WEB</a></h1>
  <input id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);
  ">
  <ol id="nav">
    <li><a href="#!html" onclick="fetchPage('html')">html</a></li>
    <li><a href="#!css" onclick="fetchPage('css')">css</a></li>
    <li><a href="#!javascript" 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;
      })
    });
  }
  if(location.hash){
    fetchPage(location.hash.substr(2));
  } else {
    fetchPage('welcome');
  }
  </script>
</body>
</html>

 

댓글

댓글 본문
작성자
비밀번호
  1. 윤다형
    location.hash라는 함수는 주소창의 #이하의 값을 읽어온다고 생각하시면 될 것 같아요. 실제로 웹 문서에 id태그가 존재하느냐와 상관이 없습니다. 다만, 해당 id 값이 없으면 이동할 id태그의 값이 없으니 아무 반응도 하지 않겠죠?
    대화보기
    • 윤다형
      Atom에서의 정렬을 말씀하시는 거라면 http://recoveryman.tistory.com/238 이걸 참고해 보세요 :)
      대화보기
      • 이하빛
        [첫번째 강의 5분 42초에 대한 질문입니다]

        #three를 #four로 수정해 보여주셨는데, id="four"을 만들지도 않았는데,
        four가 있는 것처럼 값이 나오는 건 왜그런거죠?
      • 이하빛
        lorem 사용할 때 한두줄로 길~~게 늘어놓아지고 바가 생기는데,
        이고잉님 처럼 보이는 화면대로 자동 정렬?이되게 하는 방법 알려주세요~!
      • bambiyellow
        fetchPage('./text/welcome') 이런 식으로 하면 잘 돌아갈거에요.
        대화보기
        • 뭔가 많이 어렵네요..ㅠㅠ 나중에 다시 들어야 겠어요
        • ByungHun Kim
          <!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="#!welcome">WEB</a></h1>
          <ol>
          <li><a href="#!html" onclick="fetchPage('text/html')">HTML</a></li>
          <li><a href="#!css" onclick="fetchPage('text/css')">CSS</a></li>
          <li><a href="#!javascript" onclick="fetchPage('text/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;
          })
          });
          }

          if(location.hash) {
          console.log(location.hash.substr(2));
          }
          else {
          fetchPage('text/welcome');
          }
          </script>
          </body>
          </html>

          저는 text 폴더를 따로 만들어서 name을 경로 포함하여 설정했는데요.
          http://127.0.0.1......ipt
          이렇게 해시를 포함한 url을 주소창에 쳤을 때에 영상처럼 javascript 설명이 나오지는 않네요. 혹시 어떤 부분이 문제인지 알 수 있을까요?
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기