Introduction
This chapter demonstrates about the Prototype.js With JSON which is JavaScript Object Notation is a lightweight data-interchange format and following are the concepts are covered in this chapter.
- About JSON & Encoding
- Parsing JSON & JSON with Ajax
Description
JSON is known as JavaScript Object Notation which is used by all over the web and it is fast method and alternative to XML in Ajax requests. JSON is very easy read and write for human and which is also easy to parse and generate for machines. JSON is a JavaScript Programming Language.
JSON Encoding
JSON provides several types of prototype encoding JSON methods and following are the some JSON Encoding methods are briefly explained below.
Number to JSON()
Is used return a JSON string for the given number the syntax below demonstrates the number to JSON.
[code]
Number.toJSON()
[/code]
The code below demonstrates the Number to JSON method as shown below.
[html]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
function showResult() {
alert("(45).toJSON() : " + (45).toJSON() );
}
</script>
</head>
<body>
<p>Click the button to see the result.</p>
<br />
<br />
<input type = "button" value = "Result" onclick = "showResult();"/>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Hash to JSON()
Is used return a JSON string for the given Hash, the syntax below demonstrates the hash to JSON.
[code]
Hash.tojson()
[/code]
The code below demonstrates the hash to json method as shown below.
[html]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
function showResult() {
var h = new Hash({ a: 'apple', b: 'banana', c: 'coconut' });
alert( "h.toJSON() : " + h.toJSON() );
}
</script>
</head>
<body>
<p>Click the button to see the result.</p>
<br />
<br />
<input type = "button" value = "Result" onclick = "showResult();"/>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Date to JSON()
Is used return a JSON string for the given date the syntax below demonstrates the number to JSON.
[code]
Date.tojson()
[/code]
The code below demonstrates the Number to json method as shown below.
[html]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
function showResult() {
var str = new Date(1969, 11, 31, 19).toJSON();
alert ("Returns JSON String: " + str );
}
</script>
</head>
<body>
<p>Click the button to see the result.</p>
<br />
<br />
<input type = "button" value = "Result" onclick = "showResult();"/>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Object to JSON()
Is used return a JSON string for the given object the syntax below demonstrates the number to JSON.
[code]
Object.tojson()
[/code]
The code below demonstrates the Number to json method as shown below.
[html]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
function showResult() {
var o = {name: 'Prototype', Version: 1.6};
alert("Object.toJSON(o): " + Object.toJSON(o));
}
</script>
</head>
<body>
<p>Click the button to see the result.</p>
<br />
<br />
<input type = "button" value = "Result" onclick = "showResult();"/>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Introduction
In JavaScript parsing should be done by evaluating the JSON string evaluating. While evaluating the string which returns the resulting object If sanitize parameter is true then only string is checked for possible malicious attempts the code below demonstrates the evalJSON () as shown below.
[html]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
function showResult() {
var str = '{ "name": "Violet", "occupation": "character" }';
var person = str.evalJSON();
alert( "Name :" + person.name);
alert( "Occupation :" + person.occupation);
}
</script>
</head>
<body>
<p>Click the button to see the result.</p>
<br />
<br />
<input type = "button" value = "Result" onclick = "showResult();"/>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
JSON with Ajax
JSON with Ajax is very straight forward method which simply invoke the StringevalJSON on the transports responseText property.
[code]
new Ajax.Request('/some_url', {
method:'get',
onSuccess: function(transport) {
var json = transport.responseText.evalJSON();
}
});
[/code]
When the data coming from un trusted sources user need to sanitize it which is shown below code.
[code]
new Ajax.Request('/some_url', {
method:'get',
requestHeaders: {Accept: 'application/json'},
onSuccess: function(transport) {
var json = transport.responseText.evalJSON(true);
}
});
[/code]
Key Points
- JSON is very easy for humans to read and write.
- JSON is Totally Language independent.
- JSON parsing is done by evaluating the content of JSON string.