ajax 활용한 간단 프로그램 실행해 보기
fetch('html').then(function(response){ // 서버에게 html이라는 파일을 요청
response.text().then(function(text){
alert(text); // 서버가 응답해 준 데이터가 text에 저장된다. }) })
<!doctype html>
<html>
<body>
<article>
<input type="button" value="fetch" onclick="
fetch('html').then(function(response) {
response.text().then(function(text){
alert(text);
document.querySelector('article').innerHTML = text; -> 이부분을 활용해서 ajax을 완성한다. article태그의 내용이 이렇게 변경됩니다.
})
})
">
</body>
</html>
ajax는 수많은 로딩타임을 줄여주는 것이 가장 큰 장점입니다.
fetch API 사용하는 방법을 알아야 합니다.
fetch('html');
-> html이란 파일을 서버에서 불러오라는 명령어....
그럼 then은??? 뭘까요?
fetch('html').then();
응답이 끝나면 then( '함수명');
함수명을 실행한다는 의미입니다.
응답이 끝나면 함수명을 실행합니다.
//Asynchronous Javascript And Xml
비동기식이란 말은 함께 움직이지 않다는 의미가 아닐까요?
Ajax의 개념을 파악하는 것에는 위의 예제가 정말 좋습니다.
싱글페이지 웹어플리케이션을 만들어 보자구요~~~