Ajax Data - HTML vs. XML vs. JSON

December 19th, 2008   Filed Under Good to know, Javascript, Thinking Out Loud, Tips & Tricks, gyan, json  

Ever wondered why Ajax stands for ‘Asynchronous Javascript And Xml’? I was thinking about it and realized that the ‘x’ is never used or let us say of almost no use.

Classically when introduced by Microsoft, xmlhttprequest object might have been thought to  transport XML for the data transfers, as that was the most popular format which was known as the lightest in weight. But they forgot about the json.

Moreover, the scenario where we are standing today is really different than what had been thought earlier.

What was needed classically was to make a hidden request - get the response - inject in html - and show the result. But for this people started using the xmlhttp object as htmlhttp object. I mean rather than only transporting data, they are using HTML strings attached with the data(or the other way round).

I will show how can we make the request and response lighter and show results faster on the page so that the users don’t have to wait even on the dial up connections.

First let us compare the strings that are sent in a response in different formats.

HTML:

<div class=”resultArea”><h3>This is the result of  your query</h3><p><span>Request Num:</span>4564545<br/><span>Status:</span>Pending</p></div>
XML:

<resultArea>
    <heading>This is the result of your query</heading>
    <requestNum>4564545</requestNum>
    <status>Pending</status>
</resultArea>


JSON:

{heading:”This is the result of your query”, requestNum:”4564545″, status:”Pending”}

Clearly you can see which one uses less number of characters.
Not only that, you are only an eval() away from start using the object with the luxury of (.) dot notations. What else do you need?

Had we been using HTML,  we would have transported unnecessary HTML text along with the pure data to the browser. Just imagine the amount of repetitive HTML in case of a tabular data.

Using XML is also not so convinient because besides being bulky with its starting and ending tags, it is also needed to read via the DOM to traverse through the XML, which is time consuming, resource hungry and inconvinient code.

Post Linx
Permalink | Trackback | | Print This Article | Leave a Comment

On demand javascript “an AJAX alternative”

April 28th, 2008   Filed Under Good to know, Javascript, Technology, Tips & Tricks, json  

AJAX … sounds to be very sophisticated, powerful buzzword for last 3 years which helps in data transfers done without reloading the web page.
But if we really think, we hardly use the ‘X’ part of AJAX; Meaning we do not pull xml data from the server but we generally pull some JSON data or strings and then process them and manipulate the displays.
If you think we don’t use the ‘A’ part of it too most of the times. I mean the Asynchronous part.
So what we use AJAX is for downloading some strings without refreshing the page.
If that is all what we need, then we can opt for a simpler solution called “On-demand-javascript”.
It is very simple to understand.
Create a script block with a src set to some server side dynamic entity(.asp, .jsp, servlet, .php etc) which in turn will send some JSON data in turn. For example:

<script type="text/javascript" id="dataBus" src="/myServlet.do?action=init"></script>

The above script node may establish a connection with the browser and set a session cookie.
Depending upon some event on the page, we can use the dataBus to pull some data from the server for us(it will just work like a pipe for us):

document.getElementById('dataBus').src="/myServlet.do?action=transfer&type=address&dateTime=utf-6556554351516";

The above code may pull some JSON data for us and once it is loaded our subsequent javascript code can use the received data.

The features/benefit of this approach would be:

  1. No cross domain constraints.
  2. Synchronous delegation.
  3. Already evaluated JSON data.
  4. You need to just place your data and don’t break your head in making-up a valid javascript object even if it is a string.

There can be a well lot of patterns for using the transported data and making data delivery secure around this approach.

But I am not telling you to forget AJAX. Because when you need to send some information using post method to your own server, this trick will not help you.

So the next time when you plan for some AJAX data pull, just consider this approach as an option and compare which one is worth for you.

Post Linx
Permalink | Trackback | | Print This Article | Leave a Comment

JSON for idiots

February 27th, 2008   Filed Under CSS, Javascript, Tips & Tricks, json, snippet  

Please forgive me for the title of this article. It doesn’t mean you are an idiot. And if you think you are … after reading this article you will not be one any more.

This is for all my friends who are into UI but don’t know the proper usage of JSON Object. Or the people who have heard about JSON but never been exposed to it.

