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.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창이 안뜨는데 왜그런걸까요... 강의내용에 나오는 코드를 그대로 입력했는데 이렇게 떠요 ㅜㅜ
  2. 고스트프리
    1. fetch에서 한글을 Network에서 깨지는 현상은 어떻게 해결해야되나요?
  3. 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 자세히 보기