Prototype & JSON Tutorial
Introduction to JSON:
JSON (JavaScript Object Notation) is a lightweight data-interchange format.
JSON is easy for humans to read and write.
JSON is easy for machines to parse and generate.
JSON is based on a subset of the JavaScript Programming Language.
JSON is notably used by APIs all over the web and is a fast alternative to XML in Ajax requests.
JSON is a text format that is completely language independent
Prototype 1.5.1 and later version features JSON encoding and parsing support.
JSON Encoding:
Prototype provides following methods for encoding:
NOTE: Make sure you have at least version 1.6 of prototype.js.
If you are unsure of what type the data you need to encode is, your best bet is to use Object.toJSON like so:
var data = {name: 'Violet', occupation: 'character', age: 25 };
Object.toJSON(data);
|
This will produce following result:
'{"name": "Violet", "occupation": "character", "age": 25}'
|
Furthermore, if you are using custom objects, you can set your own toJSON method which will be used by Object.toJSON. For example:
var Person = Class.create();
Person.prototype = {
initialize: function(name, age) {
this.name = name;
this.age = age;
},
toJSON: function() {
return ('My name is ' + this.name +
' and I am ' + this.age + ' years old.').toJSON();
}
};
var john = new Person('John', 49);
Object.toJSON(john);
|
This will produce following result:
'"My name is John and I am 49 years old."'
|
Parsing JSON:
In JavaScript, parsing JSON is typically done by evaluating the content of a JSON string. Prototype introduces String.evalJSON to deal with this. For example:
var d='{ "name":"Violet","occupation":"character" }'.evalJSON();
d.name;
|
This will produce following result:
Using JSON with Ajax:
Using JSON with Ajax is very straightforward, simply invoke String.evalJSON on the transport's responseText property:
new Ajax.Request('/some_url', {
method:'get',
onSuccess: function(transport){
var json = transport.responseText.evalJSON();
}
});
|
If your data comes from an untrusted source, be sure to sanitize it:
new Ajax.Request('/some_url', {
method:'get',
requestHeaders: {Accept: 'application/json'},
onSuccess: function(transport){
var json = transport.responseText.evalJSON(true);
}
});
|
|