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. 프로그래머를 꿈꾸며
    아파치서버 키고, 해당 폴더에 프로젝트폴더를 넣고, 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 자세히 보기