JSON stands for JavaScript Object Notation
JSON is a syntax for storing and exchanging data between servers and web browsers. JSON is similar to (and a competitor to) eXtensible Markup Language (XML) for describing and exchanging data on the Internet, but is simpler and faster than XML.
JSON is used with AJAX (Asynchronous JavaScript And XML) to dynamically update web pages without having to refresh the entire page. If you are familiar with AJAX, JSON simply replaces the XML for sending data back and forth.
As with learning all new technology, I Googled 'JSON'
The links to the left on a wide screen or below on a narrow screen are the sites I found most useful in learning and practicing using JSON.
JSON was developed by Douglas Crockford and a company called State Software. It is open source.
What follows is a tutorial on my experience learning JSON, heavy with examples of the features I have learned.
Here is one of the most interesting things I found when learning JSON. I have already written something very similar for my own web site for exchanging data between two PHP programs. JSON does what I wrote, but instead of just working with PHP, it works with PHP, Javascript and many, many other programming languages. Even better, on the client side the data arrives in easy to use Javascript objects or arrays. It will make it much easier to create dynamic web pages. I will not go back a rewrite my web pages, but going forward I will use JSON instead of my own data exchange code and XML.
To use JSON to improve your web pages your will need to know Javascript, HTML and CSS. A knowledge of Javascript objects is helpful but the tutorials and videos above do cover objects. This project focuses on web pages, but if fact, JSON can be used anywhere, to send data between any two programs written in any languages. JSON is about transferring data, its strength is how easy it is to process the data on both ends, in ANY language but especially Javascript. JSON is used most to send data to/from a web server and a browser, but at its core, to is simple data transfer between ANY two programs.
I was most surprized by how much JSON replaces XML. I have a lot of time invested in XML, but in the future I think I will look to use JSON instead of XML. JSON was invented long after XML, but it is quickly overtaking XML for data transfer.
Start with a college related example, a 'fill in the blank' student survey. I have done this using XML and plain text files so I am interested to see if JSON improves the result. I will start very simple, with the minimum amount of code and the expand the example into progressively more complicated JSON code. Here is the simple example:
Here is the Javascript/HTML/PHP code:
//---------------- Javascript -------------------------------------
<script>
var jsonobj = { "type":"survey", "number":"1" }; // 1 <-- This is a Javascript/JSON object
var jsonstr = JSON.stringify(jsonobj); // 2 <-- This is a string in JSON format
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "json1.php?jsonstr=" + jsonstr), true); // 3 <-- This sends request (jsonstr) to server
xmlhttp.send(); // 4 <-- causes onreadystatechange to run when reply is ready
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var replystr = this.responseText; // 5 <-- This reply is a string in JSON format
var replyobj = JSON.parse(replystr); // 6 <-- This is the reply Javascript/JSON object
document.getElementById("reply1").innerHTML = replyobj.reply1;
document.getElementById("reply2").innerHTML = replyobj.reply2;
}
};
</script>
//---------------- HTML -------------------------------------------
JSON reply #1: <span id='reply1'>Replace Me 1</span><br>
JSON reply #2: <span id='reply2'>Replace Me 2</span><br>
//---------------- PHP --------------------------------------------
<?php
header("Content-Type: application/json; charset=UTF-8");
$jsonstr = $_GET["jsonstr"]; // 7 JSON string
$jsonobj = json_decode($jsonstr); // 8 convert to PHP object
$replyobj = new stdClass(); // 9 create PHP object for reply
$replyobj->reply1 = 'You are looking for a '.$jsonobj->type;
$replyobj->reply2 = 'The number is '.$jsonobj->number;
$replystr = json_encode($replyobj); // 10 convert PHP object to JSON string for reply
echo $replystr; // 11 send JSON string reply back to HTML/Javascript
?>
At its heart, JSON is about sending data back and forth between the browser and the server. Focus
on the lines above with the numbered comments on them and I will explain how the data moves:
I started with an example of sending JSON strings/objects back and forth, but if you really want to know what JSON is, it is the format of the string:
However, JSON is often stored in its own '.json' text files to describe something you are planing to send back and forth over the Internet. In that case, we need to be able to type in JSON format text, for example a student survey:
{
"surveys":
[
{ "number":"1", "size":"10", id="s1q",
"questions" : [
"What is your name?",
"What is your age?",
"What is your gpa?"
]
},
{ "number":"2", "size":"20", id="s2q",
"questions" : [
"What is your major?",
"Have you written a computer program?",
"What high school did you attend?"
]
}
]
}
Above we have a list of surveys we can show students. It will store this on the server side and send back the proper survey when requested by the browser. Note the [ ] this indicates an array in JSON, and this is an array of 2 surveys, but it could be 10 or 20 if needed. Within each survey, it contains an array of questions to present to the student.
Here is the Javascript/HTML/PHP code:
//---------------- Javascript -------------------------------------
<script>
function showSurvey(number) {
var jsonobj = { "type":"survey", "number":"1" }; // <-- This is a Javascript/JSON object
jsonobj.number = number;
var jsonstr = JSON.stringify(jsonobj); // <-- This is a string in JSON format
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "json2.php?jsonstr=" + jsonstr, true);
xmlhttp.send(); // <-- This sends request to server
// <-- causes onreadystatechange to run when reply is ready
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
var replystr = this.responseText; // <-- This reply is a string in JSON format
var replyobj = JSON.parse(replystr); // <-- This is the reply Javascript/JSON object
if (replyobj.number != -1) {
replytext = 'Survey #'+ replyobj.number+'<form><table border=1>';
for (i = 0; i < replyobj.questions.length; i++){
replytext += '<tr><td>'+ replyobj.questions[i]+' <input type=text size ='+replyobj.size+'></td></tr>';
}
replytext += '</table><input type=submit></form>';
}
else
replytext = 'Can not load ' + jsonobj.type + ' number ' + jsonobj.number + '<br>Error code ' + replyobj.number + ' message: ' + replyobj.message;
document.getElementById("survey").innerHTML = replytext;
}
};
}
showSurvey(1);
</script>
//---------------- HTML -------------------------------------------
<A HREF='Javascript:showSurvey(1)'>Show Survey #1</A>
<A HREF='Javascript:showSurvey(2)'>Show Survey #2</A>
<A HREF='Javascript:showSurvey(3)'>Show Survey #3</A>
<P><span id='survey'>Replace Me 1</span><br>
//---------------- PHP --------------------------------------------
<?php
header("Content-Type: application/json; charset=UTF-8");
$jsonstr = $_GET["jsonstr"]; // JSON string
$jsonobj = json_decode($jsonstr); // convert to PHP object
$jsonsurveys = <<<EOS
[
{ "number":"1", "size":"10", "id":"s1q",
"questions" : [
"What is your name?",
"What is your age?",
"What is your gpa?"
]
},
{ "number":"2", "size":"20", "id":"s2q",
"questions" : [
"What is your major?",
"Have you written a computer program?",
"What high school did you attend?"
]
}
]
EOS;
$replyobj = new stdClass(); // create PHP object for reply
$surveyobj = json_decode($jsonsurveys);
for ($i = 0; $i < count($surveyobj); $i++) {
if ($surveyobj[$i]->number == $jsonobj->number) {
$replyobj = $surveyobj[$i]; // Send this survey back
$replystr = json_encode($replyobj); // convert PHP object to JSON string for reply
echo $replystr; // send JSON string reply back to HTML/Javascript
return;
}
}
$replyobj->number = -1; // send back an error, could not find survey
$replyobj->message = 'Could not find a '.$jsonobj->type.' with the number '.$jsonobj->number;
$replystr = json_encode($replyobj); // convert PHP object to JSON string for reply
echo $replystr; // send JSON string reply back to HTML/Javascript
?>
Replace Me 1
Focus on the Javascript function showSurvey(number), simply pass it the number of
the survey you want and Bada, Bing, Bada, Boom it appears. The big difference is it
uses the returned JSON object to loop through and build a FORM/TABLE containing the
questions for the survey. It is a simple matter of using the Javascript object created
from the JSON string.
In the HTML, simple links allow the user to select the survey they wish to view/take. Survey
#3 in intentionally an error to show how error processing is done. I can not stress enough how
easy it is add additional surveys without changing any Javascript or PHP code. Just add the NEW
survey to the JSON string in the PHP and it is done. By the way, for simplicity, I put the string
directly in the PHP code, but it could be loaded from a file 'survey.json' or from a database.
In the PHP, a loop is used to locate the requested survey and then return ONLY that one survey to
the browser. If it does NOT find the survey (as in case #3) it builds an error object with a flag
number = -1 to tell the browser of the problem.
At this point I have accomplished my goal of learning JSON and how to use it to build web pages. It is obvious to me JSON is a powerful tool that allows developers to created web sites with a small amount of code. In addition, those web sites can easily be updated and changed with simple edits to the JSON used to generate the web pages.