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.

Typical $.ajax usage is:

$.ajax({
 url : 'http://example.com',
 data : { param : "value" },
 dataType : 'text',
 type : 'get',
 success : function(text) {
   // called after the ajax has returned successful response
   alert( text ); // alerts the response
 }
});

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:

$.ajax({
  url : 'http://example.com',
  dataType : 'json',
  // if you omit this line the default dataType is text
  success : function( data ) {
    console.log(data);
  }
});

Actually in the body of the success function you’ll get the hole object with the root and both name pairs. You thus can access them with the simple:

data.root[0].name

and this will result as expected in:

"john"

Call a script

In the case of calling scripts let’s assume there is a script with the simple variable defined as integer:

external.js

var a = 10;

Than in jQuery you call it with:

$.ajax({
  dataType : 'script',
  url : 'http://example.com',
  success : function() {
    console.log(a);
  }
});

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.

2 thoughts on “AJAX dataTypes in jQuery. Format and access.

  1. Hi

    I find this example confusing

    Call a script

    In the case of calling scripts let’s assume there is a script with the simple variable defined as integer:

    external.js

    var a = 10;
    Than in jQuery you call it with:

    $.ajax({
    dataType : ‘script’,
    url : ‘http://example.com’,
    success : function() {
    console.log(a);
    }
    });

    Please explain CLARLY how this is working

    You have a script called external.js.

    You then call ‘http://example.com’,

    I presume the the external.js script when this loads . Is this correct ?

    When explaining this always tell the full story

    Start by saying what you want to do .

    Then show the code how to do it – all of the code –

    Then show the result of running the code including the output .

    If you are calling http://example.com . Show the code for this as well . We need to see the what is running in this page – i am assuming you are

    Remember you are trying to communicate how it works – so we need to be able to piece it together step by step -please don’t leave gaps

    Finally – learn to KEEP IT SIMPLE. Avoid complexity , gaps ,jargon or assumptions .

Leave a Reply

Your email address will not be published. Required fields are marked *