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. Hyun Woo Lee
    새로운 Ajax 기법 흥미롭습니다!!
    좀더 자유롭게 사용할 수있게 학습해야겠어요.
  2. Ajax배움
    예를 들어, 하나의 웹 프로젝트 안에 data 폴더랑 image 폴더가 있고
    data 폴더 안에 index.html 파일이 있을 때
    따로 파일경로를 설정안하고 fetch('index.html')을 써도 index.html 내용을 보여주나요?
  3. 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 자세히 보기