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. 신희준
    초기페이지(2/2) 0:43초 부분에
    <a href="#!html"....> 이라고 #!를 바로 쓰는데

    초기페이지(1/2) 2:39초에 식별하고 싶은 것에 id 값을 먼저 주라고 되어있습니다.
    <id="three"> 라고 영상에선 id 값을 먼저 주고 <a href="three">라고 해서 url에 표시가 되었는데

    <a href="#!html"....>같은 경우는 html 파일 안에 제목태그인 h2 밖에 없습니다.
    이러한 경우는 html 파일 자체가 식별자 필요없이 그냥 인식되는건가요?
  2. Yohanesty
    완료
  3. 별거
    2021.04.30 완료했습니다.
    hashbang 사이트 들어갈때마다 헤시태그 붙으면서 이동되는게 굉장히 궁금했는데 이렇게 사용하는 거였군요!!
  4. EJArtsociety
    봤긴 봤는데... 이해가 되지 않아요 ㅠㅠ
  5. 김우중
    감사합니다
  6. 완료
  7. chimhyangmoo
    2021.02.07
  8. jeisyoon
    2021.01.29 수강
  9. hanel_
    21.01.29 잘보고 갑니다. 감사합니다 ^^
  10. 고니스타크
    2021 2일차
    hjax로가요
  11. 주니어개발자
    Ajax와 HashBang(!#)
    (해시뱅, 셔뱅, 샤-뱅, 파운드-뱅, 해시-플링, 크런치뱅)

    pjax
  12. 김용욱
    1228
  13. 생활둘기
    2020 12 22
  14. kkn1125
    20.12.20 완료~!
  15. Yeonny
    2020.11.12 done
  16. 둘리
    이 영상을 빨리 봤다면 좋았을텐데..^-^ 결국 비효율적인 방법으로 해결을 봤지만.. 이렇게 간단한 방법이 있었다니!
  17. 2020.11.02.MON.
  18. 웹짱
    2020.10.26 Ajax초기패이지 로드방법
  19. HyeonHui Jeong
    9/10
  20. 10번째줄에 이걸로 바꾸시면 됩니다
    <h1><a href="#!welcome" onclick="fetchPage('welcome')">WEB</a></h1>
    대화보기
    • 김광래
      2020.09.07. 20:35 완료
    • 허우룩
      2020.09.06
    • 20.08.30 감사합니다
    • 이현규
      이미 해결하셨을 것 같지만 이고잉님께서 fetchPage를 사용을 안하셨는데 똑같이 onclick fetchPage 를 넣어주시면 됩니다.
      대화보기
      • 신원석
        html , css , javascript 같은 다른 해쉬로 이동했다가 다시 상단의 web 을 클릭해서
        welcome 해쉬로 이동하면 메인화면이 나오질 않습니다...
        제가 실습하면서 코드를 잘못 입력했나 싶어서 소스코드 그대로 가져와서
        복사 붙여넣기 했음에도 불구하고 같은 현상이 나타납니다.
        강의에서도 초기페이지 (2/2) 뒷부분쪽 보시면 이고잉님이 web 클릭했는데도
        메인화면으로 넘어가지않고 가만히 있는 장면이 나옵니다.
        어떻게하면 해결할 수 있을까요?
      • 2020/07/17 완료
      • 뽀짝이
        완료
      • 김혜린
        6월 25일 완료!
      • Jakyung Kwon
        감사합니다!!
        대화보기
        • psyless
          20200620
        • Amousk
          좋은 영상 감사합니다.
        • 개발신
          2020.06.15
        • hpyseun
          05/22/2020 완료 감사합니다
        • 야루
          완료
        • OneJae EE
          20.04.15 수 / 37세 비전공자 / 완료
        • 제피
          lorem 100이 안먹히네요..
        • Always
          이번건 좀 어렵네요 ㅜㅜ ㅎㅎ
          항상 유익한 강의 감사합니당~
        • 1d1c
          완료
        • eddylee123456
          완료
        • thsths
          완료
        • 스티븐잡숴
          완료
        • 샬롬
          완료
        • HOTcode
          지나가다가 늦게나마 답을 드립니다.
          현재 소스에서 if(location.hash)는 URL 상의 location.hash가져 오는 것이며 그 조건문안에 내용이 중요합니다.
          조건문 안에 내용을 지우면 해쉬뱅(#!)javascript가 포함된 URL를 주소창에 넣어도 아래에 javascript 내용이 나타나질 않습니다.

          그러면 이 해쉬뱅을 감지하여야하는데 그것이
          if(location.hash)이며 이 조건문을 자바스크립트에서 조건을 감지하여 행쉬뱅이 있다면 그 해당 fetch를 불러와서
          내용을 보여주게 하는 함수 입니다.

          도움이 되셨으면 좋겠습니다.
          늦게나마 답변드립니다.
          대화보기
          • ebigpass@gmail.com
            감사합니다. 2019.12.15
          • asuran tech
            if(location.hash){
            fetchPage(location.hash.substr(2));
            } else {
            fetchPage('welcome');

            여기서

            location.hash = url에 해쉬를 가져와라
            사용자가 url에 해쉬를 넣었으면 if()안에 뭔가 값이 들어가는것이므로 true
            사용자가 url에 해쉬를 안넣었으면 false

            true일경우
            fetchPage(location.hash.substr(2));
            함수(?) fetchPage를 실행하라 단 변수에 가져온 해쉬의 앞 두개(#!) 뒤를 읽어서 넣어서 실행하라

            false일경우(else)
            fetchPage('welcome');
            fetchPage를 실행하라 단 변수에 welcome을 넣어라

            이럼 친구가 사이트내부에 ajax사용한곳 링크 보내줬을때는 그 링크 끝에 해쉬가 들어갈거고
            fetchpage함수로 해당 문서가 바로 열림
            그냥 사이트 들어올떄는 해쉬를 안붙이고 들어오니까 welcome이라는 대문 문서가 열리고

            라고 이해했음 저도 배우는 입장이라 용어틀렸을수도
            대화보기
            • 홍주호
              20191124 완료
            • 박창신
              완료
            • 굼벵이
              완료
            • 코딩만이 살길이다
              완료
            • 쑤우
              수강완료. 감사합니다.
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기