[JSP] Ajax와 XMLHttpRequest 객체

1) Ajax(Asynchronous Javascript and XML)란?

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

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

- 서버와 데이터를 주고 받을 수 있는데 대표적인 데이터의 형식은 JSON, XML, HTML, 텍스트 파일 등이 있다.

 

 

2) Ajax의 장점

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

2. 웹 페이지가 로드된 후에 서버로 데이터 요청이 가능하다.

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

 

 

3) Ajax의 단점

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

2. 반복적인 데이터의 요청이 있다면 느려지거나 작동이 멈춘다.

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

 

 

4) Ajax의 구성요소

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

2. 데이터의 교환을 위한 JSON이나 XML

3. 데이터에 접근하거나 화면 구성을 동적으로 조작하기 위한 DOM모델

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

5. 위에서 언급한 모든 기술을 결합하여 사용자의 작업 흐름을 제어하는데 이용되는 Javascript

 

 

5) XHR(XMLHttpRequest) 객체

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

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

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

- Ajax 기술을 위해 우리가 직접 저 객체 하나를 만들어서 서버와 통신을 명령해야 한다.

 

 

6) XHR(XMLHttpRequest) 객체 생성

let 변수이름 = new XMLHttpRequest( );

 

 

7) XHR(XMLHttpRequest) 객체 메소드

 

1. open( )

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

- 서버와의 통신을 위한 길을 열어주는 메소드이다.

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

- 전달방식 : GET, POST 방식 중 하나를 선택한다.

- url 주소 : 요청을 처리할 서버의 파일 주소를 전달한다.

- 동기여부 : 요청을 동기식으로 전달할지, 비동기식으로 전달할지를 선택한다.

 

2. send( )

- 작성된(설정되어 있는) Ajax 요청을 서버로 전달한다.

- GET방식일 때 => send( ); (url에 데이터가 담겨져있기때문에)

- POST방식일 때 => send("쿼리스트링");

 

 

8) Ajax의 흐름

 

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

 

2.  처음에는 readyState가 0(XMLHttpRequest.UNSET, 보내지않음) 이었다가

 

3. open 메소드를 호출하는 순간 1(XMLHttpRequest.OPENED)로 바뀌고

 

4. send 메소드를 호출하면 순차적으로 2(XMLHttpRequest.HEADERS_RECEIVED), 3(XMLHttpRequest.LOADING),             4(XMLHttpRequest.DONE)로 바뀐다.

 

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