ajax 정리

AJAX(Asynchronous JavaScript and XML)는 비동기식 웹 애플리케이션 개발을 위한 기술의 조합을 나타냅니다. 이 기술은 웹 페이지를 다시 로드하지 않고도 데이터를 서버로부터 비동기적으로 가져와서 웹 페이지의 일부를 업데이트할 수 있게 해주는 표준 기술입니다.

아래는 AJAX의 주요 특징과 구성 요소에 대한 설명입니다:

1. 비동기성 (Asynchronous): AJAX는 비동기적인 통신을 지원합니다. 이는 페이지 전체를 새로 고치지 않고도 서버로부터 데이터를 요청하고 응답을 처리할 수 있게 합니다. 이는 웹 페이지의 응답성을 향상시키고 사용자 경험을 향상시킵니다.
2. XMLHttpRequest 객체: AJAX의 핵심 요소는 XMLHttpRequest 객체입니다. 이 객체를 사용하여 브라우저와 서버 간의 데이터 교환을 처리합니다. 최근에는 JSON 형식이 더 일반적으로 사용되며, 실제로는 XML 외에도 다양한 데이터 형식을 다룰 수 있습니다.
3. 이벤트 기반 프로그래밍: AJAX 요청과 응답은 이벤트 기반으로 처리됩니다. 즉, 비동기 작업의 성공, 실패 등의 이벤트에 대한 콜백 함수를 등록하여 처리합니다.
4. 데이터 포맷: 초기에는 이름에서 알 수 있듯이 XML을 주로 사용했지만, 현재는 주로 JSON 형식이 더 많이 사용됩니다. JSON은 경량이면서 파싱하기 쉽기 때문에 선호되는 데이터 형식이 되었습니다.
5. 웹 브라우저 지원: 모든 주요 웹 브라우저에서 AJAX를 지원합니다. 이는 크로스 브라우징에 유리하며, 웹 애플리케이션을 다양한 환경에서 동작시킬 수 있게 합니다.

아래는 간단한 AJAX 예제입니다. jQuery를 이용한 예제로, 최근에는 fetch API나 XMLHttpRequest 객체를 직접 사용하는 추세입니다.

$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log('Data received:', data);
        // 받아온 데이터를 이용한 작업 수행
    },
    error: function(error) {
        console.error('Error:', error);
    }
});

이 예제에서는 $.ajax 함수를 사용하여 서버로부터 데이터를 비동기적으로 요청하고, 성공 또는 실패에 따라 적절한 콜백 함수를 실행하고 있습니다.

ajax 양식에서 data는 서버로 보낼 데이터 형식을 지정하고 dataType 은 서버에서 받아온 데이터 타입을 어떻게 활용할지 지정한다.

클라이언트에서 ajax를 통해 서버로 데이터를 json 형식으로 보내면 서버에서는 dto나 map 형식을 통해 데이터를 받아 처리할 수 있다. (@requestBody 어노테이션이 사용된다)

formData 형식으로 보낼 경우 @requestParm 형식이 주로 사용된다.

formData를 사용할 때에

formData = $('#submitForm').serialize();

와 같이 사용하기도 하는데 주로 form에 작성된 간단한 text 데이터만 사용 가능하다.
파일 업로드와 같은 바이너리 데이터를 사용하기 위해서는

var formData = new FormData();  
formData.append("username", $("#username").val());  
formData.append("email", $("#email").val());  
formData.append("profilePicture", $("#profilePicture")\[0\].files\[0\]);

와 같이 사용된다.

데이터 타입:

serialize(): 주로 텍스트 데이터를 처리하는 데 사용됩니다.
FormData: 텍스트와 바이너리 데이터 모두를 처리할 수 있습니다.
사용 용도:

serialize(): 주로 간단한 폼 데이터 전송에 사용됩니다.
FormData: 파일 업로드와 같이 바이너리 데이터가 필요한 경우에 사용됩니다.