Ajax

songsong·2020년 3월 30일

Ajax

목록 보기

1/2

📖 Asynchronous Javascript And XML

1. Ajax 정의

Ajax는 JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And XML(비동기식 자바스크립트와 XML)의 약자이다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술이라고 할 수 있겠다.

2. Ajax 장점

👉 요청과 응답을 과정을 통해 불필요한 부분까지 처리하지 않는다. 즉, 필요한 부분만 별도 요청 가능.
👉 모든 데이터가 업데이트 될 필요 없으므로 불필요한 대역폭 감소 가능, 비용 절감 효과
👉 사용자의 대기시간 감소, 페이지를 새로고침 하지 않고도 필요한 데이터의 내용을 업데이트 가능
👉 기존의 동기 방식이 아닌, 비동기 방식으로 데이터(Data)를 요청 및 처리 하기 때문이다.

📌 특징(주의 할 점!)
🧐 Ajax를 사용해서 전송한 가능한 데이터는 XML, TEXT, HTML, JSON이 있다.

3-1. XMLHttpRequest 객체

👉 Ajax 비동기 통신을 위해서는 XHR (XMLHttpRequest) 객체를 사용해야 한다.
👉 XHR 객체는 생성자 함수이기 때문에 반드시 new를 통해서 생성해야 한다.
👉 XHR 객체가 요청 (Request)을 하게 되면 응답 (Response)를 받아온다.

✍Syntax

var xhr = new XMLHttpRequest();

3-2. 서버에 요청(Request)

Ajax에서 XMLHttpRequest 객체를 사용하여 서버와 데이터 교환을 한다. 따라서 서버에 요청을 보내기 위해서는 XMLHttpRequest 객체를 생성하고 난 후에 open(), send() 메서드를 사용하여 요청을 보낼 수 있다.

👉 open() 메서드는 서버로 요청을 준비하기 위한 설정.
👉 send() 메서드는 준비된 요청을 서버에 전달.

✍Syntax

var xhr = new XMLHttpRequest();
xhr.open(method, url[, async]);
xhr.send();

📄 method
요청을 전달할 방식으로 GET, POST 방식 중 하나를 선택.

📄 url
요청을 보낼 URL.

📄 async(option)
비동기 조작 여부를 설정 ,기본 값 true

3-3. GET 방식, POST 방식

👉 GET 방식

GET 방식은 주소에 데이터를 추가하여 전달하는 방식이다.
GET 방식의 HTTP 요청은 브라우저의 의해 캐시(cached)되어 저장된다.
GET 방식은 보안상 취약점이 존재하므로 중요한 데이터는 POST 사용 방식을 권장한다.
GET 방식의 경우 send() 메서드의 인수는 무시되고 null로 설정된다.

👉 POST 방식

POST 방식은 별도로 첨부하여 전달하는 방식이다.
POST 방식의 HTTP 요청은 브라우저의 의해 캐시되지 않으므로, 브라우저 히스토리에 남지 않는다.
POST 방식은 데이터의 길이에 대한 제한도 없으며, GET 방식 보다 보안성이 높다.

3-4. 서버로 부터 응답(Response)

👉 서버로 부터의 응답을 확인하기 위해 사용하는 XMLHttpRequest 속성(Property)

readyState
status
onreadystatechange

3-4-1. readyState

👉 XMLHttpRequest 객체의 현재 상태를 나타낸다.

UNSENT(0) : XMLHttpRequest 객체 생성.
OPENED(1) : open 메서드가 성공적으로 실행.
HEADERS_RECEIVED(2) : 모든 요청에 대한 응답이 도착.
LOADING(3) : 요청한 데이터 처리 중.
DONE(4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료.

3-4-2. status

👉 서버의 문서 상태를 나타낸다.

100(Continue), 101(Switching Protocols) : 진행 중인 상태
200(OK) : 성공
404(Client Error) : 잘못된 주소, 페이지를 찾을 수 없는 경우
5XX(Server Error) : Server 문제