jQuery의 $.Ajax 데이터 유형

jQuery ajax 요청의 데이터 유형은 서버에서 기대하는 데이터 유형입니다. 이 튜토리얼에서는 jQuery ajax에서 데이터 유형을 사용하는 방법을 설명합니다.

jQuery의 Ajax 데이터 유형

ajax 요청의 데이터 유형은 서버에서 기대하는 데이터 유형을 나타냅니다. 데이터가 지정되지 않으면 jQuery는 응답의 MIME 유형을 기반으로 데이터를 만듭니다.

일반적으로 데이터는 일반 텍스트, HTML 또는 JSON입니다. 데이터 유형이 있는 간단한 ajax 요청이 아래에 나와 있습니다.

$.ajax({
    type : "POST",
    url : user,
    datatype : "application/json",
    contentType: "text/plain",
    success : function(employee_data) {
      //some code here
    },
    error : function(error) {
   //some error error here
},

위 요청에서 서버에서 기대하는 데이터 유형은 JSON입니다. 데이터 유형의 유형은 항상 문자열입니다.

ajax 요청에 사용할 수 있는 데이터 유형은 다음과 같습니다.

• XML은 jQuery로 처리할 수 있는 문서의 XML 파일을 반환합니다.

• HTML은 DOM에 삽입되는 동안 스크립트 태그가 평가되는 HTML을 일반 텍스트로 반환합니다.

• script는 응답을 JavaScript로 평가하고 일반 텍스트로 반환합니다. 캐시 옵션이 true가 될 때까지 URL과 함께 쿼리 문자열 매개변수 =[TIMESTAMP]를 사용하여 캐싱을 비활성화해야 하며 이 방법은 원격 도메인 요청에 대해 POST 요청을 GET으로 변환합니다.

• JSON은 응답을 JSON으로 평가하고 JavaScript 개체를 반환합니다. 교차 도메인 JSON 요청은 요청 옵션에 jsonp : false를 포함하지 않는 한 jsonp로 변환됩니다.

  JSON 데이터는 엄격하게 구문 분석됩니다. 오작동하는 JSON은 거부되고 오류가 발생합니다. 최신 버전의 jQuery에서는 빈 응답도 거부됩니다.

• jsonp는 JSONP를 사용하여 JSON 블록에 로드됩니다. URL 끝에 추가 콜백을 추가하여 지정할 수 있습니다.

  캐시 옵션이 true가 될 때까지 _=[TIMESTAMP]를 URL에 추가하여 캐싱을 비활성화할 수도 있습니다.

• text는 일반 텍스트 문자열을 반환합니다.

다음 예는 위의 데이터 유형을 사용하는 일부 Ajax 요청입니다.

Ajax 요청에 XML 사용

사용자 정의 XML 스키마에서 데이터를 전송하기 위한 ajax 요청입니다.

$.ajax({
  url: 'http://demoxmlurl',
  type: 'GET',
  dataType: 'xml',
  success: parseXml
});
});

Ajax 요청에 HTML 사용

HTML 블록을 페이지의 어딘가로 전송하기 위한 ajax 요청입니다.

$.ajax({
  type: 'POST',
  url: 'post.php',
  dataType: 'json',
  data: {id: $('#id').val()},
});

Ajax 요청에 스크립트 사용

페이지에 새 스크립트를 추가하기 위한 ajax 요청입니다.

$.ajax({url: 'http://unknown.jquery.com/foo', dataType: 'script', cache: true})
    .then(
        function() {
          console.log('Success');
        },
        function() {
          console.log('Failed');
        });

Ajax 요청에 JSON 사용

JSON 데이터 전송을 위한 Ajax 요청에는 모든 유형의 데이터가 포함됩니다.

$.ajax({
  url: 'delftstack.php',
  type: 'POST',
  data: {ID: ID, First_Name: First_Name, Last_Name: Last_Name, Salary: Salary},
  dataType: 'JSON',
  success: function(employee_data) {
    console.log('Success');
    $('#result').text(employee_data);
  }
});

Ajax 요청에 JSONP 사용

다른 도메인에서 JSON 데이터를 전송하기 위한 Ajax 요청입니다.

$.ajax({
  type: 'GET',
  url: url,
  async: false,
  jsonpCallback: 'jsonCallback',
  contentType: 'application/json',
  dataType: 'jsonp',
  success: function(json) {
    console.dir(json.sites);
  },
  error: function(er) {
    console.log(er.message);
  }
});

Ajax 요청에 텍스트 사용

일반 텍스트 문자열을 전송하기 위한 Ajax 요청입니다.

$.ajax({
  type: 'POST',
  url: 'delftstack.php',
  data: '{}',
  async: true,
  dataType: 'text',
  success: function(data) {
    console.log(data);
  }
});