[jQuery] AJAX 응답 데이터 Body 및 Header안에 있는 데이터 호출

Ajax를 활용하여 데이터를 가져올 때 흔히 사용하는 방법은 res를 호출하여 responseBody 값을 가져와서 사용을 합니다.

하지만 보안을 위해 jwt 토큰 경우 responseBody가 아닌 responseHeader에 담아서 전달하는 경우가 많은데 저도 주 포지션이 백엔드가 아닌 프론트 개발자라 언제나 백엔드분께서 전달해주는 방법에 따라 작업을 진행하여 Header로 전달받은 적은 이번이 처음이라 해당 글을 작성하게 되었네요.

 

AJAX 응답 이해하기

비동기 JavaScript 및 XML의 약어인 AJAX를 사용하면 웹 페이지가 전체 페이지를 다시 로드하지 않고도 서버와 통신할 수 있습니다. 이 기능은 원활하고 역동적인 사용자 경험을 만드는 데 기초가 될 수 있죠. 그러나 실제 문제는 서버에서 반환된 데이터를 올바르게 처리하는 데 있는 경우가 많습니다.

 

성공 콜백

AJAX 요청이 서버에서 데이터를 성공적으로 검색하면 성공 콜백 함수가 트리거됩니다. 여기에서 응답을 처리합니다. 더 자세히 살펴보겠습니다.

$.ajax({
    url: 'api.url',
    method: 'GET',
    success: function(res, textStatus, xhr) {
        console.log('body Data:', res);
        console.log('Status:', textStatus);
        //header
        var contentType = xhr.getResponseHeader('Content-Type');
        console.log('Content-Type:', contentType);
    },
    error: function(xhr, status, error) {
        console.error('error:', error);
    }
});

 

성공 기능의 주요 측면

1. 응답 데이터(res): 서버에서 반환된 페이로드입니다. 'Content-Type'에 따라 JSON 개체, XML 문서, 일반 텍스트 또는 HTML이 될 수 있습니다. 웹 페이지에서 이 데이터를 동적으로 조작하거나 표시할 수 있습니다.
2. 상태(textStatus): 이 매개변수는 "성공", "수정되지 않음", "콘텐츠 없음", "오류", "시간 초과", "중단"과 같은 텍스트 형식으로 요청 상태를 제공합니다. 또는 "파서 오류".
3. XHR 개체(xhr): 응답 헤더를 포함하여 모든 종류의 중요한 데이터를 추출할 수 있는 XMLHttpRequest 개체 자체입니다.

응답 헤더 추출

왜 응답 헤더에 신경을 쓸까요? 헤더는 콘텐츠 유형, 캐싱 정책 또는 서버별 토큰과 같은 응답에 대한 중요한 컨텍스트나 메타데이터를 제공할 수 있습니다. 예를 들어 'Content-Type'을 알면 들어오는 데이터를 구문 분석하고 처리하는 방법을 결정하는 데 도움이 됩니다. 그러나 브라우저의 동일 출처 정책 및 CORS 설정의 보안상의 이유로 인해 서버에서 명시적으로 노출하지 않는 한 모든 헤더에 액세스할 수 있는 것은 아닙니다.

 

AJAX 성공을 위한 실용적인 팁

• 항상 네트워크 응답 확인: 브라우저 개발자 도구(일반적으로 네트워크 탭 아래에 있음)를 사용하여 AJAX 응답을 검사합니다. 이는 데이터와 헤더 측면에서 서버가 실제로 무엇을 다시 보내는지 디버깅하고 이해하는 데 중요한 단계입니다.
• 정상적인 데이터 처리: 성공 기능이 다양한 유형의 데이터를 강력하게 처리하고 다양한 콘텐츠 유형에 적절하게 반응하는지 확인하세요.
• 헤더를 안전하게 노출: 클라이언트 측에 특정 헤더가 필요한 경우 CORS Access-Control-Expose-Headers 설정에 이러한 헤더를 포함하도록 서버를 구성하세요.
• 오류에 대한 계획: AJAX 호출에서 잠재적인 오류를 강력하게 처리합니다. 인터넷은 예측할 수 없으므로 사이트에서 요청 실패를 원활하게 처리할 수 있도록 하는 것은 좋은 사용자 경험을 유지하는 데 중요합니다.

결론

응답 데이터와 헤더를 효과적으로 관리함으로써 애플리케이션이 기능적일 뿐만 아니라 네트워크 상호 작용을 처리하는 방식에서 탄력성과 지능성을 보장할 수 있습니다.

 

또한, 헤더에 있는 데이터 값을 가져올 때 철자는 대문자인 것 같습니다.

예를 들어 위에 예시로 보여준 코드에서 Content-Type를 들었는데 jwt 경우 authorization이 아닌 Authorization으로 확인 할 수 있죠.

당연한 소리일 수도 있겠지만, 개발자들 경우 단순한 오타도 놓치는 경우들이 생기다보니 한번 더 강조했습니다.

내가 필요한 데이터가 정확히 무엇인지 파악한 후 해당 용어에 맞게 표기하시길 바라겠습니다.