Friday, March 1, 2013

Json tutorial for beginners


JavaScript Object Notation is a lightweight data-interchange format. JSON is syntax for storing and exchanging text information. Much like XML. JSON is smaller than XML, and faster and easier to parse. It is easy for machines to parse and generate. It’s based on JavaScript Programming language. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.
JSON Example:-
{ "employees":
   [  {  "firstName":"John" , "lastName":"Doe" }, 
      {  "firstName":"Anna" , "lastName":"Smith" }, 
      {  "firstName":"Peter" , "lastName":"Jones" }
   ]
}
Create Web Page :-
<!DOCTYPE html><html><body>
<h2>JSON Object Creation in JavaScript</h2>
<p> Name: <span id="jname"></span><br />
Age: <span id="jage"></span><br />
Address: <span id="jstreet"></span><br />
Phone: <span id="jphone"></span><br /> </p>
<script>
var JSONObject= { "name":"Virendra maurya", "street":"B-403 new ashok nagar", "age":26, "phone":"9555845453"};document.getElementById("jname").innerHTML=JSONObject.name document.getElementById("jage").innerHTML=JSONObject.age document.getElementById("jstreet").innerHTML=JSONObject.street document.getElementById("jphone").innerHTML=JSONObject.phone
</script>
</body>
</html>

Why we use Json:
For AJAX applications, JSON is faster and easier than XML:
Using XML
Fetch an XML document
  • Use the XML DOM to loop through the document
  • Extract values and store in variables
Using JSON
  • Fetch a JSON string
  • eval() the JSON string

Converting a JSON Text to a JavaScript Object

Since JSON syntax is a subset of JavaScript syntax, the JavaScript function eval() can be used to convert a JSON text into a JavaScript object.

The eval() function uses the JavaScript compiler which will parse the JSON text and produce a JavaScript object. The text must be wrapped in parenthesis to avoid a syntax error:
<script>
var txt = '{ "employees" : [' + '{ "firstName":"Virendra" , "lastName":"maurya" },' +
'{ "firstName":"Kuldeep" , "lastName":"Singh" },' +
'{ "firstName":"Salmaan" , "lastName":"Khan" } ]}';       *//json Object//*
var obj = eval ("(" + txt + ")");          *//convert Json object into Javascript.//*
document.getElementById("fname").innerHTML = obj.employees[1].firstName
document.getElementById("lname").innerHTML = obj.employees[1].lastName
</script>
</body>

JSON Parser

he eval() function can compile and execute any JavaScript. This represents a potential security problem.It is safer to use a JSON parser to convert a JSON text to a JavaScript object. A JSON parser will recognize only JSON text and will not compile scripts.In browsers that provide native JSON support, JSON parsers are also faster.Native JSON support is included in newer browsers and in the newest ECMAScript (JavaScript) standard.

 


No comments:

Post a Comment