JSON stands for Java Script Object Notation. JSON is a shorthand notation for declaring or constructing a custom object in Javascript.

“At first you must
Shake off the rust”

Let us be clear about what is an object in javascript. First question first… Can we create class, object etc in javascript?? Actually speaking “NO”. Javascript is not a Object Oriented Language. But it allows you to declare custom objects in addition to its primitive object types. So we can say that javascript is an object based language. So like other OO languages you cannot declare a class and then its constructor and then its object.

But what you can certainly do is, you can straight-away create a constructor which acts like a class and a constructor both.
So how can we create a class-constructor and instantiate an object out of it will be discussed some other time.

But for now we dig down to the definition of an object.
An object is an entity or collection of key & value pairs. A value can be of any kind of primitive data type. It can be even another object too.

Now I will cite an example of an object entity called “student”. We take a student whose name is Vivek and his age is 16 yrs.

So our object is having a key called “name” and the value for that key is “Vivek”. There is another key called age and the value of this key is “16″.

So if we translate that to JSON it becomes like this:

var student = {name: "Vivek", age:16};

So, if you need to access this object you say “Give me the student name and his age”.
And using javascript you translate it in the following syntax to alert one-by-one:

alert(student.name);
alert(student.age);

Now you feel like a programmer, isn’t it? Kewl.

Now lets check if we can go a bit more complex in it. The student has two phone numbers to get contacted. Actually he also has an email address. So if you create a category called “contacts” you can club all these items in it. So this also can become a key value pairs and hence, become an object:

What I mean is this:
var contacts = {landline: "918041278882", mobile: "919243176274", email: "vivek.pohre@gmail.com"};

But wait we actually wanted this to be a part of the student object… right? OK thats fair … we will push this to the student object.

So now after pushing the contacts to the student object, it looks like this:

var student = {// YOU CAN INFACT INDENT THE JSON OBJECT IN THIS WAY FOR BETTER READABILITY
name : "Vivek",
age : 16,
contacts :
{
landline: “918041278882″,
mobile : “919243176274″,
email : “vivek.pohre@gmail.com”
}
};

Wow, Now you know what is all that hi-fi code in the javascript libraries… hurray!!
OK but how do you access it again?
See how:

alert(student.contacts.landline);
alert(student.contacts.mobile);
alert(student.contacts.email);

So lets revisit the whole thing and use the technical terms to impress your colleagues:

I have an object called student which have different attributes(keys we say) like name, age, contacts and we can have some methods too for it. OK till attributes it was clear but what the well is method?

A method is a process which does something. What does it do? For example, if you want the student object to speak something about itself. Say when you command the student to speak it tells you his name, his age and his email id.

var student = {// YOU CAN INFACT INDENT THE JSON OBJECT IN THIS WAY FOR BETTER READABILITY
name : "Vivek",
age : 16,
contacts :
{
landline: "918041278882",
mobile : "919243176274",
email : "vivek.pohre@gmail.com"
},
speak: function()
{
alert(”My name is ” + this.name);
alert(”My age is ” + this.age);
alert(”My email id is ” + this.contacts.email)
}
};

OKAY… so now when you command by saying:
student.speak();

It throws 3 alerts which says My name is Vivek, My age is 16 and My email id is vivek.pohre@gmail.com.

Grreeeeeeeeeeat.

Have you ever heard people speaking about sending and receiving data in JSON using ajax?
So it is not so very big deal. You must be knowing that in ajax you get a string. Now if you assign this string to a temporary variable and evaluate it … you get a readymade object.

That means:
If you have a list of students on the HTML page and when a user clicks on a link. The interaction should be the speak command for that particular user.

Oho… how do you do that? Very simple… create an ajax call like this:

function commandStudent(name)
{
var returnText = ajax.gets("http://www.something.com/student?name=" + name);
if(returnText)
{
var tempStudent = eval(returnText);
tempStudent.speak();
}
}

Great man … now you are an ajax guru. Ask your manager to reevaluate your salary.

I ll explain sometime about how to send data from client side to the server using ajax and JSON.

“Your heart bears the fruit
When you go to the root”

Post Linx
Permalink | Trackback | | Print This Article | Leave a Comment