$.Ajax Data Type in jQuery

The data type in jQuery ajax request is the type of data we expect from the server. This tutorial describes the use of datatype in jQuery ajax.

the Ajax Data Type in jQuery

The datatype in the ajax request refer to the type of data that we are expecting from the server. If no data is specified, the jQuery will make it based on the MIME type of the response.

Usually, the data is plain text, HTML or JSON. A simple ajax request with datatype is given below.

$.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
},

The data type we’re expecting from the server in the above request is JSON. The type for datatype is always a string.

The available datatypes for an ajax request are:

• XML will return an XML file of a document that can be processed by jQuery.

• HTML will return HTML as plain text where the script tags are evaluated while inserted in the DOM.

• script will evaluate the response as JavaScript and return it as plain text. We need to disable caching using a query string parameter =[TIMESTAMP] with the URL until the cache option is true, and this method will convert the POST request into GET for remote domain requests.

• JSON will evaluate the response as JSON and return a JavaScript object. The cross-domain JSON requests will be converted to jsonp unless it includes jsonp : false in the request options.

  The JSON data will be parsed strictly; any malfunctioned JSON will be rejected, and an error will be thrown. In the newer version of jQuery, the empty response is also rejected.

• jsonp will be loaded in a JSON block using the JSONP. We can add an extra callback at the end of our URL to specify it.

  We can also disable the caching by appending the _=[TIMESTAMP] to the URL until the cache option is true.

• text will return a plain text string.

The following examples are some ajax requests using the above data types.

Use XML for an Ajax Request

An ajax request for transferring data in custom XML Schema.

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

Use HTML for an Ajax Request

An ajax request for transferring HTML blocks to somewhere on the page.

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

Use Script for an Ajax Request

An ajax request for adding a new script to the page.

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

Use JSON for an Ajax Request

An ajax request for transferring JSON data will include any type of data.

$.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);
  }
});

Use JSONP for an Ajax Request

An ajax request for transferring JSON data from another domain.

$.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);
  }
});

Use Text for an Ajax Request

An ajax request to transfer a plain text string.

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