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. Yeonny
    2020.11.12 done
  2. 둘리
    이 영상을 빨리 봤다면 좋았을텐데..^-^ 결국 비효율적인 방법으로 해결을 봤지만.. 이렇게 간단한 방법이 있었다니!
  3. Sunny
    2020.11.02.MON.
  4. 웹짱
    2020.10.26 Ajax초기패이지 로드방법
  5. HyeonHui Jeong
    9/10
  6. 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
          이번건 좀 어렵네요 ㅜㅜ ㅎㅎ
          항상 유익한 강의 감사합니당~
        • 완료
        • 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 완료
            • 박창신
              완료
            • 굼벵이
              완료
            • 코딩만이 살길이다
              완료
            • 쑤우
              수강완료. 감사합니다.
            • Hyeon-Jun Ha
              완료
            • incursio
              감사합니다.
            • kumkum
              if(location.hash){
              fetchPage(location.hash.substr(2)); 0, 1, '2'번째 글짜의 제목으로 된 파일 내용을 fetchPage 메소드로 가져옴
              } else{
              fetchPage('welcome');
              }

              #!blabla(헤쉬뱅)
            • 허공
              190509 감사합니다.
            • 발헤
              감사합니다. 완료
            • JuicyFresh
              감사합니다.
              pjax 수업은 없군요.. ㅠ.ㅠ 아쉽습니다.
            • 웅이
              감사합니다:)
              대화보기
              • curlyjun
                substr(2)가 왜 들어가는지

                함수 fetchPage(name)를 살펴보시면 되는데
                인자로 보시는 바와 같이 'name'이 들어갑니다.
                substr로 앞에 해쉬와 뱅(#!)을 삭제하지 않으면 name에
                포함이 되므로 fetch(name).then(~ 에서 문제가 발생합니다.

                어디에 표시되는것에서 #!을 없애려는건지

                https://www.w3schools.com......asp
                해당 링크 참조하세요.
                대화보기
                • 웅이
                  substr을 쓰는 이유가 단지 콘솔에서 볼때
                  #을 없애기 위한건가요?

                  if(location.hash){
                  fetchPage(location.hash.substr(2)); 에서
                  substr(2)가 왜 들어가는지, 어디에 표시되는것에서 #!을 없애려는건지 모르겠어요 ㅠㅠ
                • 삼고잉
                  pjax라는 것도 알아야하는구나.. ㅠㅠ 셔뱅과 해시는 차이가 없다는 말씀이신거죠?
                • ㅇㅇㅇㅇ
                  <article>

                  </article>

                  왜 맨날 비워놓는건가요?
                • YUKI.N
                  해당 스크립트는 주소표시줄에 있는 해시태그 뒤의 문자를 긁어 오는 것이며
                  주소표시줄에서 직접 #four로 바꿨기 때문입니다.
                  대화보기
                  • <a>태그(링크)의 값으로 주어졌기에 그렇습니다. :)
                    <a href="#four"></a>
                    대화보기
                    • 최주원
                      해쉬뱅~ pjax 공부해야겠네요. : )
                    버전 관리
                    egoing
                    현재 버전
                    선택 버전
                    graphittie 자세히 보기