Other types of data

If you want to receive other types of data you have to go through the same basic steps. 

1. Either get the server to set the correct Content-Type header and/or set the dataType option. Preferably do both.
   
   
2. Set a custom Require header using the requires property if needed.
   
   
3. Discover how jQuery returns the data for the specified data type:
   
   xml       an XML DOM object
   html     a string
   script   a string but browser also runs the JavaScript
   json     a JSON object
   text      a String.
   jsonp   the browser loads and runs the script 

Examples in PHP and JavaScript

Let's have a simple example of each one, apart from jsonp, in addition to XML in PHP and JavaScript. The reason jsonp is omitted is that it is more complicated than the rest it deserves a section all to itself, see the next chapter. 

html

In theory you don't need to send an explicit header for HTML because this is the default for a PHP page:

<?php
header("Content-Type:text/html;charset=UTF-8");
$cdata='<div id="todaysData">Sample Text
                               <br/></div>';
echo($cdata);
?>

The client gets the data as a String but of course you can use jQuery to convert it to a jQuery object and insert it into the DOM after processing:

var options={};
options.url="process.php";
options.method="post";
options.dataType="html";
$.ajax(options).then(
 function(data){
  console.log(data);
  $("body").append(data);
 });

Script

Loading a script is simple but you have to keep in mind that the browser will add the script to the JavaScript environment. For example, the following PHP program will supply a simple script:

<?php
header("Content-Type:application/javascript;
                            charset=UTF-8");
$cdata='alert("hello remote script");
  function doSomething(){alert(
   "hello remote script");return 10;};';
echo($cdata);
?>

The client program is:

var options={};
options.url="process.php";
options.method="post";
$.ajax(options).then(
 function(data){
  console.log(data);
  doSomething();
 });

Notice that when you run the client the alert appears at once and you can call the doSomething function - the code has been added to the JavaScript. 

There is a subtly about the script data type. If you make a script request to the same domain as the page was served from then a standard Ajax call is made and the text that is received is processed by a function which is equivalent to:

function(text){
 jQuery.globalEval(text);
 return text;
}

This is in fact a converter function, see later, which converts text to script.

However if the request is to a domain other than the page was loaded then a completely different method of downloading the script is used as the standard Ajax transport doen't allow for cross domain requests. See the next chapter for details. 

json

The only complication with JSON is that web servers often don't set the Content-Type header correctly when you Get or Post a .json file. This means that you have to set the dataType to json or use getJSON to convert the data to a JavaScript object. If you are using PHP or some dynamic generator of JSON then you can ensure tha that the header is set correctly:

<?php
header("Content-Type:application/json;
                                charset=UTF-8");
$cdata='{"first": "Ian","last":"Elliot"}';
echo($cdata);
?>

The client will now correctly deal with the JSON it recieves and will convert the raw String data into a JavaScript object: 

var options={};
options.url="process.php";
options.method="post";
$.ajax(options).then(
 function(data){
  console.log(data);
 });

With the correct header sent there is no need to set dataType but it doesn't hurt to:

options.dataType="json";

The data that is returned is a JavaScript object with properties first and last. 

text

There almost isn't anything to say about text - the server sends a string and the client receives a string.

The PHP is: 

<?php
header("Content-Type:text/plain;charset=UTF-8");
$cdata="This is a string";
echo($cdata);
?>

Notice that you can use other sub-types for more structured data such as text/csv and so on. It is up to you however to provide the additional processing as jQuery will just return the data as a string:

var options={};
options.url="process.php";
options.method="post";
$.ajax(options).then(
function(data){
 console.log(data);
});

The data is displayed as a simple string. There are a few more things to say about sending string data concerning character encoding but this is discussed in a more general setting later. 

Custom content headers

In most cases the options that jQuery provides for data handling are sufficient. If you need to send some custom data then the simplest thing to do is send it as String, encoded if necessary, and then write your own functions to code it.

However, jQuery does provide some facilities to help you process custom data. 

mimeType 

If you know that the data that the server is sending you is one of the standard types you can override any Content-Type headers that specify a different type. This can also be useful when you want to treat JSON as Text say. That is if the server sends you:

<?php
header("Content-Type:application/json;
                               charset=UTF-8");
$cdata='{"first": "Ian","last":"Elliot"}';
echo($cdata);
?>

Then by default jQuery will construct a JavaScript object for you with the first and last properties. If you set 

options.mimeType="text/plain";

then jQuery will treat the data as if it was plain text. Notice that in this case there is no difference between setting mimeType or dataType to text. In general however mimeType replaces the Content-Type header and this could effect any further processing and you can set it to values that are outside of the range of dataType. 

Now we come to a complicated part of using jQuery Ajax - converters. If you don't want to know how jQuery creates different types of data or if you don't want to implement your own data type then you don't need to know about type converters.