Introduction to JSON

Read The Full Tutorial.

Introduction

As we know 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

1- lightweight data-interchange format

2- Easy for humans to read and write

3- Easy for machines to parse and generate

4- JSON can be parsed trivially using the eval() procedure in JavaScript

5- 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()"}  ]

  }

}}

XML

<menu id="file" value="File" >

  <popup>

     <menuitem value="New" onclick="CreateNewDoc()" />

     <menuitem value="Open" onclick="OpenDoc()" />

     <menuitem value="Close" onclick="CloseDoc()" />

  </popup>

</menu>

 

 

 

 

 

Server side code

The following code will be generated in the server side to retrieve the server time, and in one step in the client side it will be rendered to JavaScript

Java

<%@ page language="java" import="java.util.*" %>

<%Date date = new Date(); %>

alert("The server time is: <%Úte%>");
<SPAN style="mso-tab-count: 1">          

ASP.NET

<%@ page language="C#" %>

   alert("The server time is: <%=System.Date.Now.ToString()%>");

PHP

alert("The server time is: <?=time()?>");

Client Side

JavaScript

//XMLHttpRequest completion function
var myOnComplete = function(responseText, responseXML){

eval(responseText);

}