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의 개념을 파악하는 것에는 위의 예제가 정말 좋습니다.
싱글페이지 웹어플리케이션을 만들어 보자구요~~~
'IT tech Coding > ajax' 카테고리의 다른 글
| ajax abort 지옥에서 탈출하기, 하루종일 삽질일기 (0) | 2023.04.18 |
|---|---|
| ajax 누구냐 넌? 대단하다고 들었는데, 도대체 가.... (0) | 2019.07.09 |
| ajax Can I use 사이트를 통해 fetch 호환성여부 확인가능 (0) | 2019.06.29 |
| ajax 해시, 특정한 부분으로 접근할때 필요한 것 (0) | 2019.06.29 |
| Ajax fetch함수 만들어서 쉽게 해보자구요~ (0) | 2019.06.29 |
