[JS] Ajax(Asynchronous JavaScript and XML)란 무엇인가

Ajax는 웹 페이지를 동적으로 업데이트하기 위한 기술로, 비동기식으로 서버와 데이터를 주고받을 수 있도록 해준다. Ajax의 주요 목적은 웹 페이지를 전체적으로 새로 고침하지 않고도 부분적인 업데이트를 가능하게 하여, 사용자 경험을 향상시키는 것이다.

 

Ajax의 주요 요소

1. Asynchronous (비동기성):

• 웹 페이지와 서버 간의 데이터 전송이 비동기적으로 이루어지므로, 서버에서 응답을 기다리는 동안 웹 페이지는 사용자와 상호작용을 계속할 수 있다.

2. JavaScript:

• Ajax 요청을 만들고, 서버로부터 받은 데이터를 처리하는 데 JavaScript를 사용한다.

3. XML (Extensible Markup Language):

• 초기 Ajax에서는 XML 형식이 주로 사용되었지만, 현재는 JSON이 더 많이 사용된다. 서버로부터 받은 데이터를 XML이나 JSON 형태로 파싱하여 처리할 수 있다.

 

 

 

---

Ajax의 작동 원리

Ajax의 기본적인 흐름은 클라이언트(브라우저)와 서버 간에 비동기 요청을 보내고 응답을 받는 구조로 이루어진다.

 

1. 사용자 입력 또는 이벤트 발생:

• 사용자가 웹 페이지에서 버튼을 클릭하거나, 폼을 제출하는 등의 동작을 한다. 이 이벤트는 Ajax 요청을 트리거한다.

2. JavaScript 코드로 요청 생성:

• JavaScript의 XMLHttpRequest 객체 또는 Fetch API를 사용하여 비동기 요청을 생성한다.

• Ajax는 GET 또는 POST 방식으로 서버에 데이터를 요청한다.

3. 서버로 요청 전송:

• 생성된 요청은 서버로 전송된다. 서버는 요청을 처리하고, 클라이언트에게 응답을 보낸다.

4. 서버 응답 처리:

• 서버에서 응답이 오면, 클라이언트에서 JavaScript를 사용하여 응답 데이터를 처리한다. 예를 들어, HTML, JSON, XML 등의 형식으로 데이터를 받아와서 화면을 업데이트하거나 필요한 작업을 수행한다.

5. 웹 페이지 부분 업데이트:

• 전체 페이지를 새로 고침하지 않고, 필요한 부분만 갱신하여 사용자의 경험을 향상시킨다.

 

 

 

---

Ajax 요청 보내는 방법

 

1. XMLHttpRequest 객체 사용

XMLHttpRequest는 Ajax의 전통적인 방식이다. 이 객체를 통해 서버와 비동기적으로 데이터를 주고받을 수 있다.

// 1. XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();

// 2. 요청 초기화 (GET 방식으로 요청)
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);

// 3. 응답이 준비되면 호출되는 콜백 함수 정의
xhr.onload = function() {
    if (xhr.status === 200) {  // 상태가 200(성공)일 때
        console.log(xhr.responseText);  // 서버 응답 데이터 출력
    } else {
        console.error('오류 발생: ' + xhr.status);
    }
};

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

 

---

 

2. Fetch API 사용

fetch()는 최신 방식으로, XMLHttpRequest보다 사용이 간단하고, Promise 기반으로 비동기 작업을 처리한다. 특히 JSON 데이터를 처리할 때 유용하다.

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    if (!response.ok) {
        throw new Error('네트워크 응답이 이상합니다.');
    }
    return response.json();  // JSON으로 응답을 변환
  })
  .then(data => {
    console.log(data);  // 서버 응답 데이터 출력
  })
  .catch(error => {
    console.error('오류 발생:', error);
  });

 

 

 

---

Ajax 요청 종류

Ajax는 다양한 방식으로 데이터를 요청하고 전송할 수 있다. 그 중 가장 많이 사용되는 방법은 GET과 POST 방식이다.

 

1. GET 요청

• 서버에서 데이터를 조회할 때 사용된다.

• URL에 데이터를 붙여서 보내기 때문에 상대적으로 작은 데이터를 전송할 때 사용된다.

 

예시:

fetch('https://jsonplaceholder.typicode.com/posts?id=1')
  .then(response => response.json())
  .then(data => console.log(data));

 

2. POST 요청

• 서버에 데이터를 전송할 때 사용된다.

• 폼 데이터를 서버로 보낼 때 주로 사용되며, URL에 데이터가 포함되지 않고, 요청 본문에 데이터를 담아 보낸다.

 

예시:

const data = {
  title: '새로운 포스트',
  body: '포스트 내용',
  userId: 1
};

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)  // JSON 형식으로 데이터 전송
})
  .then(response => response.json())
  .then(data => console.log(data));

 

 

 

---

Ajax 응답 처리

서버로부터 응답을 받으면, 그 데이터를 클라이언트에서 처리해야 한다. 서버에서 전달하는 데이터는 대개 JSON 형식으로 전달되며, 이 데이터를 JSON.parse()로 처리할 수 있다. Fetch API를 사용하면 응답을 쉽게 JSON 형태로 변환할 수 있다.

 

응답 상태 코드

Ajax 요청에 대한 응답 상태 코드를 통해 요청이 성공했는지, 실패했는지를 확인할 수 있다.

 

• 200 OK: 요청이 성공적으로 처리되었음.

• 400 Bad Request: 잘못된 요청이 들어옴.

• 404 Not Found: 요청한 리소스를 찾을 수 없음.

• 500 Internal Server Error: 서버 내부에서 오류가 발생함.

 

예시:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    if (!response.ok) {
        throw new Error('오류 발생: ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

 

 

 

---

Ajax의 장점

 

1. 비동기 요청:

• 페이지 전체를 새로 고침하지 않고도 서버와 통신할 수 있어 사용자 경험이 향상된다.

2. 부분적 페이지 업데이트:

• 필요한 부분만 갱신하므로 성능이 개선된다.

3. 빠른 데이터 처리:

• 서버에서 데이터를 처리한 후 클라이언트에서 빠르게 화면을 업데이트할 수 있다.

4. 서버와의 상호작용 향상:

• 서버와의 상호작용이 실시간으로 이루어지므로 웹 애플리케이션에서 더욱 동적인 상호작용이 가능하다.

 

 

 

---

Ajax의 단점

 

1. 브라우저 호환성:

• XMLHttpRequest와 같은 구형 API는 모든 브라우저에서 동일하게 동작하지 않을 수 있다.

• 하지만 현재는 fetch()와 같은 최신 API가 브라우저에서 잘 지원되므로 이 문제는 해결되고 있다.

2. SEO 문제:

• Ajax를 사용하면 페이지 내용이 동적으로 로딩되므로 검색 엔진 최적화(SEO)에 불리할 수 있다. 그러나 SSR(서버 사이드 렌더링)이나 prerendering을 사용해 해결할 수 있다.

3. 복잡한 에러 처리:

• 비동기적으로 이루어지기 때문에, 에러 처리나 로깅을 신경 써야 할 필요가 있다.

 

 

 

---

결론

Ajax는 비동기식으로 서버와 데이터를 주고받는 웹 기술로, 웹 페이지를 새로 고침하지 않고도 부분적으로 데이터를 업데이트할 수 있게 해준다. 이를 통해 사용자는 더 빠르고 동적인 웹 경험을 제공받을 수 있다. Ajax는 웹 애플리케이션에서 데이터를 효율적으로 처리하고, 사용자 경험을 향상시키는 데 중요한 역할을 한다.