[프론트엔드] AJAX란?

AJAX를 이야기는 많이 들어봤는데 어떤 것인지 확실하게 몰라서 공부 겸 포스팅하게되었습니다!

 

 

 

 

AJAX란?

AJAX (Asynchronous JavaScript And XML)의 약자로, 웹 페이지를 새로고침하지 않아도 서버에 데이터를 요청하거나 보낼 수 있게 하는 기술입니다.

이를 통해 사용자 경험을 향상시키며, 서버와 비동기적 통신을 할 수 있습니다.

 

 

기존의 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 웹 서버로 제출하는 방식이었습니다.

웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지를 작성하고 응답으로 되돌려 줍니다.

하지만 코드를 수정하거나 결과물로써 되돌려 받은 페이지는 유사한 내용을 가지고 있습니다.

이렇게 되면 HTML 코드를 모두 다시 한번 전송해야하므로 낭비가 될 수 있습니다.

 

 

이를 보완하기 위해서 AJAX 애플리케이션은 필요한 데이터만을 웹서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있습니다. 

데이터 처리의 일부분이 클라이언트 쪽에서 처리되므로 웹 브라우저와 웹 서버 사이에 교환되는 데이터량과 웹 서버의 데이터 처리량도 줄여주기 때문에 애플리케이션의 응답성이 좋아집니다.

웹 서버의 데이터 처리에 대한 부하를 줄여주는 일이 요청을 주는 수많은 컴퓨터에 대해서 일어나기 때문에 전체적인 웹 서버 처리량도 줄어들게 됩니다.

 

 

 

 

AJAX의 주요 기능

1. Asynchronous(비동기) : AJAX 요청은 비동기적으로 처리됩니다. 이는 JavaScript가 서버에 데이터를 요청한 후, 응답을 기다리는 동안 다른 작업들을 계속해서 처리할 수 있다는 것을 의미합니다.
2. JavaScript : AJAX는 JavaScript를 사용하여 서버와 데이터를 교환합니다
3. XML : AJAX에서 "X"는 XML을 나타냅니다. 하지만 오늘 날에는 JSON이 더 많이 사용되므로 "AJAX"라는 용어가 약간혼란스러울 수 있습니다.

** JSON : JavaScript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷 

 

 

 

AJAX 활용 방법

뤼튼에서 요청하여 코드에서 XMLHttpRequest 객체를 사용하여 간단한 GET 요청을 보내고 응답을 받아오는 방법에 대한 코드입니다.

// XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();

// 'onload' 이벤트 핸들러 설정
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('The request succeeded!', xhr.responseText);
  } else {
    console.log('The request failed!');
  }
};

// 'onerror' 이벤트 핸들러 설정
xhr.onerror = function() {
  console.log('There was an error!');
};

// HTTP GET 요청 준비
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');

// HTTP 요청 전송
xhr.send();

1. XMLHttpRequest()객체를 사용하여 xhr라는 변수에 선언.
2. xhr.onload는 Request를 받으면 실행하는 함수.
3. xhr.onerror는 오류가 발생했을 때 실행하는 함수
4. xhr.open 라인은 'https://jsonplaceholder.typicode.com/posts'라는 링크에 GET 요청 준비.
5. xhr.send()는 해당 GET요청 전송.

 

 

AJAX의 장단점

장점

• 페이지 이동 없이 고속으로 화면을 전환할 수 있다
• 서버처리를 기다리지 않고, 비동기 요청이 가능하다
• 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다
• 플러그인 없이도 인터렉티브한 웹 페이지를 구현할 수 있다

 

단점

• AJAX를 쓸 수 없는 브라우저에 대한 문제가 있다
• HTTP 클라이언트의 기능이 한정되어 있다
• 페이지 이동없는 통신으로 인한 보안상의 문제가 있다
• 지원하는 문자집합이 한정되어 있다
• 스크립트로 작성되므로 디버깅이 용이하지 않다
• 요청을 남발하면 역으로 서버 부하가 늘 수 있다
• 다른 도메인과는 통신이 불가능하다

 

 

 

AJAX 사용에 있어서 AJAX 기술을 지원하지 않는 브라우저를 위한 대체물을 만드는 것은 거의 힘듭니다.

현재 Fetch API나 Axios 등 더 편리하게 AJAX 기능을 제공하는 라이브러리나 API가 많이 사용되고 있습니다.

이들은 Promise 기반으로 동작하므로 비동기 처리를 더욱 간편하게 할 수 있습니다.

** Promise : 비동기 함수 호출 또는 비동기 연산이 완료 되었을 때, 이후에 처리할 함수나 에러를 처리하기 위한 함수를 설정하는 모듈

 

 

저는 Fetch도 Axios를 많이 썼네요! 공부해야할 일은 갈 수록 늘어나네요..ㅠ