AJAX

Seo·2020년 4월 22일

ajax web

Front-End

목록 보기

3/21

Asynchronous Javascript And XML
비동기 자바스크립트와 XML(직역)

AJAX 란?

비동기적인 웹 애플리케이션의 제작을 위해 몇 가지 조합을 이용하는 웹 개발 기법

AJAX 배경

Ajax라는 용어는 공식적으로 'AJAX: A new approach for a new application' 기사에서 구글이 Google pages 에서 사용한 기술에 기반하여 등장
2006년 W3C는 공식적인 웹 표준을 만들기 위한 시도로 규격 초안을 발행

전통적 웹 애플리케이션 비효율성

브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)
서버는 요청된 내용에 따라서 가공하여 새로운 웹 페이지를 작성, 응답
이때 최초에 폼을 가지고 있던 페이지와 새로운 웹 페이지는 일반적으로 유사한 내용을 가지 있는 경우가 많다.
결과적으로 중복되는 HTML 코드를 다시 한번 전송을 받음으로써 많은 대역폭을 낭비하게 된다.
대역폭의 낭비는 금전적 손실을 야기할 수 있으며 사용자와 대화(상호 반응)하는 서비스를 만들기 어렵게도 한다.

AJAX 특징

필요한 데이터만을 웹서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리

보통 SOAP이나 XML, JSON 기반의 웹 서비스 프로토콜이 사용(대부분 JSON)
웹 서버의 응답을 처리하기 위해 클라이언트 쪽에서는 자바스크립트를 사용
웹 서버에서 전적으로 처리되던 데이터 처리의 일부분이 클라이언트 쪽에서 처리 되므로 웹 브라우저와 웹 서버 사이에 교환되는 데이터량과 웹서버의 데이터 처리량도 줄어들기 때문에 애플리케이션의 응답성 향상
웹서버의 데이터 처리에 대한 부하를 줄여주는 일이 요청을 주는 수많은 컴퓨터에 대해서 일어나기 때문에 전체적인 웹 서버 처리량도 줄어들게 된다.

장점

페이지 이동없이 빠르게 화면을 전환
서버 처리를 기다리지 않고, 비동기 요청이 가능
수신하는 데이터 양을 줄일 수 있고, 클라이언트에서 처리 가능

단점

AJAX를 쓸 수 없는 브라우저에 대한 문제(거의 없음)
히스토리가 남지 않는다
HTTP 클라이언트의 기능이 한정
페이지 이동없는 통신으로 인한 보안상의 문제
지원하는 Charset이 한정되어 있다.
스크립트로 작성되므로 디버깅이 용이하지 않다.
요청을 남발하면 역으로 서버 부하가 늘 수 있음.
동일-출처 정책(SOP)으로 인해 다른 도메인과는 통신이 불가능(크로스-도메인 확인)

SOP(Same-Origin Policy, 동일-출처 정책) : 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식

동일 출처 의미 : 프로토콜,포트,호스트가 동일해야함

CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유) : 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
클라이언트는 서버에게 preflight라는 사전요청을 보낸다.

HTTP메소드는 OPTIONS를 사용하며, HOST에 클라이언트주소를, Origin에 서버주소를 넣어 보낸다.

이를 통해 권한이 있는지 확인할 수 있다. 서버는 preflight 요청을 핸들링하여 CORS를 설정한다.

허용 범위

모든 요청 허용
preflight 요청을 받기 위해 OPTIONS 메소드를 추가한다. 헤더에 아래 내용들을 포함시켜주면 된다.
Access-Control-Allow-Origin: * 
Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS 
Access-Control-Max-Age: 3600 
Access-Control-Allow-Headers: Origin,Accept,X-Requested-With,Content-Type,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization
선별적 요청 허용
클라이언트의 헤더값을 보고 서버에서 응답헤더에 해당 출처를 허용하는 걸 담아주면 된다.
# 클라이언트 요청 헤더

Origin: 요청을 보내는 페이지의 출처(도메인)
Access-Control-Request-Method: 실제 요청하려는 메소드
Access-Control-Request-Headers: 실제 요청에 포함되어 있는 헤더명
# 서버 응답 헤더

Access-Control-Allow-Origin : 허용할 출처
Access-Control-Allow-Credentials: 클라이언트 요청이 쿠키를 통해서 자격 증명을 해야 하는 경우에 true. true를 응답 받은 클라이언트는 실제요청시 서버에서 정의된 규격의 인증값이 담긴 쿠키를 같이 보내야 한다.
Access-Control-Expose-Headers: 클라이언트 요청에 포함되어도 되는 사용자 정의 해더.
Access-Control-Max-Age: 클라이언트에서 preflight의 요청 결과를 캐시하는 시간(초)
Access-Control-Allow-Methods: 요청을 허용하는 메소드. 기본값은 GET,POST이며 클라이언트에서는 헤더 값에 해당하는 메서드일 경우에만 실제 요청을 시도하게 된다.
Access-Control-Allow-Headers: 요청을 허용하는 헤더.