1. 개념
Asynchronous JavaScript and XML의 약자로, 자바스크립트의 라이브러리 중 하나다.
- XMLHttpRequest객체를 사용해 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법
- 웹 페이지 전체를 로딩(새로고침)안해도 웹 페이지 일부분 갱신 가능(로드된 후 데이터 요청, 보내기 가능)
-> 자바스크립트를 사용한 비동기 통신이며, 클라이언트와 서버간에 XML 데이터를 주고 받는 기술
비동기 방식은 웹 페이지를 로드하지 않고 데이터를 불러온다.
Ajax를 통해 서버에 요청을 해도, 멈춰있지 않고 해당 프로그램은 계속 돌아가며 시간도 빠르다. 화면을 리로드할 경우 전체 리소스를 다 가져올 필요없이 일부분만 가져오기에 장점이 있다
- 백그라운드 영역에서 서버와 통신해 그 결과를 웹페이지 일부분에만 적용
- JSON, XML, HTML, 텍스트 파일 등 의 형태로 데이터 주고 받는다
- 구성요소 : html, css, DOM, JSON, XML, XMLHTTPRequest, js
2. 한계
- 클라이언트 풀링 방식(클라이언트가 서버에 데이터를 요청하는)으로, 서버 푸시 방식의 실시간 서비스는 no
- 바이너리 데이터 no, Ajax 스크립트가 포함딘 서버가 아니느 다른 서버로 요청 no
- 클라이언트의 pc로 Ajax 요청을 보낼 수 no
- Ajax 는 동적 페이지 렌더링을 하기 때문에 자바스크립를 해석하니 못하는 검색엔진에서는 내용이 검색되지 않다는 문제점이 존재
- 자바스크립트를 반드시 써야 한다. 모든 웹브라우저에서 공통으로 지원되는 프로그래밍 언어는 아직까지는 자바스크립트 하나 뿐이다. 따라서 꺼버리면 Ajax 기반 사이트는 화면의 일부만 그려진다.
3. 동작원리
① : 사용자에 의한 요청 이벤트가 발생합니다.
② : 요청 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트가 호출됩니다.
③ : 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보냅니다.
이때 웹 브라우저는 요청을 보내고 나서, 서버의 응답을 기다릴 필요 없이 다른 작업을 처리할 수 있습니다.
④ : 서버는 전달받은 XMLHttpRequest 객체를 가지고 Ajax 요청을 처리합니다
⑤와 ⑥ : 서버는 처리한 결과를 HTML, XML 또는 JSON 형태의 데이터로 웹 브라우저에 전달합니다.
이때 전달되는 응답은 새로운 페이지를 전부 보내는 것이 아니라 필요한 데이터만을 전달합니다.
⑦ : 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출합니다.
⑧ : 결과적으로 웹 페이지의 일부분만이 다시 로딩되어 표시됩니다.
- Ajax를 이용한 웹응용 프로그램은 js코드를 통해 웹서버와 통신을 한다. 이는 사용자의 동작에는 영향을 주지 않으면서도 백그라운데에서 지속해서 서버와 통신할 수 있다.
- 일반적인 http 프로토콜 -> 단방향 통신 : 클라이언트에서 요청을 보내고 서버쪽에서 응답을 받으면 연결이 끊어진다. 화면의 내용을 개싱하기 위해 다시 요청을 보내고 응답을 받으며 페이지 전체를 갱신 (엄청난 자원낭비)
- Ajax : Http 페이지 전체가 아닌 일부만 갱신 가능하도록 XMLHttpRequest 객체를 통해서 서버에 요청 -> Json이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.
4. 예제
4-1. XMLHttpRequest를 사용한 예제
<html>
<head>
<script type="text/javascript">
var request = new XMLHttpRequest(); // XMLHttpRequest 생성
request.open("GET", "//namu.wiki/raw/틀:틀%20모음/"); // 데이터를 GET Method로 요청
request.send(); // 실제 Send
request.onreadystatechange = function() {
if ( request.readyState == 4 && request.status == 200 ) { // request가 끝났으며(4), 성공적(200)인 경우. request.onload=()=>{} 으로 교체해도 가능하다.
document.getElementById("content").innerHTML = request.responseText; // #content 태그 내의 내용을 받아온 텍스트로 교체.
}
};
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>4-2. Fetch API 사용 예제
<html>
<head>
<script type="text/javascript">
fetch("//namu.wiki/raw/틀:틀%20모음/") // fetch API로 데이터를 요청
.then((response) => {
if (response.ok) { // HTTP Status가 성공적인 (200 등) 경우
return response.text(); // Response Body를 text로 꺼내옴
} else { // 4xx/5xx 에러로 요청 실패
return Promise.reject(`Error code ${response.status}`);
}
}).then((text) => {
document.getElementById("content").innerHTML = text; // #content 태그 내의 내용을 받아온 텍스트로 교체.
}).catch(() => { // 네트워크 문제일 경우만 reject됨
console.warn('network problem');
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>4-3. jQuery를 이용한 예제
<html>
<head>
<script type="text/javascript">
$.ajax({
url: "//namu.wiki/raw/틀:틀%20모음/",
method: "GET",
dataType: "text",
success: function(data) {
$("#content").html(data);
}
})
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>-> $.ajax 함수를 이용해서 자체적인 AJAX를 지원해주기 때문에, 콜백함수만 넣어주면 간단히 해결된다.