Ajax (생활코딩 WEB2 - JavaScript)

1. 수업소개

JS가 도입되면서 동적으로, 애플리케이션으로 발전함

'웹페이지를 부분적으로 변경하는 것'

 

2. fetch API

fetch API 기본 사용법

    <article>
    </article>
    <input type="button" value="fetch" onclick="
    fetch('html').then(function(response){
      response.text().then(function(text){
        document.querySelector('article').innerHTML = text;
      })
    })
    ">

 

fetch API의 요청과 응답

    function callbackme(){
      console.log('response end');
    }
    fetch('html').then(callbackme);
      console.log(1);
      console.log(2);

콘솔에 1,2,response end 순서대로 출력됨

Asynchronous(비동기)로 실행됨

 

fetch API - response 객체

    function callbackme(){
      console.log('response end');
    }

    callbackme = function(){
      console.log('response end');
    }

위의 두 코드는 같음. 따라서

    fetch('html').then(function(){
      console.log('response end');
    });
      console.log(1);
      console.log(2);

이렇게 써도 됨. 이 상황에서 callbackme 라는 이름은 필요 없음

status: 200 - 성공이라는 의미, 실패하면 404 (not found)

 

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

파일을 찾을 수 없을 때, Not found 라는 경고창이 뜨게 됨

 

3. Ajax의 적용

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

바디 안에 <article></article>이 있어야 출력됨!!

css, html, javascript 파일은 만들면 됨

 

리팩토링 - 함수화

  <script>
  function fetchPage(name){
    fetch(name).then(function(response){
      response.text().then(function(text){
        document.querySelector('article').innerHTML = text;
      })
    });
  }
  </script>

중복되는 코드를 name 으로 묶음

    <li><a onclick="fetchPage('html')">HTML</a></li>
    <li><a onclick="fetchPage('css')">CSS</a></li>
    <li><a onclick="fetchPage('javascript')">JavaScript</a></li>

그리고 이렇게 간결하게 코드를 수정하면 됨

 

4. 초기 페이지 구현

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

'how to get hash from url javascript' 검색'javascript how to get sub string' 검색

    <script>
      if(location.hash){
        console.log(location.hash.substr(1));
      } else {
      }
    </script>

 

적용

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

 

  if(location.hash){
    fetchPage(location.hash.substr(2));
  } else {
      fetchPage('welcome')
  }

이 코드만으로는 맹점이 있음, Pjax가 그것들을 보완한 것

 

5. 글목록 Ajax로 구현하기

강의1list 파일 만들고 입력<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>
<li><a href="#!ajax" onclick="fetchPage('ajax')">ajax</a></li>

 

index 파일에 입력

  fetch('list').then(function(response){
    response.text().then(function(text){
      document.querySelector('#nav').innerHTML = text;
    })
  });

 

강의2'how to make array from string in javascript' 검색'how to remove front back white space in string javascript' 검색

 

list 파일에 입력html,css,javascript

 

index 파일에 입력

  fetch('list').then(function(response){
    response.text().then(function(text){
      var items = text.split(',');
      var i = 0;
      var tags = '';
      while(i < items.length){
        var item = items[i];
        item = item.trim();
        var tag = '<li><a href="#!'+item+'" onclick="fetchPage(\''+item+'\')">'+item+'</a></li>';
        tags = tags + tag;
        i = i + 1;
      }
      document.querySelector('#nav').innerHTML = tags;
    })
  });

 

6. fetch API polyfill

<script src="fetch/fetch.js"></script>