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. ymh
    유튜브에 영상은 있는데 토픽 목록에 내용이 빠진거 같네요.
    WEB3-Ajax-4.동적으로 컨텐츠 변경하기
    https://youtu.be......PD0
  2. 발헤
    감사합니다. 완료
  3. 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 하시면 될 것 같습니다.
          대화보기
          • ajax 이제 공부시작했는데
            왜 404인가 했더니 .html때문였네요ㅜㅜㅜㅜㅜㅜ
            감사합니다!
            대화보기
            • 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
                그런 부분은 웹소켓 같은 기술을 살펴보셔요~
                대화보기
                • 헬리사우드
                  반복문 집어넣고 딜레이걸어주면 실시간통신이 가능할까요
                • 김창민
                  기본운영체제로 리눅스 사용하시는 분들 중에
                  아파치폴더에 실습파일 두고 아톰같은 편집기로 파일수정했을때 접근거부 뜨시면
                  아파치폴더에 쓰기권한을 주셔야됩니다.

                  /var/www/ 가셔서 html폴더에 대한 쓰기권한이 주어져 있는지 확인하시고요
                  chmod로 쓰기권한을 주시면 해결됩니다
                • 최주원
                  ajax의 기본예시네요. 쉽네요. 굿입니다. : )
                • metallsk
                  점점 흥미롭네요. 오늘도 즐강하고있어요. 다 egoing님의 수고 덕분입니다. 감사합니다.
                • 해봤는데
                  18.07.19 기준으로 혼란을 겪고 있으실 몇몇 분에게 도움이 될 수도 있는 정보 남깁니다.

                  1. 해당 강의는 실습환경이 준비되어야 하는데 그 실습환경은 Web1에서 아파치를 사용하는 것과, 이고잉님의 Github에서 전에 사용했던 예제 소스들을 로컬 폴더에 저장하는 것입니다.

                  따라서 Web1에 있는 서버 운용하는 강의를 다시 학습하시면 되겠습니다.


                  2. alret을 fetch('css')...의 소스로 바꿀 때 에러 경고창이 뜨시는 분들에게,

                  먼저, 해당 강의 첫번째 영상에서 나온 소스들을 직접 구현해보시려면, 같은 로컬 폴더에 css.html이 아니라 그냥 css의 이름을 가진 확장자가 없는 파일이 있어야 합니다. (html도 마찬가지)

                  저같은 경우에는 에디터에서 파일을 만들고 확장명을 쓰지 않은 다음, 에디터 내에서 <h2>CSS</h2> css is... 의 text를 작성했습니다.
                • 프로그래머를 꿈꾸며
                  아파치서버 키고, 해당 폴더에 프로젝트폴더를 넣고, local 주소로 돌리면 되요
                  아파치서버 설치 및 폴더 설정? 법은 web1강좌에 나와있어요
                  대화보기
                  • spirit
                    파일로 열지 말라고 하셨는데 서버로 여는 방법은 무엇인가요???
                  • 이하빛
                    [질문1]
                    이번 강의 첫번째 영상에서
                    web3-ajax 라는 이름의 파일 아이콘이 파일모양이 아닌데 책갈피?모양인 저것은 어떻게 만드는건가요?

                    -
                    [질문2]
                    http://localhost/ fetch.html를 작성하면 fetch 버튼을 클릭했을 때,

                    Not Found
                    The requested URL /html was not found on this server.

                    가 나오는데, 제 생각에는 제 파일 fetch가 html파일을 연결하지(불러오지) 못하는 거 같아요.

                    사진을 캡쳐해서 보여드리고싶은데ㅠㅠ말로만 드리니 어렵네요...
                    혹시 문제가 뭔지 아시면 답변부탁드립니다ㅠㅠ..
                  • egoing
                    보안적인 이유로 파일을 직접 열면 안될거에요. http로 주소가 시작되어야 합니다.
                    대화보기
                    • 이하빛
                      http://localhost /index.html 이건 정상적으로 나오는데

                      http://localhost /fetch.html 이건 not found라고 나와요ㅠ

                      그리고
                      file:///C:/Bitnami/wampstack-7.1.18-1/apache2/htdocs/web2_javascript-master/fetch.html
                      이 경로로 들어가면 fetch 버튼은 나오는데, 클릭했을 때 경고창이 뜨지않아요..

                      어디서 잘못된걸까요.....;ㅁ;
                    • ajax 1일차
                      console.log 가 왜 안뜰까요 .. ㅜㅜ
                    • Hyun Woo Lee
                      새로운 Ajax 기법 흥미롭습니다!!
                      좀더 자유롭게 사용할 수있게 학습해야겠어요.
                    • Ajax배움
                      예를 들어, 하나의 웹 프로젝트 안에 data 폴더랑 image 폴더가 있고
                      data 폴더 안에 index.html 파일이 있을 때
                      따로 파일경로를 설정안하고 fetch('index.html')을 써도 index.html 내용을 보여주나요?
                    • egoing
                      첫번째는 함수를 알려준거구요.
                      두번째는 함수를 실행시킨거에요~
                      대화보기
                      • callback
                        두번째 fetch api의 요청과 응답에서

                        callbackme = function(){
                        console.log('response end');
                        }
                        fetch('html').then(callbackme);
                        console.log(1);
                        console.log(2);


                        fetch('html').then(callbackme); // 1, 2, response end
                        fetch('html').then(callbackme()); // response end, 1, 2

                        이렇게 결과값이 다른 이유가 뭔가요?
                      • kshdyd
                        워.. 알듯말듯 ..ㅎㄷ;;
                      버전 관리
                      egoing
                      현재 버전
                      선택 버전
                      graphittie 자세히 보기