[AJAX] AJAX 이해하기!

AJAX 란?

프로젝트에서 자주 사용했던 AJAX 처리 이론으로 이해하기.

AJAX 는 비동기 자바스크립트 XML 이다.

XML 에 기반한 종합 기술로 에이싱크러너스 자바크립트 XML 을 줄인 말이다. 

 

HTML, CSS, 자바스크립트, DOM, XML 등 기존에 사용되던 여러 기술을 함께 사용하는 개발 기법이다. 

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

웹 페이지 전체 로딩이 아닌 일부분만 갱신 가능!! ✨✨

 

◻️ 서버와 주고 받을 수 있는 데이터 형태

- JSON

- XML

- HTML

- 텍스트 파일 등

 

◻️ 장점

- 일부분만 갱신 가능

- 웹 페이지가 로드된 후 서버로 데이터 요청을 보낼 수 있다 / 받을 수 있다.

- 백그라운드 영역에서 서버로 데이터를 보낼 수 있다.

비동기 통신을 사용함으로써 데이터를 보내고 나서도 사용자가 다른 작업을 할 수 있다.

전통적인 웹 애플리케이션에 비해 서버 측 처리 속도도 빠르고 전송 데이터 양도 적다.

 

AJAX 한계

- 클라이언트 폴링 방식 (클라이언트가 서버에 데이터 요청하는 방식) 이라서 서버 푸시 방식의 실시간 서비스는 만들지 못한다.

- 바이너리 데이터는 주고 받을 수 없다.

- 스크립트가 포함된 서버가 아닌 다른 서버로 AJAX 요청을 보내지 못한다.

- 클라이언트 PC로 AJAX 요청을 보낼 수 없다.

 

👩‍💻 서버 푸시 방식 이란? : 서버가 알아서 특정 정보를 제공하는 것이다.

 

 

기존 동작 원리

1. 클라이언트가 서버에 요청한다.

2. 서버는 요청 정보를 접수하여 HTML, CSS 를 클라이언트에게 전송한다.

3. 클라이언트는 응답 받은 HTML,CSS를 가지고 화면을 갱신한다.

 

AJAX 동작 원리

1. 유저가 이벤트를 발생시켜 자바스크립트 실행

2. 자바스크립트는 XMLHttpRequest 객체를 사용해 서버로 요청

3. 서버는 전달받은 AJAX 요청 처리

4. 처리 결과를 HTML, XML, JSON 등의 데이터 형태로 웹 브라우저에 전달한다.

5. 서버한테 받은 데이터를 가지고 웹 페이지 일부만 갱신한다.

 

 

XMLHttpRequest 객체

AJAX 의 가장 핵심이다!

핵심 메소드로 : open, send, setRequestHeader , abort(), getAllResponseHeaders() 등이 있다.

 

◻️ 객체 생성

var 변수이름 = new XMLHttpRequest() 

var 변수이름 = new ActiveXObject("Microsoft.XMLHTTP");

 

◻️ 서버에 요청하기

서버에 요청할 때, GET 방식인지 POST 방식인지에 따라 AJAX 요청 형식이 달라진다.

GET 방식 일 때 : 변수이름.open("GET", "url?키=값&키2=값2", true); 

POST 방식 일 때 : 변수이름.open("POST", "url", true);

POST 방식일 때는 예전에 form 태그에 content-Type 을 설정했던 것처럼, URL 형식의 인코딩 방식을 설정해야한다.

 

◻️ 서버에서 응답 받기

1) readyState 프로퍼티 : 객체의 현재 상태 나타냄

2) status 프로퍼티 : 응답에 대한 숫자 HTTP 상태 코드이다. (200은 ok~ 404 는 Not Found)

3) onreadystatechange 프로퍼티 : readyState 프로퍼티 값이 변할 때 마다 자동으로 호출되는 함수를 설정한다.

 

responseText 프로퍼티

= 요청이 전송된 후 서버에서 받은 텍스트를 반환한다. 읽기 전용이다! 

var s  = httpRequest.responseText;

document.getElementById("layout").innerHTML = s;

 

responseXML 프로퍼티

= 요청에 의해 검색된 HTML 또는 XML 을 포함하는 도큐먼트를 반환한다. 읽기 전용이다!

var xmlData = httpRequest.responseXML ;

var subject = xmlData.getElementsByTagName("subject")[0].firstChild.nodeValue();

 

HTTP 헤더

서버가 특정 동작을 취하도록 하기 위해 클라이언트에서 전송하는 메시지이다!

구성 : 시작줄, 헤더, 본문

1) 시작줄

HTTP Method , URL 또는 도메인의 절대 경로, HTTP 버전

2) 헤더

HTTP 헤더의 기본 구조를 따른다. 헤더는 값까지 포함해 한 줄로 구성된다. AJAX 는 HTTP 요청 헤더를 직접 설정할 수 있고 내용을 직접 확인할 수도 있다!

3) 본문

본문은 요청의 마지막 부분에 들어간다. 모든 요청에 본문이 들어가지는 않는다.

 

◻️ setRequestHeader() 메소드

AJAX 는 요청을 보내기 전에 setRequestHeader() 메소드를 사용하여 HTTP 요청 헤더를 작성할 수 있다.

변수이름(객체).setRequestHeader(헤더이름, 헤더값)

 

 

HTTP 응답 헤더

HTTP 응답은 클라이언트의 HTTP Request 에 대한 서버의 답변이다!

구성 : 상태줄, 헤더, 본문

1) 상태줄

상태 코드와 텍스트가 나온다.

2) 헤더

응답이 들어가는 HTTP 헤더는 다른 헤더와 동일한 구조를 따른다.

3) 본문

본문은 응답의 마지막 부분에 들어간다.

 

◻️ getAllResponseHeaders() 메소드

HTTP 응답 헤더의 모든 헤더를 문자열로 반환한다. 

getResponseHeader(헤더 이름) 메소드

HTTP 응답 헤더 중 인수로 전달받은 이름과 일치하는 헤더의 값을 문자열로 반환한다.