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. 임주혁
    혹시 fetch가 안되시는 분은 깃허브로 저장소 만들어서 이용하시면 가능합니다
    https://opentutorials.org......891
  2. datsciseol
    210117
  3. 고니스타크
    2021 1일차
    fetch(filename).then(function(response))~
  4. 용용
    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완료
      • 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
        • 현수
          감사합니다
        • 완료
        • tkqmflfk@hanmail.net
          완료
        • ㅇㅇ
          text를 받는것이 완료되야 화면에 출력할 수 있으니까요
          대화보기
          • justin
            fetch().then(function(response){}); 은 이해가 되는데 response.text().then을 왜 해야 하는지 이해가 잘 되지 않습니다..
          • eddylee123456
            완료
          • junkherakim@gmail.com
            복받으실겁니다!!
          • ajax에서 타 도메인간 통신을 일단은 막고있고 가능하긴 한데 그러려면 정보를 제공하는 서버에서 뭐를 허용(이부분은 자세히 모르지만)해야 하는걸로 알고있습니다! 구글에 ajax 타도메인간 통신으로 검색해 보시면 원하시는 정보 나올꺼같아요!
            대화보기
            • thsths
              완료
            • 이바름
              로또 페이지는 크롤링을 허용하지 않은 페이지입니다.
              페이지내에서 봇이 검색하는것을 허용하지 않았다 라는 뜻이 아닐까요...
              대화보기
              • 병아리개발자
                어디다 써야 될지 몰라서 여기다 씁니다. 이고잉님포함 고수님들 만약 보신다면 혹시 도와주실수 있을까요??
                생활코딩 즐겨?보며 많은도움 받고 있는 한 사람입니다.
                다름이 아니라 HTML에서 feth를 이용해 로또 api를 가져올려고 하는데요

                해당 코드블록을 크롬 개발도구를 이용해 콘솔로 찍어 보면 api를 가져 올 수 없다고 error가 발생합니다.ㅠ

                실행 코드블록
                fetch("https://www.nlotto.co.kr/common.do?method=getLottoNumber&drwNo=890")
                .then(response => response.json())
                .then(json => console.log(json))
                .catch(err => console.log(err));

                error 내용
                Access to fetch at 'https://www.nlotto.co.kr/common.do?method=getLottoNumber&drwNo=890' from origin 'http://127.0.0.1' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

                동일출처 정책 CORS 문제라고만 추론한 상태이며 더이상 해결법은 찾지 못하겠습니다. ㅠㅠ;
                도와주세요. 카톡 ID : cgu999
              • 샬롬
                완료
              • thankyou
                감사합니다!
                대화보기
                • 2019.11.24 완료
                • 홍주호
                  20191124 완료
                • phillip
                  안녕하세요. 이해하기 쉬운 설명 덕분에 코딩이 즐겁습니다. ^^

                  혹시 독자분들 중 fetch API가 실행이 안되시는 경우에 참고 하시라고 몇자 적어 봅니다.

                  Cross-Origin Request Blocked

                  새버전의 브라우저에서는 보안상의 이유로 fetch API에서 CORS request를 막아 놨습니다.
                  (Firefox 브라우저의 경우, Firefox68 이후 버전부터는 않됩니다.)

                  즉 Web Server 상 에서 구동 되고 있는 파일이 아닌 이상, fetch API를 통해 자신의 컴퓨터에 있는 아무 파일이나 읽어 들일 수가 없습니다.

                  강의 예제에서 사용된 fetch('css')의 경우, css 부분이 실제 URL인 경우만 사용 가능 합니다.

                  예를 들어
                  fetch('https://jsonplaceholder.typicode.com/todos/1') <--바로 이 부분 입니다. (테스트를 위해 가짜 json파일을
                  .then(response => response.json()) 보내주는 dummy 싸이트 입니다.)
                  .then(json => console.log(json))

                  (위의 예제는 text파일이 아닌 json 파일을 가져 오는 것이고 ' => '은 egoing 선생님이 말씀하신 익명함수를 람다식으로 표현 한것 뿐 똑 같은 내용 입니다.)

                  즉 이를 뒤집어 말하면, 자신의 컴에 있는 파일을 읽어오려면 Apache등 web server를 실행 시키고 Web Server에 로드 된 파일만 읽어 올수 있다는 말과 동일 합니다. (아래 kumkum님의 해법을 참조 하세요 ^^)

                  아마도 fetch API를 통해 내부 파일을 맘대로 휘젓고 다니는 것을 막으려는 것 같습니다.
                • 정홍
                  완료
                • 박창신
                  완료
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기