JSON - Introduction

Online Examples

With our editor, you can edit JavaScript code online, then click a button to view the result:

JSON Examples

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example Tutorial (example.com)</title> </head> <body> <h2>JavaScript Creating JSON Objects</h2> <p>Website Name:<span id="jname"></span><br />Website Address:<span id="jurl"></span><br />Website Slogan:<span id="jslogan"></span><br /> </p> <script>
var JSONObject= { "name":"Example Tutorial", "url":"www.example.com", "slogan":"Learn not only technology, but also dreams!" }; document.getElementById("jname").innerHTML=JSONObject.name document.getElementById("jurl").innerHTML=JSONObject.url document.getElementById("jslogan").innerHTML=JSONObject.slogan
</script> </body> </html>

Try it Yourself »
Click the "Try it Yourself" button to view the online example.

Similarities with XML

  • JSON is plain text
  • JSON is "self-describing" (human-readable)
  • JSON has a hierarchical structure (values within values)
  • JSON can be parsed by JavaScript
  • JSON data can be transmitted using AJAX

Differences from XML

  • No end tags
  • Shorter
  • Faster to read and write
  • Can be parsed using JavaScript's built-in eval() method
  • Uses arrays
  • Does not use reserved words

Why Use JSON?

For AJAX applications, JSON is faster and easier to use than XML:

Using XML

  • Read the XML document
  • Use XML DOM to loop through the document
  • Read values and store them in variables

Using JSON

  • Read the JSON string
  • Process the JSON string with eval()
Other Extensions