- JSON stands for JavaScript Object Notation.
- Invented by Douglas Crawford
- Native types are:
- null
- Boolean (
true and false) - Number (Integer, Real, Floating Point)
- String (dbl quoted unicode with backslash escaping)
- Array (an ordered sequence of values, comma-separated and enclosed in square brackets)
- Object (collection of key:value pairs, comma-separated and enclosed in curly braces)
An example of JSON would be:
{
"firstName": "John",
"lastName": "Smith",
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": 10021
},
"phoneNumbers": [
"212 555-1234",
"646 555-4567"
]
}
Fetching it on IE would be:
var the_object;
var http_request = new XMLHttpRequest();
http_request.open( "GET", url, true );
http_request.send(null);
http_request.onreadystatechange = function () {
if ( http_request.readyState == 4 ) {
if ( http_request.status == 200 ) {
the_object = eval( "(" + http_request.responseText + ")" );
} else {
alert( "There was a problem with the URL." );
}
http_request = null;
}
};
On Mozilla, that would be more like:
var req = new XMLHttpRequest();
req.open('GET', url, true);
req.onreadystatechange = function (aEvt) {
if (req.readyState == 4) {
if(req.status == 200)
the_object = eval ( “(“ + req.responseText+”)” );
else
dump("Error loading page\n");
}
};
req.send(null);
On safari? It’s the same:
var req = new XMLHttpRequest();
req.open('GET', url, true);
req.onreadystatechange = function (aEvt) {
if (req.readyState == 4) {
if(req.status == 200)
the_object = eval ( “(“ + req.responseText+”)” );
else
dump("Error loading page\n");
}
};
req.send(null);
Or put it all together:
<script language="javascript" type="text/javascript">
function GetJson(url) {
// Create xmlhttprequest object
var xmlhttp = null;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
//make sure that Browser supports overrideMimeType
if (typeof xmlhttp.overrideMimeType != 'undefined') {
xmlhttp.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
alert('Perhaps your browser does not support xmlhttprequests?');
}
// Create an HTTP GET request
xmlhttp.open('GET', url, true);
// Set the callback function
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4){
if (xmlhttp.status == 200) {
var json = xmlhttp.responseText;
the_object = eval(json);
else {
//error
}
};
// Make the actual request
xmlhttp.send(null);
}
</script>
But why re-invent the wheel?
Using Ajax library:
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function GetJson() {
var request = new Sys.Net.WebRequest();
request.get_headers()['Content-Type'] = 'application/json; charset=utf-8';
request.set_url('/test.json');
request.add_completed(Function.createDelegate(null, DisplayArtists));
request.invoke();
}
function DisplayArtists(executor) {
if (executor.get_responseAvailable()) {
var jsonText = executor.get_responseData();
var the_object = Sys.Serialization.JavaScriptSerializer.deserialize(jsonText);
$get("divOutput").innerHTML = myArray.length;
}
}
</script>
Links:
http://en.wikipedia.org/wiki/JSON
http://www.json.org/
An Introduction to JavaScript Object Notation (JSON) in JavaScript and .NET
http://www.wrox.com/WileyCDA/Section/Introduction-to-JSON.id-302782.html (video)
http://aspalliance.com/1303_Video_Introduction_to_JSON (video)
http://www.joshholmes.com/blog/2009/01/20/PlayingWithJSON.aspx
http://pietschsoft.com/post/2008/02/NET-35-JSON-Serialization-using-the-DataContractJsonSerializer.aspx