Ajax란?

0. Ajax란?

Ajax(Asynchronous JavaScript and XML)는 비동기적인 웹 애플리케이션 개발 방식으로, JavaScript와 XML 등의 웹 기술을 활용하여 서버와 브라우저 사이의 데이터를 비동기적으로 전송하고, 데이터를 받아와 동적으로 웹 페이지를 갱신하는 기술입니다.

 

Ajax는 전통적인 웹 애플리케이션의 단점인 페이지 전환의 불편함과 느린 응답속도를 개선할 수 있습니다. 예를 들어, 기존의 웹 페이지에서는 사용자가 어떤 작업을 하면, 서버로부터 새로운 HTML 페이지를 받아와 전체 페이지를 다시 렌더링해야 했습니다. 그러나 Ajax를 사용하면, 전체 페이지를 새로고침하지 않고도, 서버와 비동기적으로 데이터를 주고받아 웹 페이지의 일부분만 변경할 수 있습니다. 이를 통해 사용자는 빠른 응답 속도와 부드러운 사용자 경험을 누릴 수 있습니다.

 

Ajax는 XML을 사용하여 데이터를 전송하기도 했지만, 최근에는 JSON 등의 다른 데이터 형식도 사용됩니다. Ajax는 일반적으로 XMLHttpRequest 객체를 사용하여 구현합니다. 이 객체는 JavaScript에서 서버로 HTTP 요청을 보내고, 서버로부터 HTTP 응답을 받아 처리하는데 사용됩니다.

 

Ajax를 구현하는 방법에는 다양한 방식이 있으며, 대표적인 예로는 jQuery, Axios, Fetch API 등의 라이브러리와 프레임워크를 사용하는 것이 있습니다. 이러한 라이브러리와 프레임워크를 사용하면 Ajax 요청을 더 쉽게 구현할 수 있습니다.

 

 

 

1. JQury와 ajax

jQuery를 사용하여 Ajax 요청을 보내려면, jQuery.ajax() 메서드를 사용합니다. 이 메서드는 다음과 같은 구문을 가집니다.

$.ajax({
  url: '요청을 보낼 URL',
  type: 'HTTP 요청 메서드(GET, POST 등)',
  data: 'HTTP 요청 본문 데이터',
  dataType: 'HTTP 응답으로 받을 데이터 형식(JSON, XML 등)',
  success: function(response) {
    // 성공적으로 요청을 보냈을 때의 콜백 함수
  },
  error: function(error) {
    // 요청에 실패했을 때의 콜백 함수
  }
});

위의 코드에서, url 속성에는 요청을 보낼 URL을 지정합니다. type 속성에는 HTTP 요청 메서드를 지정합니다(GET, POST, PUT, DELETE 등). data 속성에는 HTTP 요청 본문 데이터를 지정합니다. dataType 속성에는 HTTP 응답으로 받을 데이터 형식을 지정합니다(JSON, XML 등).

success 속성에는 Ajax 요청에 성공했을 때 호출될 콜백 함수를 지정합니다. 이 콜백 함수의 매개변수로는 서버로부터 받은 HTTP 응답 데이터가 전달됩니다. error 속성에는 Ajax 요청에 실패했을 때 호출될 콜백 함수를 지정합니다.

 

 

 

아래는 jQuery.ajax() 메서드를 사용하여 GET 방식으로 Ajax 요청을 보내는 예시입니다.

$.ajax({
  url: '/api/data',
  type: 'GET',
  success: function(response) {
    console.log(response);
  },
  error: function(error) {
    console.log(error);
  }
});

위의 코드에서는 /api/data URL로 GET 방식의 Ajax 요청을 보내고 있습니다. 요청이 성공하면 success 콜백 함수가 호출되며, 서버에서 보낸 HTTP 응답 데이터가 response 매개변수로 전달됩니다. 요청이 실패하면 error 콜백 함수가 호출되며, 에러 객체가 error 매개변수로 전달됩니다.