Library/JQuery

Ajax 요청시 dataType과 contentType의 의미는 무엇일까요?

junheekim 2023. 2. 22. 15:42

 

 

 

다음과 같은 ajax요청을 해본 경험이 있다면 dataType과 contentType의 의미에 대해 궁금해 한적이 한번은 있을 것 입니다.

 

 

 

 

$.ajax({
  url : '/signup',         
  data : JSON.stringify(data),         
  type : 'post',
  dataType: 'json',
  contentType: 'application/json; charset=utf-8'                 				
}).done(function(result) {	         				
	console.log("회원가입 완료");
}).fail(function(xhr, status, errorThrown) {
	console.log("회원가입 실패");
});

 

 

 

dataType : 서버에서 어떤 타입을 받을 것인지를 의미합니다. 생략했을경우에는 jQuery가 MIME타입들을 보면서 자동으로 결정합니다.

 

 

 

 

여기서 MIME는 아래 링크 참고

https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types

 

MIME 타입 - HTTP | MDN

MIME 타입이란 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘입니다: 웹에서 파일의 확장자는 별 의미가 없습니다. 그러므로, 각 문서와 함께 올바른 MIME 타입을 전송하도록,

developer.mozilla.org

 

 

 

- dataType의 종류 -

  1. xml - XML문서
  2. html - HTML을 텍스트 테이터로 여기에 script태그가 포함된 경우 처리가 실행됩니다.
  3. script - JavaScript코드를 텍스트 데이터로
  4. json - JSON형식 데이터로 평가하고 JavaScript의 개체로 변환합니다.
  5. text - 일반 텍스트

 

 

 

위에 예시에서는 dataType을 json으로 설정했기때문에 result값으로는 JSON형식의 값이 반환됩니다.

 

 

 

 

contentType : 서버로 데이터를 보낼때에 어떤타입으로 보낼것인지를 지정합니다.   application/json; charset-utf-8이 흔이쓰이고  디폴트 값은 application/x-www-form-urlencoded; charset=utf-8입니다.

 

 

 

 

 

위에 예시에서는 contentType을 application/json으로 설정했기때문에 data의 값을 json구조로 보내줘야 하기때문에 JSON객체의 stringify()메서드를 활용해서 json구조로 변경해서 보내는것을 볼 수 있습니다.

 

 

 

 

 

 JSON.stringify() : JavaScript 객체를 JSON 문자열로 변환

 JSON.parse() : JSON문자열을 JavaScript객체로 변환

 

 

 

 

 

 

 

 

참고자료

https://stay-hungry.tistory.com/25

 

https://velog.io/@cksdnr066/Ajax-%EC%9A%94%EC%B2%AD%EC%97%90%EC%84%9C-dataType-%EA%B3%BC-contentType%EC%9D%80-%EB%AD%90%EA%B0%80-%EB%8B%A4%EB%A5%B8%EA%B1%B8%EA%B9%8C