티스토리 뷰

IT tech Coding/ajax

ajax 활용한 간단 프로그램 실행해 보기

Coding Life 2019. 6. 29. 09:24
반응형

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
댓글