ajax and json

 JSON

The third method is JSON, JavaScript Object Notation. Personally I pronounce it as “Jason”, so that yet another ancient Greek hero enters modern JavaScript development. (And please remember that Ajax’s father Telamon accompanied Jason as an Argonaut. Jason was older, and on the whole more succesful, than Ajax)

The general idea is to deliver a bit of text (a string, really) which can be interpreted as a JavaScript object. Once it has arrived, you use JavaScript’s eval() method to convert the string into a real JavaScript object, which you then read out.

Example

The server returns this JSON string:

{"books":[{"book":
		{
		"title":"JavaScript, the Definitive Guide",
		"publisher":"O'Reilly",
		"author":"David Flanagan",
		"cover":"/images/cover_defguide.jpg",
		"blurb":"Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
		}
	},
	{"book":
		{
		"title":"DOM Scripting",
		"publisher":"Friends of Ed",
		"author":"Jeremy Keith",
		"cover":"/images/cover_domscripting.jpg",
		"blurb":"Praesent et diam a ligula facilisis venenatis."
		}
	},
	{"book":
		{
		"title":"DHTML Utopia: Modern Web Design using JavaScript & DOM",
		"publisher":"Sitepoint",
		"author":"Stuart Langridge",
		"cover":"/images/cover_utopia.jpg",
		"blurb":"Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
		}
	}
]}

The script looks rather a lot like the XML script. It does the same things, it just reads out the data from another format. Here, too, XSLT might come in handy.

function setDataJSON(req)
{
	var data = eval('(' + req.responseText + ')');
	for (var i=0;i<data.books.length;i++)
	{
		var x = document.createElement('div');
		x.className = 'book';
		var y = document.createElement('h3');
		y.appendChild(document.createTextNode(data.books[i].book.title));
		x.appendChild(y);
		var z = document.createElement('p');
		z.className = 'moreInfo';
		z.appendChild(document.createTextNode('By ' + data.books[i].book.author + ', ' + data.books[i].book.publisher));
		x.appendChild(z);
		var a = document.createElement('img');
		a.src = data.books[i].book.cover;
		x.appendChild(a);
		var b = document.createElement('p');
		b.appendChild(document.createTextNode(data.books[i].book.blurb));
		x.appendChild(b);
		document.getElementById('writeroot').appendChild(x);
	}
}

Â

Advantages

The most important advantage is that JSON circumvents JavaScript’s same-source policy, if you import the JSON file as a new <script> tag. See Simon Willison’s example for the gory details.

JavaScript does not allow you to access documents (be they XML or HTML) that come from another server. However, if you import a JSON file as a script tag you circumvent this problem, and any JSON data can be imported into any website. It depends on your business goals whether this is a Good or a Bad Thing, but right now it’s the only data format that allows unrestricted access.

A secondary advantage is that scripts for JSON data are slightly simpler and slightly more in line with the rest of the JavaScript language than scripts for XML data.

Disadvantages

The most important disadvantage of JSON is that the format is very hard to read for humans, and that, of course, every single comma, quote, and bracket should be in exactly the correct place. While this is also true of XML, JSON’s welter of complicated-looking syntax, like the }}]} at the end of the data snippet, may frighten the newbies and make for complicated debugging.

sources: http://www.quirksmode.org/blog/archives/2005/12/the_ajax_respon.html

http://www.developer.com/lang/jscript/article.php/3596836