JavaScript Object Notation (JSON)

Introduction

Ajax is a web development technology that makes the server responses faster by enabling the client-side scripts to retrieve only the required data from the server without retrieving a complete web page on each request, which will minimize the data transferred from the server.

These requests usually retrieve xml formatted response, the xml responses are then parsed in the JavaScript code to render the results. Which complicate the JavaScript code The idea of JSON (JavaScript Object Notation) is to make the response a specific data structure that can be easily parsed by the JavaScript code.

Advantages

lightweight data-interchange format
Easy for humans to read and write
Easy for machines to parse and generate
JSON can be parsed trivially using the eval() procedure in JavaScript
JSON Supports: ActionScript, C, C#, ColdFusion, E, Java, JavaScript, ML, Objective CAML, Perl, PHP, Python, Rebol, Ruby, and Lua.

Syntax

The JSON Syntax is the convention which you will use it to generate data, it’s near to the C family language, so it can be parsed easily in the C family languages.

For objects start the object with “{“ and end it with “}”

object
{}{ members }

For members (properties), use pairs of string : value and separate them by commas

members
string : value members , string : value

For arrays put the arrays between []
array
[]
[ elements ]
For elements put the values directly separated by commas
elements
value
elements, value
Values can be string, number, object, array, true, false, null

EXAMPLES

JSON

{"menu": {
"id": "file",
"value": "File:",
"popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}  ]
}
}}

JSON Code Samples

Using JSON with the Maps API”
In this example we're using the Ajax.Request class from the library to load the point of interest data, you could just as well use the XMLHttpRequest object directly or an alternative library that wraps the object.
Each map instance can support multiple layers of overlaid map features, in this case we're adding the JSON data to the map's default layer which we get a reference to using this code:

var layer = map.getLayer('base');

provides a convenience method addFeaturesJson() which accepts an array of POI data objects from which map features will be created. It also takes an optional reference to a callback function that will be invoked once for each map feature created, and any number of user-defined arguments which will be passed to the callback function to help with feature initialization.

The minimum properties required for each POI data object are:
name - this will be displayed in the POI feature tooltip
x - the NZMG X coordinate
y - the NZMG Y coordinate
jsclass - the map feature class that should be instantiated, in this case GSPointFeature
Any other properties may be added to the POI data object as they'll be ignored by the API.
Sample JSON Response
{
pois: {
poi:[
{
id: '74',
x: 2666593.7292175,
y: 6497116.9724012,
name: 'Grand Hotel',
jsclass: 'GSPointFeature'
}
]
}}

Finally we call the map's centerOnLayer() method to center the map on the set of features that have been added to the base layer.

The Code
function loadPOI(url) {
Element.show('searchIndicator'); // display a progress indicator
// load the data from the remote service using the Prototype Ajax.Request class
new Ajax.Request(url, {method: 'get', parameters: parameters, onComplete: showPOI});
}
// this function will be called by the Prototype framework once the JSON data
// has been loaded

function showPOI(request) {
var data = eval('(' + request.responseText + ')');
var layer = map.getLayer('base');
layer.clear(); // remove any features previously added to this layer
// the GSLayer.addFeaturesJson() method expects an array of
// map features in JSON format
layer.addFeaturesJson(data.pois.poi, initFeature);
map.centerOnLayer('base');
Element.hide('searchIndicator'); // hide the progress indicator
}