끄적끄적 코딩
article thumbnail
Published 2023. 3. 17. 01:33
AJAX(Asynchronous Javascript And XML) FrontEnd

AJAX(Asynchronous Javascript And XML)
Ajax는 언어나 프레임워크가 아닌 구현하는 방식을 의미
Ajax는 웹에서 화면을 갱신하지 않고 데이터를 서버로부터 가져와 처리하는 방법을 의미
JavaScript의 XMLHttpRequest(XHR) 객체로 데이터를 전달하고 비동기 방식으로 결과를 조회
화면 갱신이 없으므로 사용자 입장에서는 편리하지만, 동적으로 DOM을 구성해야 하므로 구현이 복잡


Ajax 소개
일반 요청에 대한 응답
data 입력 후 event 발생
Ajax를 적용하지 않은 요청은 서버에서 data를 이용 하여 logic 처리
logic 처리에 대한 결과에 따라 응답 page를 생성하고 client에 전송(화면 전환이 일어 남)

Ajax 요청에 대한 응답
data를 입력 후 event 발생
Ajax를 적용하면 event 발생 시 서버에서 요청을 처리한 후 Text, XML 또는 JSON으로 응답
client(Browser)에서는 이 응답 data를 이용하여 화면 전환없이 현재 페이지에서 동적으로 화면을 재구성

서버와 클라이언트의 상호작용
웹 화면을 구성하는 방식은 서버 중심의 상호작용 방식과 클라이언트 중심의 상호작용 방식으로 구분
서버 중심의 개발방식은 화면 구성이 서버에서 이루어 진다.(프레젠테이션 영역의 JSP나, PHP, ASP 등)
클라이언트 중심의 개발방식은 클라이언트(웹 브라우저)에서 화면을 구성한다 (주로 Javascript)
Ajax는 클라이언트 중심의 개발 방식이며 비동기 요청보다는 동적 화면구성이 관건임

 

GET방식의 특징
URL에 변수(데이터)를 포함시켜 요청한다
데이터를 Header(헤더)에 포함하여 전송한다
URL에 데이터가 노출되어 보안에 취약하다
전송하는 길이에 제한이 있다.
캐싱 할 수 있다.

POST방식의 특징
URL에 변수(데이터)를 노출하지 않고 요청한다.
데이터를 Body(바디)에 포함시킨다.
URL에 데이터가 노출되지 않아서 기본 보안은 되어있다.
전송하는 길이에 제한이 없다.
캐싱 할 수 없다.

'FrontEnd' 카테고리의 다른 글

fetch()  (0) 2023.03.17
XMLHttpRequest  (0) 2023.03.17
Bootstrap  (0) 2023.03.15
반응형 웹  (0) 2023.03.15
Web Storage  (0) 2023.03.15

검색 태그