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. ㅇㅇ
    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 의 개념 잘 알아갑니다 ^^
                            감사합니다~
                          • jo_onc
                            불러올 파일이 만약 "css.html" 이라면,
                            fetch('css') 이 아니라 fetch('css.html')이렇게 하셔야합니다~
                          • fetch.html파일을 아래 주소로 열어보세요~
                            http://localhost......tml

                            이고잉님이 fetch.html파일을 폴더에서 직접 열면 안된다고 하셨거든요.
                            그것때문에 그런거같아요.
                            대화보기
                            • 삼고잉
                              nodejs 를 이용해 pug view engine에서 fetch API를 써보려고하는데안먹네요ㅠㅅㅠ
                              혹시 방법 아시는분 계실까요
                            • 웅이
                              fetch.html:13 Fetch API cannot load file:///C:/Bitnami/wampstack-7.1.15-0/apache2/htdocs/web2_javascript-master/web2_javascript-master/css. URL scheme must be "http" or "https" for CORS request.
                              onclick @ fetch.html:13
                              fetch.html:13

                              Uncaught (in promise) TypeError: Failed to fetch
                              at HTMLInputElement.onclick (fetch.html:13)

                              소스검사해보면 이런 오류들로 alert창이 안뜨는데 왜그런걸까요... 강의내용에 나오는 코드를 그대로 입력했는데 이렇게 떠요 ㅜㅜ
                            • 고스트프리
                              1. fetch에서 한글을 Network에서 깨지는 현상은 어떻게 해결해야되나요?
                            • egoing
                              그런 부분은 웹소켓 같은 기술을 살펴보셔요~
                              대화보기
                              버전 관리
                              egoing
                              현재 버전
                              선택 버전
                              graphittie 자세히 보기