[IT지식] AJAX

[IT지식] AJAX

728x90

AJAX(Asynchronous JavaScript And XMLHttpRequest)

JavaScript, DOM, Fetch, XMLHttpReqest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법입니다.

이 웹페이지의 html에 의해서 유저에게 필요한 페이지가 렌더링 됩니다. 그러나 딱 한 부분 만큼은 html에 작성된 대로 유저가 사용하는 것이 아니라, 유저의 요구에 따라 반응하며 변화하는 부분이 존재합니다.

그 부분이 바로 검색창입니다. 검색창에 한 글자를 입력할 때마다, 해당 글자로 시작하는 단어들을 서버로부터 받아와, 그 바로 아래 추천검색어로 보여주게 됩니다. 다시 말해, 검색창에서는 필요한 데이터만 비동기적으로 받아와 렌더링되며, 여기에 AJAX가 사용됩니다.

AJAX를 구성하는 핵심 기술 3가지

JS

DOM

Fetch

이전 웹 애플리케이션에서는 form을 이용해서 서버에 데이터를 전달하고, 서버는 요청에 대한 응답으로 새로운 페이지를 제공해줬어야 한다. 다시 말해, 클라이언트에서 요청을 보내면 매번 새로운 페이지로 이동했어야했다.

그러나 fetch를 이용하면서 페이지를 이동하지 않더라도 서버로부터 필요한 데이터를 받아올 수 있게 됐다.

즉, 브라우저는 fetch가 서버에 요청을 보내고 응답을 받을 때 까지 멈춰있는 것이 아니라 비동기적으로 계속해서 페이지를 이용할 수 있게 된 것이다.

또한, JS가 DOM을 조작할 수 있기 때문에 fetch를 통해 전체 페이지가 아니라 필요한 부분의 데이터만 받아와

DOM에 적용 시켜 새로운 페이지로 이동하지 않고 기존 페이지에서 필요한 부분만 변경이 가능하다.

반응형

from http://codingbucks.tistory.com/235 by ccl(A) rewrite - 2021-12-25 01:28:01