WEB3 - Ajax

fetch API

수업소개

ajax를 구현하는 여러가지 기술이 있습니다. 우리 수업에서는 최신 기술인 fetch API를 이용할 것입니다. fetch API는 기존의 방식에 비해서 더 유연하고, 분명합니다.

 

 

 

fetch API 기본 사용법

소스코드

<!doctype html>
<html>
  <body>
    <article>

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

 

 

 

fetch API의 요청과 응답

 

 

 

 fetch API - response 객체

소스코드

변경사항

<!doctype html>
<html>
  <body>
    <article>

    </article>
    <input type="button" value="fetch" onclick="
      /*
      fetch('html').then(function(response){
        response.text().then(function(text){
          document.querySelector('article').innerHTML = text;
        })
      })
      */
      //Asynchronous
      fetch('html').then(function(response){
        if(response.status == '404'){
          alert('Not found')
        }
      });
      console.log(1);
      console.log(2);
    ">
  </body>
</html>

댓글

댓글 본문
  1. labis98
    20210719 completed.
  2. Yohanesty
    완료
  3. 별거
    2021.04.29 완료했습니다.
    점점 더 복잡해지고 있는 것 같습니다..
    그런데 포기하지 않고 끝까지 해보겠습니다.
    화이팅!
  4. 별거
    2021.04.29 완료했습니다. 와..
    404 Not Found

    이거 되게 간지나네요.
    파일이 없을때
    '404 Not Found'
    라는 글씨를 불러오는것도 가능하겠네요!
  5. 띨띨이
    안되시는분들은 최신 브라우저에서 보안때문에 fetch를 막고있어서 그런거에요. 자신의 컴퓨터에 있는 파일들만 막고있으니 전 시간에 배운 아파치를 이용해서 웹서버 상에서 불러오는 방식을 이용해보세요
  6. 단디
    완료
  7. 김우중
    감사합니다
  8. okokGGG
    전송이 안되시는 분들은 크롬으로 접속해 보세요
  9. 완료
  10. chimhyangmoo
    2021.02.06
  11. jeisyoon
    2021.01.29 수강
  12. 쿠킹호일
    21.01.28 완료
  13. 임주혁
    혹시 fetch가 안되시는 분은 깃허브로 저장소 만들어서 이용하시면 가능합니다
    https://opentutorials.org......891
  14. datsciseol
    210117
  15. 고니스타크
    2021 1일차
    fetch(filename).then(function(response))~
  16. 용용
    2번 esponse.status ===' 404' ('404'는 ' '때문에 문자임) 에서 === 3개를 써주게 되면 자료형까지 구분하여 비교하기 때문에
    ' ' 따옴표를 제외한 숫자 404만 esponse.status === 404 로 말씀대로 쓰시거나
    === 3개가 아닌 == 2개를 써주시면 값만 비교하기 때문에 따로 오류 안 날 거예요
    대화보기
    • 생활둘기
      2020 12 21
    • kkn1125
      20.12.20 완료~!
    • 들샘
      맨 처음 영상에서 fetch('css') 를 했는데 왜 안될까.. 싶었는데, fetch('css.txt')라고 주소창 뒤에 뜨는 그대로 적어줘야 가능하더라고요.

      고1 학생인데 이고잉님이 항상 도움이 되고 있어요! 감사합니다!!!
    • Yeonny
      2020.11.11 Done.
    • 라온
      이번 강의도 너무 잘 듣고 있습니다. 감사합니다.

      혹시나 ajax부터 보시는 분은
      1. 다운받은 소스에 css, html이 없으니 만들어주시면 되고
      2. response.status ==='404' 로 하면 script error가 나서 alert이 뜨지 않는데, 404 로 숫자로 비교하셔야 됩니다.
    • 2020.11.02.MON.
    • 웹짱
      2020.10.26 responseQWE객체, 404 = notpound
    • yulrinam
      201013 시청완료 감사합니다 :)
    • 김광래
      status 값이 크롬에서 봤을때 302가 뜨는데 404.html을 자동으로 송신하네요
      저렇게 적용했을 때 302값을 if 로 걸거나 404를 if로 걸어도 응답하지 않아
      기존에 파일이 있는걸 적용해서 if를 200으로 거니 반응을 하네요.
      웹서버를 설치안하고 써서 그런것인지 파일이 있다가 없어져서 그런건지 모르겠으나(쿠키는 삭제해봤으니 아닌것같고)
      안되는 부분이 이렇게 있다는걸 적고갑니다만
      원리만 알면 되는부분이기때문에 넘어갑니다.
    • 허우룩
      2020.09.06
    • HyeonHui Jeong
      9/3
    • 이상원
      fetch해서 받아오는 게 response 객체거든요 text로 변환하든지 json으로 변환하든지 해야 저희가 쓰기 좋아요.
      대화보기
      • 김희선
        localhost 작동이 않됩니다
        127...이것두 해보구
        인터넷에서 hosts피일을 바꾸라해서
        그것두 해보구
        뭘해두 않되네요
        나중에 hosts 파일 원상태로하려니 또 무슨 권한이 안된다하구...........
        점점 꼬여만 갑니다
        해결 방법 좀 부탁 드립니다
        e-mail : ksds@naver.com
        좋은 강의 계속 보게해 주셔서 감사합니다
      • dongmi95
        20.07.25완료
      • pupu
        2020/07/16 완료
      • 뽀짝이
        완료
      • 김혜린
        6월 24일 완료!
      • psyless
        20200620
      • Amousk
        좋은 영상 감사합니다.
      • 개발신
        복습완료
      • hpyseun
        05/22/2020 완료 감사합니다
      • 끝.
      • 호태왕
        진짜 설명 잘 하십니다....
      • OneJae EE
        20.04.15 수 / 37세 비전공자 / 완료
      • 야루
        완료
      • dos2004
        컴 초기화하고 다시해보세요 그럼 될수도
        대화보기
        • Always
          흠..쉽지 않네요 ㅜ
          유익한 강의 감사합니다!
        • 무슨짓거리를해도안되네요 ip주소 127... 뭐시기 설정하는거랑 자기자신 아이피주소 192 ... 하는거랑 htdocs파일안에 다같이 놔두는건 말안해도 다알고있고 문법틀렸나 싶어서 한글자한글자씩 다봐도 다똑같고 뭐 파일명 . 붙이는거 일반파일명 다해봤는데 도무지안되네 아시는분 있으시면 메일좀 부탁드릴게요 sosizi@daum.net
        • 현수
          감사합니다
        • 1d1c
          완료
        • tkqmflfk@hanmail.net
          완료
        • ㅇㅇ
          text를 받는것이 완료되야 화면에 출력할 수 있으니까요
          대화보기
          • justin
            fetch().then(function(response){}); 은 이해가 되는데 response.text().then을 왜 해야 하는지 이해가 잘 되지 않습니다..
          • eddylee123456
            완료
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기