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. 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를 통해 내부 파일을 맘대로 휘젓고 다니는 것을 막으려는 것 같습니다.
            • 정홍
              완료
            • 박창신
              완료
            • 굼벵이
              완료
            • 코딩만이 살길이다
              완료
            • 쑤우
              수강완료. 감사합니다.
            • 오승원
              IE는 개발중지된지 오래되서 지원안되는게 수두룩해요..
              대화보기
              • 박지수
                익스플로서(IE)에서는 저 fetch API가 작동하지 않는 거 같습니다. 크롬과 에지는 동작하구요.
              • 김성연
                감사합니다
              • incursio
                감사합니다
              • Hyeon-Jun Ha
                완료
              • kumkum
                공부내용 요약
                사용법으로 문제를 해결하다가 한계를 느낄 때 원리를 공부해라
                Asynchronous(동시에 존재하지 않는)

                같음
                function hamsu(){ }
                hamsu = function(){ }

                여기저기 불려다닐 함수라면 이름이 필요하지만 그렇지 않다면 이름이 없어도 됨


                fetch API를 찾지 못 했다고 뜰 때 해결법

                https://opentutorials.org......893
                위 링크의 이전 강의를 참고하셔서
                아파치 폴더에 fetch.html과 이때까지 작업한 것들을 넣으시고
                CSS.html이 아닌 CSS이름으로 된 일반 파일을 만드세요(파일 안에는 아무 문구 작성)
                이 모든 파일이 한 폴더 안에 있어야 작동합니다.

                인터넷 IPv4 주소(위 링크 강의에 찾는 법 있음)를 통해서
                fetch.html 파일을 열면 실행 됩니다
                2019년 5월 29일 기준
              • jessica_gil
                감사합니다!!
              • 허공
                190509 감사합니다.
              • 덱셀
                대박
              • 감사합니다~
                대화보기
                • _Thousand_
                  감사합니다.
                  대화보기
                  • 유튜브에 영상은 있는데 토픽 목록에 내용이 빠진거 같네요.
                    WEB3-Ajax-4.동적으로 컨텐츠 변경하기
                    https://youtu.be......PD0
                  • 발헤
                    감사합니다. 완료
                  • dj_yang
                    흠 파일 디렉토리가 제대로 되었는지 확인해보셔야할 것 같고 괄호가 제대로 열고 닫혔는지도 확인 한번 해보시면 좋을 것 같네요.
                    대화보기
                    • dj_yang
                      지금 localhost는 사실 localhost/index.html 이랑 같은 url 입니다. 경로를 설정해줘서 저렇게 보이는 거지요.
                      필요한 파일명을 알고 있다면 localhost/필요한파일명 식으로 실행하면 됩니다.

                      fetch.html 을 열고 싶을 경우 ==> localhost/fetch.html
                      대화보기
                      • Damien
                        bitnami로 아파치 서버를 켜고 go to application 누르면 index.html가 열리는데
                        fetch.html은 어떻게 하면 열 수 있나요?
                      • 꽝민이
                        https://kin.naver.com......711
                        지식인에 글도 올려보았습니다
                        대화보기
                        • 꽝민이
                          <input type="button" value="뭘봐" onclick="
                          fetch('css.html').then(function (response) {
                          response.text().then(function (text) {
                          alert(text);

                          이 코드에서 버튼을 눌러도 반응이 없네요 왜 그럴까요??
                          css.html 파일을 같은 폴더에 넣어놓고
                          http://127.0.0.1......로 파일로 연게 아닌 웹서버 통해서 열었는데 왜 그러죠??
                        • JuicyFresh
                          감사합니다.
                          이런 강의가 없었으면 배우는데 장벽이 컸을것 같아요.
                        • Seong-Won Bae
                          감사합니다.
                        • 돼지천재
                          감사합니다.
                        • 다른 폴더에 있다면 경로도 표시하셔야 합니다.
                          data/index.html 하시면 될 것 같습니다.
                          대화보기
                          • park
                            ajax 이제 공부시작했는데
                            왜 404인가 했더니 .html때문였네요ㅜㅜㅜㅜㅜㅜ
                            감사합니다!
                            대화보기
                            • jenny
                              fetch API - response 객체 강의 부터~
                            • 혹시 css파일 not found로 뜨시는 분 계시다면,
                              htdocs폴더 안에 css파일을 첨부하였는지 확인해보세요!
                            • jo_onc
                              response.status 의 개념 잘 알아갑니다 ^^
                              감사합니다~
                            버전 관리
                            egoing
                            현재 버전
                            선택 버전
                            graphittie 자세히 보기