jQuery의 $.Ajax 데이터 유형

$.ajax는 코드가 어떤 종류의 응답을 받을 것으로 예상하는지 dataType 옵션으로 지정합니다. 이 옵션은 응답을 받은 뒤 jQuery가 응답을 처리하는 방식에 영향을 줍니다. 요청 본문에 전송하는 데이터 형식을 설명하는 contentType와는 별개입니다. 예를 들어 요청으로 JSON을 보내면서 텍스트 응답을 기대할 수도 있습니다. 두 옵션은 각각의 데이터 방향에 맞게 선택하세요.

$.ajax에서 dataType의 의미

dataType에는 "json"이나 "html" 같은 문자열을 지정합니다. 이 값은 성공 처리기가 사용할 준비가 된 응답 형식을 나타냅니다. MIME 유형을 지정하는 옵션이 아니므로 "application/json"이 아니라 "json"을 사용합니다. 이 옵션을 생략하면 jQuery가 응답의 콘텐츠 유형을 바탕으로 처리 방법을 추정할 수 있습니다. 애플리케이션이 특정 형식에 의존한다면 예상 형식을 지정해 의도를 명확히 하세요.

서버는 요청한 형식에 맞는 콘텐츠를 반환해야 합니다. dataType: "json"으로 설정해도 임의의 응답 텍스트가 유효한 JSON으로 바뀌지는 않습니다. 마찬가지로 contentType는 응답을 어떻게 파싱할지 결정하지 않습니다.

기본 $.ajax 요청에서 dataType 설정하기

$.ajax에 전달하는 설정 객체에 이 옵션을 넣으세요. 예시 URL은 애플리케이션에서 사용하는 엔드포인트로 바꾸면 됩니다. 이 독립 실행형 JavaScript 예시는 설정 객체를 보여 주고 예상 응답 유형을 출력합니다. $.ajax를 호출하거나 네트워크 요청을 보내지는 않습니다.

다음 예시를 실행하세요:

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const request = {
  url: "/api/employees",
  method: "GET",
  dataType: "json"
};
console.log(`${request.method} ${request.url}: expecting ${request.dataType}`);

출력:

GET /api/employees: expecting json

jQuery를 불러오는 애플리케이션에서는 이 설정을 $.ajax에 전달한 다음, 파싱된 응답을 success 또는 Promise 콜백에서 처리하세요. 본문이 있는 요청이라면 contentType로 본문 형식을 지정하고 data에 값을 넣으세요. 특별한 이유가 없다면 본문이 없는 GET 요청에 요청 본문의 콘텐츠 유형을 추가하지 마세요.

응답 유형 선택하기

애플리케이션에서 처리해야 하는 응답에 맞춰 값을 선택하세요.

• "xml"은 코드에서 살펴보거나 처리할 XML 문서에 사용합니다.
• "html"은 마크업으로 사용할 HTML 조각이나 문서에 사용합니다. 안전한 처리 방법이 마련되어 있지 않다면 반환된 마크업을 신뢰할 수 없는 입력으로 취급하세요.
• "script"는 JavaScript로 평가할 응답에 사용합니다. 신뢰할 수 있는 출처의 응답이고 원격 스크립트를 평가하는 것이 적절한 경우에만 사용하세요.
• "json"은 객체나 배열처럼 JavaScript 값으로 사용할 구조화된 데이터에 사용합니다.
• "jsonp"는 콜백으로 감싼 응답을 반환하는 JSONP 엔드포인트에 사용합니다. 이는 별도의 응답 방식이며, 모든 JSON 엔드포인트에서 교차 도메인 요청을 가능하게 하는 일반적인 방법은 아닙니다.
• "text"는 코드에서 직접 처리할 일반 문자열에 사용합니다.

옵션은 엔드포인트가 실제로 반환하는 응답 형식과 일치해야 합니다. 응답 형식이나 서버 동작이 예상과 다르면 옵션을 무작정 바꾸기보다 응답과 요청을 확인하세요.

응답 유형별 예시

아래 각 줄은 실행된 요청이 아니라 $.ajax 설정 객체의 예시입니다. 엔드포인트 경로는 자리표시자이므로, 각 경로를 표시된 형식의 응답을 반환하는 URL로 바꾸고 애플리케이션에 필요한 성공 처리를 추가하세요.

• XML: $.ajax({ url: "/placeholder.xml", method: "GET", dataType: "xml" })은 코드에서 살펴보거나 처리할 XML 응답을 예상합니다.
• HTML: $.ajax({ url: "/placeholder.html", method: "GET", dataType: "html" })은 마크업을 예상합니다. 반환된 HTML은 안전한 처리 방법을 사용하세요.
• Script: $.ajax({ url: "/trusted-script.js", method: "GET", dataType: "script" })는 JavaScript로 평가할 응답에 사용합니다. 신뢰할 수 있는 출처의 응답이고 원격 스크립트를 평가하는 것이 적절한 경우에만 사용하세요.
• JSON: $.ajax({ url: "/api/employees", method: "GET", dataType: "json" })은 성공 처리기에서 사용할 객체나 배열 같은 구조화된 데이터를 예상합니다.
• JSONP: $.ajax({ url: "/jsonp-capable-endpoint", method: "GET", dataType: "jsonp" })를 사용하려면 서버가 JSONP를 지원하고 클라이언트가 기대하는 콜백 형식으로 응답해야 합니다.
• Text: $.ajax({ url: "/status", method: "GET", dataType: "text" })는 코드에서 처리하거나 표시할 일반 문자열을 예상합니다.

각 예시는 옵션과 적절한 엔드포인트 자리표시자를 짝지어 보여 줍니다. 해당 엔드포인트가 실제로 존재하거나 요청이 전송되었다는 뜻은 아닙니다.

파싱, 캐싱 및 교차 도메인 동작

응답 파싱, 캐시 동작, 교차 도메인 처리는 jQuery 버전과 요청 맥락에 따라 달라질 수 있습니다. 여기의 예시는 형식이 잘못되었거나 비어 있는 JSON, 스크립트 캐싱, JSON과 JSONP 간 변환에 대해 특정 결과를 보장하지 않습니다. 애플리케이션에서 사용하는 버전의 문서를 확인하고 엔드포인트가 선택한 응답 유형을 지원하는지 확인하세요.

JSONP는 일반 JSON과 서로 바꿔 쓸 수 없습니다. 콜백으로 감싼 응답을 반환하도록 설계된 엔드포인트가 필요합니다. 교차 출처 요청의 가능 여부도 브라우저와 서버의 동작에 달려 있습니다. "json"을 선택하는 것만으로 교차 출처 접근이 허용되지는 않습니다. 요청이 실패하면 응답 본문과 헤더, 브라우저 콘솔, 서버 설정을 확인하고 코드가 기대하는 유형과 비교하세요.