수업소개
ajax를 구현하는 여러가지 기술이 있습니다. 우리 수업에서는 최신 기술인 fetch API를 이용할 것입니다. fetch API는 기존의 방식에 비해서 더 유연하고, 분명합니다.
fetch API 기본 사용법
소스코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!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 객체
소스코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!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> |
