본문 바로가기
IT/JavaScript

[JavaScript / 생활코딩] Ajax

by 프론트엔드 지식백과 2020. 12. 31.
 

· Ajax

- Ajax is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. (출처:위키피디아)

- 즉, JavaScript와 XML을 이용한 비동기적 정보 교환 기법

​

- Ajax로 현재 페이지의 화면 전환 없이 서버에서 데이터 자료를 전송 가능

- 새로 고침이나 새로운 HTML 페이지로 전환이 필요 없다.

- 부분만 로딩이 되므로 속도가 빠르다.

​

​

JavaScript 선행학습이 필요하다. (무조건)

​

생활코딩 강의를 들으며 이고잉님이 항상 강조하던 것은 중복의 제거이다. (+ 쪼개기)

이 수업 또한 중복을 제거해 나간다.

​

​

​

[이하는 생활코딩의 Ajax 수업 소개와 대상]

​

​

 

수업 소개

웹페이지에서 일부 정보가 달라졌음에도 전체 페이지를 리로드 하는 것은 효율적이지 않습니다.

Ajax는 리로드 없이 웹서버에게 정보를 요청해서 부분적으로 정보를 갱신해 주는 기술입니다.

 

 

 

 

 

수업 대상

페이지 리로드를 줄여서 사용자 경험을 향상시키고 싶은 분에게 권합니다.

리로드 할 때마다 모든 정보를 다운로드하는 비효율이 불만인 분에게도 필요한 수업입니다.

​

· fetch API

​

- The Fetch API is a simple interface for fetching resources.

 

 

​

​

Ajax에는 fetch()라는 함수가 있다.

​

사용법은 이러하다.

fetch('html').then(function(response){ response.text().then(function(text){ document.querySelector('article').innerHTML = text; }) });

fetch('html') : 웹브라우저에게 html이라는 파일을 서버에게 응답 요청

.then : fetch에게 응답이 끝나면 함수 실행 요청

비동기적 실행이므로 fetch가 실행 중일 때 다른 코드 실행

​

​

​

영단어 fetch는 (어디를 가서) 가지고 오다라는 뜻이 있다,

이와 비슷하게 Ajax에서도 html이라는 파일을 가지고 와~라는 의미인 거 같다.

 

 

​

항상 코딩하며 느끼는 거지만, 역시 중요한 건 구글링이다.

 

 

728x90
저작자표시

'IT > JavaScript' 카테고리의 다른 글

[JavaScript] 렌더링 트리(Critical Rendering Tree)  (0) 2021.01.03
[JavaScript] clientX/Y, pageX/Y, MouseEvent  (0) 2021.01.01
[JavaScript] document.querySelector  (1) 2021.01.01
[JavaScript] 객체 기본  (0) 2020.12.31
[JavaScript] Switch language button  (0) 2020.12.31

관련글

티스토리툴바