Welcome to our free Advanced JavaScript Programming tutorial. This tutorial is based on Webucator's Advanced JavaScript Programming course.
On the JSON website (http://www.json.org), JSON is described as:
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.
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"] }
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:
Response.Write(strJSON)
, echo $strJSON
, out.write(strJSON)
etc.).The examples below show how to transfer data to the server using JSON.
<!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>
To run this demo, load and start the Node.js server as before:
npm install
to load the needed modulesnpm start
to start the serverThe 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:
MSG
string.responseText
to the page.The server-side script:
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.