AJAX dataTypes in jQuery. Format and access.

AJAX calls in jQuery

Just because I don’t want to write the same content twice, I’ll say that in jQuery the AJAX calls can be done by various ways, because there are many wrappers that helps you do this job depending of what you want from your application. However you can find more about $.ajax which is the main topic of this post in my previous post, where I described really in breve what it does and how it does it. Yet again just to be correct I’ll add that you can find more, of course, on the docs page of jQuery about AJAX.

Supported data types by $.ajax

In fact the $.ajax object according to the docs page support a large set of options that can specify the custom type of call you’d like to use in your application. Along with async, beforeSend, cache, complete, data, dataFilter etc. there is a option called dataType, that gives you the extreme power to call different type of files (thus named data types).

In fact not only the typical and mostly used HTML “native” data type is a possible solution. You can call JSON, XML, TEXT or even the extremely powerful SCRIPT, which returns another JavaScrpit file evaluates it and after the success function has been called you can call methods from this file. I’ll write a sample example a little later.

Format of the different data types

As you may know XML, HTML, JSON and SCRIPT which I mentioned before has different formats. Usually XML, which stands for eXtensible Markup Language, is formated in a similar way to the HTML. The difference is that you can define your own tags, with your own custom defined attributes. Of course thus you can define a hole tree.

Sample XML can be formated like:

<root>
<name>john</name>
<name>raul</name>
</root>

In the case of JSON, again you’ve the power to define a tree structure, but of course in very different format from the XML above. Let’s assume we’d like to achieve something like the sample XML above but with JSON. Than we have:

{
root : [
{
name : "john"
}, {
name : "raul"
}]
}

Notice that the format seems very much to a native JavaScript object. If you agree, than it will not be a surprise for you that this is indeed a JavaScript object and JSON simply means JavaScript Object Notation.

Just to mention JSON is now the most “famous” data type for AJAX calls and this is because it’s small, you don’t need to send to the client all the additional tags like in XML and in large responses, which are in the most cases you’d win a performance price.

In the case of the SCRIPT you simply call a .js file and after the success function is called you can access any method, object or variable from that file.

There are more data types in jQuery.ajax but I think these are really the most important.

Fetch and access

In very very short examples I’d like to write how to access the different data types from a $.ajax call in jQuery, and in fact I’ll write only for the JSON and SCRIPT data types as I think they are really the most used and useful.

Let’s assume we’ve the mentioned above JSON with only one root and two objects with key value pairs of name and personal names, which is returned from something like that:

Normally this will output “10” as this is the value of the variable “a”. In such way you can call functions, objects and everything you can define in a .js file. A good practice will be to use closures just to avoid conflicts after all.