AJAX JSON Example

AJAX 3 responses so far

With AJAX, a page’s JavaScript will send the server a request to obtain data as the user interacts with the page. These are HTTP requests much like used to retrieve the page and its images. Because of this, XMLHttpRequest can be used to retrieve data besides XML, which JavaScript can call upon.

XML may be the standard means of interchanging data but this does not mean it is the best way. Though it is possible for XML to add structure and metadata, it has a rather verbose means of doing this. It is also somewhat difficult to understand its syntax and requires a parser to get into the thick of it. With JavaScript, XML needs to be parsed into a DOM tree, and then even still it requires piloting in order to turn it into the right JavaScript objects or else use it in a Web application.

Fortunately, there is a simpler way to get this same job done.

Short for the JavaScript Object Notation, JSON is a much simpler syntax designed to represent data. It has such a simple poignancy to it since it is derived directly from JavaScript. To prove its simplicity, let’s take a quick look at an example comparison of AJAX JSON compared to XML.

Both can mark up data with a structured means. For instance, an XML format capable of yielding contact information in an address book can look like this:


<?xml version='1.0' encoding='UTF-8'?>

 <card>

 <fullname>John Doe</fullname>

 <org>Doe Firm</org>

 <emailaddrs>

 <address type='work'>doe@johndoe.com</address>

 <address type='home' pref='1'>doe@johndoe.org</address>

 </emailaddrs>

 <telephones>

 <tel type='work' pref='1'>+1 212 555 1212</tel>

 <tel type='fax'>+1 212 555 1213</tel>

 <tel type='mobile'>+1 212 555 1214</tel>

 </telephones>

 <addresses>

 <address type='work' format='us'>4 Random St

 Toronto, ON M9B 2J5</address>

 <address type='home' format='us'>5 Main St

 Toronto, ON M9B 2J5</address>

 </addresses>

 <urls>

 <address type='work'>http://johndoe.com/</address>

 <address type='home'>http://johndoe.org/</address>

 </urls>

 </card>

The same format in JSON looks like this:


{
"fullname": "John Doe",
"org": "Doe Firm",
"emailaddrs": [
{"type": "work", "value": "doe@johndoe.com"},
{"type": "home", "pref": 1, "value": "doe@johndoe.org"}
],
"telephones": [
{"type": "work", "pref": 1, "value": "+1 212 555 1212"},
{"type": "fax", "value": "+1 212 555 1213"},
{"type": "mobile", "value": "+1 212 555 1214"}
],
"addresses": [
{"type": "work", "format": "us",
"value": "4 Random StnToronto, ON M9B 2J5"},
{"type": "home", "format": "us",
"value": "5 Main StnToronto, ON M9B 2J5"}
],
"urls": [
{"type": "work", "value": "http://johndoe.com/"},
{"type": "home", "value": "http://johndoe.org/"}
]
}

As should be immediately obvious, JSON has the same nesting structure as XML, and it too us text-based and use Unicode while remaining just as readable as XML. However, JSON does not have redundancy and is clearer, and the official website for JSON takes a rigorous approach to describing its syntax without getting too into it — it’s that simple.

Using JSON outputs much smaller documents and is naturally easier to work with JavaScript being its child. XMLHttpRequest can parse an XML document while parsing JSON must be done manually, so is it really better to use the latter with the extra labor? Some quick testing shows that parsing JSON is considerably faster than the automatic XML — up to ten times; JSON is the clear winner.

Of course, it is possible that the server will not always permit enough control. For example, there are still plenty of third-party servers that will only support XML output. In fact, it is recommended to seek out a server that specifically supports and provides JSON.

Additionally, notice, for example, that in JSON, some text can directly pass text to eval. This is fine if you trust and control your server, but a bad server can cause your browser to execute something dangerous. This is one situation in which it is better to use one of some available JSON parsers that are written with JavaScript.

Those who like to work with Python might have noticed that JSON also takes influence from Python. This can be evaluated within Python or use a safe parser instead. Parsers can be found on the JSON website.

The following two tabs change content below.
Scriptiny is a web development blog featuring fresh articles on JavaScript, AJAX, CSS, XHTML, PHP, Photoshop and more.

Latest posts by Michael (see all)

  • http://ely4484.soup.io army trips risk assessment

    Hi there! I simply want to offer you a big thumbs up for your great information you have got right here
    on this post. I am returning to your site for more soon.

  • http://Www.portugalhotelfinder.com/ http://Www.portugalhotelfinder.com

    Good day! This is my first visit to your blog! We are a
    collection of volunteers and starting a new initiative in a community in the same niche.

    Your blog provided us beneficial information to work on.
    You have done a wonderful job!

  • http://cheaptenerifeholidays.info/ Suzette

    This post is actually a fastidious one it helps new
    net users, who are wishing in favor of blogging.

x
Loading...