AJAX란?

💡 AJAX(Asynchronous Javascript And XML)

• AJAX란, JavaScript의 라이브러리중 하나이며, HTML, CSS, 자바스크립트, DOM, XML 등 기존에 사용되던 여러 기술을 함께 사용하는 새로운 개발 기법입니다.
• 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이며, JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술입니다.
• 즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것입니다.

---

💡 AJAX를 사용하는 이유

• 단순하게 생각하면, WEB 화면에서 무언가 부르거나 데이터를 조회하고 싶을 경우, 페이지 전체를 새로고침하지 않기 위해 사용한다고 볼 수 있습니다.
• 기본적으로 HTTP 프로토콜은 클라이언트쪽에서 Request를 보내고 서버쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있습니다. 그래서 화면의 내용을 갱신하기 위해서는 다시 Request 및 Response를 하며 페이지 전체를 갱신하게 됩니다. 하지만 이렇게 할 경우, 불필요한 자원낭비와 시간낭비를 초래하고 말 것입니다.
• 따라서 AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest 객체를 통해 서버에 Request합니다. 이 경우, JSON이나 XML 형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있습니다.

---

💡 AJAX의 장단점

✔ 장점

• 웹 페이지 속도 향상 & 생산성 증대
  • 서버의 처리가 완료될 때까지 기다리지 않고 이후의 작업을 이어서 처리할 수 있다.
  • 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다. (SPA)
  • XMLHttpRequest를 통해 필요로하는 일부 데이터만 JSON이나 XML형태로 갱신하기 때문에 그만큼의 시간과 자원을 아낄 수 있다.
• 코드의 컴팩트화
  • 각각의 페이지마다 HTML 코드를 가지고 있을 필요가 없고, 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어든다.
• 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다.

 

✔ 단점

• AJAX는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없다.
  • 클라이언트 풀링(client pooling) 방식이란 사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식입니다.
  • 이에 반해 서버 푸시(server push) 방식은 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 것으로, 스마트폰에서 각종 앱이 보내는 푸시 알림이 서버 푸시 방식의 대표적인 예입니다.
• 히스토리 관리가 되지 않는다. (보안에 좀 더 신경 써야한다.)
• 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
• XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않는다. 따라서 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다.
• Script로 작성되므로 디버깅이 용이하지 않다.

---

💡 AJAX 동작 방식

AJAX를 이용한 웹 응용 프로그램은 자바스크립트 코드를 통해 웹 서버와 통신을 하며 사용자의 동작에 영향을 주지 않으면서 백그라운드에서 지속해서 서버와 통신할 수 있습니다.

1️⃣ 사용자에 의한 요청 이벤트가 발생한다.

2️⃣ 요청 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트가 호출된다.

3️⃣ 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보낸다.

• 이때 웹 브라우저는 요청을 보내고나서, 서버의 응답을 기다릴 필요 없이 다른 작업을 처리할 수 있다.

4️⃣ 서버는 전달받은 XMLHttpRequest 객체를 가지고 AJAX 요청을 처리한다.

5️⃣, 6️⃣ 서버는 처리한 결과를 HTML, XML 또는 JSON 형태의 데이터로 웹 브라우저에 전달한다.

• 이때 전달되는 응답은 새로운 페이지를 전부 보내는 것이 아니라 필요한 데이터만을 전달한다.

7️⃣ 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출한다.

8️⃣ 결과적으로 웹 페이지의 일부분만이 다시 로딩되어 표시된다.

---

💡 AJAX 사용 예시

• AJAX는 XMLHttpRequest 객체를 얻은 뒤, URL을 통해 요청하고 응답을 받으면 응답 결과에 맞는 함수를 실행하는 구조로 되어 있습니다.
• AJAX가 효율적이라고는 해도 이렇게 하게 될 경우, 코드가 길어지기 때문에 jQuery에서 그 문제를 해결해주고 있습니다.

// This function gets invoked when server sends the response
function reqListener (e) {
    console.log(e.currentTarget.response);
}

var oReq = new XMLHttpRequest();
var serverAddress = "https://hacker-news.firebaseio.com/v0/topstories.json";

oReq.addEventListener("load", reqListener);
oReq.open("GET", serverAddress);
oReq.send();

• 위 예제를 통해 자바스크립트를 이용하여 특정 서버에 요청을 보내고 그에 대한 자료를 성공적으로 받아올 수 있음을 확인해볼 수 있습니다.
• 다만 위 예제에서는 XMLHttpRequest를 이용하여 요청을 보냈지만 일반적으로는 아래와 같이 jQuery나 기타 AJAX 기능이 내장되어 있는 라이브러리를 이용하여 AJAX 요청을 처리합니다.

var serverAddress = 'https://hacker-news.firebaseio.com/v0/topstories.json';

// jQuery의 .get 메소드 사용
$.ajax({
    url: ,
    type: 'GET',
    success: function onData (data) {
        console.log(data);
    },
    error: function onError (error) {
        console.error(error);
    }
});

• 위처럼 AJAX를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경을 AJAX 프레임워크라고 합니다. 이러한 AJAX 프레임워크 중에서도 가장 많이 사용되는 프레임워크는 다음과 같습니다.
  
  • Google Web Toolkit
  • Prototype
  • script.aculo.us
  • dojo
  • jQuery
• 이외에도 수많은 AJAX 프레임워크가 널리 사용되고 있습니다.

---

📌 References

• https://velog.io/@gparkkii/whatisajax
• https://99geo.tistory.com/65