2023_09_21 Ajax 공부정리

https://www.youtube.com/watch?v=ujJBKEJgi0c&list=PLuHgQVnccGMA9-1PvblBehoGg7Pu1lg6q&index=14 

 

[생활코딩] Ajax 8.2강~10강

 

-$string.split('구분자') : 구분자로 string을 쪼개서 배열로 만드는 함수

-페이지의 list부분을 파일로 따로 관리하는 코드

    fetch('list').then(function(response){

        response.text().then(function(text){

          var items = text.split(','); //split을 이용하여 파일의 문자열을 콤마(,)를 기준으로 배열을 만듬

          var i = 0;

          var tags = '';

          while(i<items.length){ //반복문을 이용해 배열속 요소의 갯수만큼 실행시킴

            var item = items[i]; //각각의 요소를 꺼내는 작업

            item = item.trim(); //요소에 있는 빈칸을 자르는 함수. 변수.trim();

            var tag = '<li><a href="#!'+item+'" onclick="fetchPage(\''+item+'\')">'+item+'</a></li>'; //삽입하고자하는 태그

            tags = tags + tag; 

            i=i+1;

          }

          document.querySelector('#nav').innerHTML = tags; //반복문을 통해 모은 태그를 html안에 주입

        })

      })

불러오는 list파일의 형식

 

-fetch api를 사용하기 위해서는 fetch가 지원되는 브라우저가 있어야함. 지원하지 않는 브라우저에서도 동작시키기 위해서는 polyfill을 사용해야함.

-polyfill : 과거의 브라우저를 사용하는 사람들도 신기능을 사용가능하도록 하게 해줌.

https://velog.io/@qkrtnfks128/%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9-Ajax-fetch-API-polyfill

[생활코딩] Ajax - fetch API polyfill

 

fetch.js를 다운받고, fetch.js를 html파일에서 불러오도록 하면 구버전에서도 fetch api를 사용할 수 있음

 

fetch.js를 삽입한 코드(10번째줄)

브라우저에서 fetch.js가 200(성공)