ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 2023_09_20 Ajax 공부정리
      개발공부/AJAX 2023. 9. 21. 00:05

      https://www.youtube.com/watch?v=w077w7FN-pg&list=PLuHgQVnccGMA9-1PvblBehoGg7Pu1lg6q 

      생활코딩 1

      [생활코딩] Ajax 1강~8.1강

       

      <배운것>

      -Ajax 기술을 이용해 싱글페이지어플리케이션을 만들 수 있음

      -Ajax를 사용하면 페이지를 부분적으로 수정할 수 있음. 이는 사용자들에게 속도 증가 경험, 서버에게는 비용적 효율 증대를 주는 장점이 있음

      -fetch.html

      <!DOCTYPE html>
      <html>
      <body>
          <article>

          </article>
          <input type="button" value="fetch" onclick="
              fetch('css').then(function(response){             //then안의 function은 익명함수
                  response.text().then(function(text){
                      document.querySelector('article').innerHTML = text;
                  })
              })
          ">
      </body>
      </html>

      onclick 따옴표 안에 있는 부분을 통해서 페이지의 내용을 동적으로 바꿀 수 있음. 원리는 모르지만 중요한건 css라는 파일을 가져와서 그안의 text를 뽑아오고, 그것을 페이지내에 삽입한다는 거.

       

      -fetch('html') : 'html'이라는 파일을 서버로부터 받아오는 함수.

      -Ajax의 첫번째 A는 Asynchronous(비동기적)이다.

          <input type="button" value="fetch" onclick="

         //fetch api는 asynchronous(비동기적인)로 작동함.
         //왜냐하면 서버에 요청을 하는동안 다른 코드를 먼저 수행하니까.
         //동기적으로 작동했다면,
         //서버에 요청하면서 then의 뒤쪽부분의 callbackme가 먼저 실행되고 그다음 부분들이 실행됨
         function callbackme(){
              console.log('response end');
         }
         fetch('html').then(callbackme);
         console.log(1);
         console.log(2);
          ">

      console.log(1),(2)가 먼저 실행되는모습. 비동기적 실행.

      -서버에 'JS'라는 파일을 요청하면, 그것을 response라는 이름의 객체로 받아옴.

      -response의 status가 200이라는 것은 성공적으로 파일을 받아왔다는 의미이며,

      404라는 것은 파일을 찾을 수 없다는 의미이다.

         fetch('JS').then(function(response) {
          if(response.status == '404'){
              alert('Not found')
          }
         });
         console.log(1);
         console.log(2);

      코드를 실행했을때의 모습. 상태(Status)가 404로 나옴.

      -위에서 배운 fetch api를 이용하여 index.html을 비동기적으로 구성하고 리팩토링 한 코드(6강)

        <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>   

      -태그에 id값을 입력하고 페이지 뒤에 #id값을 적으면 해당 내용으로 이동함

      <!DOCTYPE html>
      <html>
      <body>
          <a href="#three">three</a>
          <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam cumque blanditiis, quaerat dolore qui facere voluptatum ea omnis voluptatem libero reprehenderit rerum modi! Minus fugiat illo assumenda repellendus voluptas! Voluptatum, veritatis nesciunt explicabo quia deleniti placeat, nemo repellendus iusto accusantium quidem ducimus? Nam porro voluptate enim, tempora vel nisi molestias saepe? Ullam perspiciatis recusandae aspernatur expedita culpa, accusantium dolorem maiores iure nemo eligendi corporis necessitatibus tempore fuga, unde ipsam ad? Nisi ab possimus quasi molestiae sequi exercitationem a repellendus blanditiis excepturi perspiciatis aut laudantium veritatis nulla at consectetur placeat mollitia vitae, neque explicabo modi, doloribus facilis pariatur. Voluptate, voluptatem officiis!
          </p>
          <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam cumque blanditiis, quaerat dolore qui facere voluptatum ea omnis voluptatem libero reprehenderit rerum modi! Minus fugiat illo assumenda repellendus voluptas! Voluptatum, veritatis nesciunt explicabo quia deleniti placeat, nemo repellendus iusto accusantium quidem ducimus? Nam porro voluptate enim, tempora vel nisi molestias saepe? Ullam perspiciatis recusandae aspernatur expedita culpa, accusantium dolorem maiores iure nemo eligendi corporis necessitatibus tempore fuga, unde ipsam ad? Nisi ab possimus quasi molestiae sequi exercitationem a repellendus blanditiis excepturi perspiciatis aut laudantium veritatis nulla at consectetur placeat mollitia vitae, neque explicabo modi, doloribus facilis pariatur. Voluptate, voluptatem officiis!
          </p>
          <p id="three">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam cumque blanditiis, quaerat dolore qui facere voluptatum ea omnis voluptatem libero reprehenderit rerum modi! Minus fugiat illo assumenda repellendus voluptas! Voluptatum, veritatis nesciunt explicabo quia deleniti placeat, nemo repellendus iusto accusantium quidem ducimus? Nam porro voluptate enim, tempora vel nisi molestias saepe? Ullam perspiciatis recusandae aspernatur expedita culpa, accusantium dolorem maiores iure nemo eligendi corporis necessitatibus tempore fuga, unde ipsam ad? Nisi ab possimus quasi molestiae sequi exercitationem a repellendus blanditiis excepturi perspiciatis aut laudantium veritatis nulla at consectetur placeat mollitia vitae, neque explicabo modi, doloribus facilis pariatur. Voluptate, voluptatem officiis!
          </p>
          <script>
              if(location.hash){
                  console.log(location.hash.substr(1)); //substr(1)#뒤에있는 값만 가져옴
              } else {
                 
              }
          </script>
      </body>
      </html>

      p태그의 id값인 three를 이용해 url에 #three를 추가하여 해당내용으로 이동함

      -location.hash : url의 해쉬값을 받아옴 (출력 : #three)

      -substr(1) : 출력된 해쉬값 첫글자 다음 부분만을 출력함(출력 : three)

       

      -페이지를 변경할때 url도 같이 변경하도록 만듬(7강)

        <h1><a href="#!welcome" onclick="fetchPage('welcome')">WEB</a></h1>
        <input id="night_day" type="button" value="night" onclick="
          nightDayHandler(this);
        ">
        <ol>
          <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)); //url의 hash값을 받아와 일부를 추출하여 서버로부터 데이터를 가져오는 방식
          } else {
            fetchPage('welcome');
          }
        </script>

      -ol태그 안의 li태그들을 파일로 쪼개서 보관하는 방법(8.1강)

        <ol id="nav">
         
        </ol>
        <article></article>
        <script>
          function fetchPage(name){
            fetch(name).then(function(response){
            response.text().then(function(text){
              document.querySelector('article').innerHTML = text;
              })
            })
          }
            fetch('list').then(function(response){
              response.text().then(function(text){
                document.querySelector('#nav').innerHTML = text; //querySelector를 사용할때 태그의 id값을 이용해 선택하길 원하면 #을 붙이면 됨
              })
            })
          if (location.hash) {
            fetchPage(location.hash.substr(2));
          } else {
            fetchPage('welcome');
          }
        </script>

       

       

      '개발공부 > AJAX' 카테고리의 다른 글

      2023_09_21 Ajax 공부정리  (0) 2023.09.21

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바