Back to JSON

On the JSON website (http://www.json.org), JSON is described as:

"a lightweight data-interchange format"
"easy for humans to read and write"
"easy for machines to parse and generate"

Numbers 1 and 3 are certainly true. Number 2 depends on the type of human. Experienced programmers will find that they can get comfortable with the syntax relatively quickly.

JSON Syntax

The JSON syntax is like JavaScript's object literal syntax except that the objects cannot be assigned to a variable. JSON just represents the data itself. So, the Beatles object we saw earlier would be defined as follows:

{
"Name" : "Beatles",
"Country" : "England",
"YearFormed" : 1959,
"Style" : "Rock'n'Roll",
"Members" : ["Paul","John","George","Ringo"]
}

JSON Parsers

As JSON is just a string of text and not an object in and of itself, it needs to be converted to an object to make it useful. Although this can be done in JavaScript with the eval() function, it is safer to use a JSON parser. You can download the JavaScript JSON parser at http://www.json.org/json.js. Including this file on a web page allows you to take advantage of the JSON object, which has the following very useful methods:

JSON.parse(strJSON) - converts a JSON string into a JavaScript object.
JSON.stringify(objJSON) - converts a JavaScript object into a JSON string.

The process for sending data between the browser and server with JSON is as follows:

On the client-side:
- Create a JavaScript object using the standard or literal syntax.
- Use the JSON parser to stringify the object.
- Send the URL-encoded JSON string to the server as part of the HTTP Request. This can be done using the HEAD, GET or POST method by assigning the JSON string to a variable. It can also be sent as raw text using the POST method, but this may create extra work for you on the server-side.
On the server-side:
- Convert the incoming JSON string to an object using a JSON parser for the language of your choice. At http://www.json.org, you'll find JSON parsers for many modern programming languages. The methods available depend upon which parser you are using. See the parser's documentation for details.
- Do whatever you wish with the object.
- If you wish to send JSON back to the client:
  - Create a new object for storing the response data.
  - Convert the new object to a string using your JSON parser.
  - Send the JSON string back to the client as the response body (e.g, Response.Write(strJSON), echo $strJSON, out.write(strJSON) etc.).
On the client-side:
- Convert the incoming JSON string to an object using the JavaScript JSON parser.
- Do whatever you wish with the object.
- And so on...

The examples below show how to transfer data to the server using JSON.

Code Sample:

JSON/Demos/SendJson.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="json.js"></script>
<script type="text/javascript">
	function sendRequest(msg) {
		document.getElementById("ResponseDiv").innerHTML = "";
		var objJSON = {
			"msg": msg
		};
		var strJSON = encodeURIComponent(JSON.stringify(objJSON));
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.open("post", "ReceiveJSON", true);

		xmlhttp.onreadystatechange = function() {
			respond(xmlhttp);
		}

		xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
		xmlhttp.send("strJSON=" + strJSON);
	}

	function respond(xmlhttp) {
		document.getElementById("ResponseDiv").innerHTML = xmlhttp.responseText;
	}

	window.onload = function() {
		var btnHi = document.getElementById("hi");
		var btnBye = document.getElementById("bye");
		btnHi.addEventListener('click', function() {
			sendRequest(btnHi.innerHTML);
		}, false);
		btnBye.addEventListener('click', function() {
			sendRequest(btnBye.innerHTML);
		}, false);
	};
</script>
<title>Using JSON</title>
</head>

<body>
<h1>Request</h1>
<button id="hi">Hi There!</button>
<button id="bye">Good bye!</button>
<h1>Response</h1>
<div id="ResponseDiv">Waiting...</div>
</body>
</html>

Code Explanation

To run this demo, load and start the Node.js server as before:

Navigate to JSON/Demos from the command line
Type npm install to load the needed modules
Type npm start to start the server
View the page via the URL http://localhost:8080/SendJson.html

The server-side end of this process is the ReceiveJSON response route in server.js. In response to a POST request, it responds with either "And hi there to you!" (if the request parameter strJSON's msg field has value "Hi There!") or "Later Gator!" (if the msg field has any other value).

This code is relatively simple. The client-side script:

creates a simple JSON object with one property holding the passed in MSG string.
converts the JSON object to a string and encodes it.
passes the string as a parameter of our Ajax request.
outputs the responseText to the page.

The server-side script:

decodes the passed in string and converts it to a JSON object.
outputs an appropriate response.

This tutorial is based on Webucator's Advanced JavaScript Programming Course. We also offer many other JavaScript Training courses. Sign up today to get help from a live instructor.