FRONT-END

[AJAX] AJAX란?

지에스정 2022. 1. 29. 22:29

Ajax(Asynchronous Javascript And Xml)

 

빠르게 동작하는 웹 페이지를 만들기 위한 개발 기법이다.

Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있고 백그라운드 영역에서 서버와 통신하여 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.

이 때 서버와 데이터를 주고받을 수 있는데 대표적인 데이터는 JSON, XML, HTML, 텍스트 등이 있다.

 

Ajax의 장점

 

웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지의 일부분만을 갱신할 수 있다

웹 페이지가 로드된 후에 서버에 데이터 요청을 보내거나 받을 수 있다

다양한 UI 구현(동적인 페이지 구현)이 가능해 진다

 

Ajax의 단점

 

페이지의 이동이 없기 때문에 히스토리 관리가 안된다

반복적인 데이터를 요청하면 느려지거나 작동하지 않게 된다(서버 과부하)

페이지의 이동이 없다는 것은 보안상의 문제도 발생할 수 있다

 

Ajax의 구성 요소

 

웹 페이지의 표현을 위한 HTML, CSS

데이터의 교환을 위한 JSON, XML

웹 서버와의 비동기식 통신을 위한 XMLHttpRequest 객체

통신 결과를 통해 화면 구성을 동적으로 조작하기 위한 DOM 모델

 

 XMLHttpRequest 객체

 

Ajax의 가장 핵심적인 구성 요소는 바로 XMLHttpRequest 객체이다

이 객체는 웹 브라우저가 서버와 데이터를 교환할 떄 사용된다

웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것은 이 xhr 객체를 사용하기 떄문이다

 

XMLHttpRequest객체 생성

 

 let 객체명 = new XMLHttpRequest();
 
//EX
let xhr = new XMLHttpRequest();

 

서버에 요청하기

 

Ajax에서는 xhr 객체를 사용해서 서버와 데이터를 교환한다

따라서 서버에 요청을 보내기 위해서는 xhr 객체를 생성한 후 객체의 open() 메소드를 통해 통로를 열어주고 send() 메소드를 사용해서 요청을 보내주는 과정을 거쳐야 한다

 

open()

 

서버로 보낼 Ajax 요청의 형식을 설정한다

 

xhr.open(전달방식, url주소, 비동기여부)

전달방식 : GET, POST, ...

URL 주소 : 요청을 처리할 서버의 파일 주소 전달

비동기 여부 : 요청을 동기식으로 전달할 지 비동기식으로 전달할 지 선택

 

send()

 

작성된 Ajax요청을 서버로 전달하는 메소드

 

xhr.send(); // GET방식(URL에 데이터가 포함되어 있을것)

xhr.send("키=값"); // POST방식

 

Ajax 요청시 xhr 객체는 각 상태별로 readyState가 바뀐다.

처음에는 0(XMLHttpRequest.UNSET,보내지않음)이었다가 open 메소드를 호출하는 순간 1(XMLHttpRequest.OPENED)로 바뀌고 send 호출시 순차적으로 2(XHR.HEADERS_RECEIVED), 3(XHR.LOADING), 4(XHR.DONE)로 바뀐다.

최종적으로 readyState가 4가 된다면 상태코드(xhr.status)가 성공을 가르키는 200 이나 201일때 응답을 홗인한다.