Ajax란?
Ajax란 Asynchronous JavaScript and XML의 약자입니다.
Ajax는 웹페이지 전체를 다시 로딩하지 않고도, 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체페이지를 새로고침 할 필요없이 필요한 일부분의 데이터만을 갱신할 수 있게 도와줍니다. 즉, Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다.
Ajax는 아래와 같은 기술들이 혼합적으로 사용되며,
- HTML
- DOM
- Javascript
- XMLHttpRequest
- ETC
서버와 [JSON, XML, HTML, 텍스트 파일]등을 주고 받을 수 있게 됩니다.
장점
- 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다.
- 웹 페이지가 로드된 후에 서버로 데이터 요청을 보내고/받을 수 있습니다.
- 백그라운드 영역에서 서버로 데이터를 보낼 수 있습니다.
한계
- Ajax는 클라이언트가 서브에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없습니다.
클라이언트 풀링(client pooling)
사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식입니다.
이에 반해 서버 푸시(server push) 방식은 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 것으로 스마트폰에서 각종 앱이 보내는 푸시 알림이 서버 푸시 방식의 대표적인 예 입니다. - Ajax로는 바이너리 데이터를 보내거나 받을 수 없습니다.
- Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없습니다.
- 클라이언트의 PC로 Ajax 요청을 보낼 수는 없습니다.
- 히스토리 관리가 되지 않습니다.
- 페이지 이동없는 통신으로 인한 보안상의 문제가 있습니다.
Ajax 실행 단계
- XMLHttpRequest(요청) 객체를 생성한다.
- 처리 결과를 받을 이벤트 리스너 등록한다.
- 서버로 보낼 데이터를 생성한다.
- 클라이언트와 서버 간의 연결 요청을 준비한다(
opne()메서드 이용)
4-1. 서버로 보낼 데이터 전송방식을 설정한다(GET, POST 등)
4-2. 서버 응답 방식을 설정한다(동기, 비동기) - 실제 데이터를 전송한다.
- 응답 처리를 한다.
- 데이터 처리를 한다.
window.onload = function(){
// 1. 요청 객체 생성
let xmlHttp = new XMLHttpRequest();
// 2. 요청에 대한 응답 처리 이벤트 리스너 등록
xmlHttp.onreadystatechange = on_ReadyStateChange;
// 3. 서버로 보낼 매개변수 생성
let strParam = 'id=Tiger&pw=1234';
// 4. 클라이언트와 서버 간의 연결 요청 준비
xmlHttp.open('GET','test'+strParam, true);
// 5. 실제 데이터를 전송
xmlHttp.send('id=Tiger&pw=1234');
}
// 6. 응답처리
function on_ReadyStateChange(){
// 4 === 데이터 전송 완료
if(xmlHttp.readyState === 4) {
// 200 으로 응답
if(xmlHttp.status === 200) {
// 7. 내가 원하는 방식으로 데이터를 처리
}
}
}axios, fetch
기존 WEB에서 어떤 리소스를 비동기로 요청하기 위해서는 XHR(XML HTTP Request) 객체를 사용했어야 했습니다. 하지만 XHR은 잘 디자인 되어진 API가 아닙니다. 요청의 상태나 변경을 구독하려면 Event를 등록해서 변경사항을 받아야 했고 요청의 성공, 실패 여부나 상태에 따라 처리하는 로직이 들어가기 좋지 않았습니다.
이를 보완하기 위해서 HTTP 요청에 최적화가 되어 있고 상태도 잘 추상화 되어있는 api들이 생겨나기 시작했습니다. 대표적으로 axios와 fetch가 있습니다.
axios
Promise based HTTP client for the browser and node.js
즉, node.js와 브라우저를 위한 HTTP 통신 라이브러리입니다.
비동기로 HTTP 통신을 가능하게 해주며 return 을 Promise 객체로 해주기 때문에 response 데이터를 다루기도 쉽숩니다.
const url = 'https://요청_보내는_URL_주소';
axios.get(url)
.then((response) => console.log(response))
.catch((error) => console.log(error))fetch
fetch는 ES6부터 JavaScript의 내장 라이브러리로 들어왔습니다.
Promise 기반으로 만들어졌기 때문에 axios와 마찬가지로 데이터를 다루는데 어렵지 않으며, 내장 라이브러리라는 장점으로 인해 편리합니다.
const url = 'https://요청_보내는_URL_주소';
fetch(url)
.then((response) => response.json())