Topic Summary: This article discusses JavaScript Object Notation (or JSON), an open and text-based data exchange format, that provides a standardized data exchange format better suited for Ajax-style web applications.
Basically in this article I’ve focus on following topics:
1. JSON Introduction
2. Understanding Literal Notation in JavaScript
3. Comparing JSON to XML
4. Creating and Parsing JSON Message with JavaScript
5. Working with JSON in .Net Framework
6. Conclusion
JSON Introduction:
When designing an application that will communicate with a remote computer, a data format and exchange protocol must be selected. There are a variety of open, standardized options, and the ideal choice depends on the applications requirements and pre-existing functionality. For example, SOAP-based web services format the data in an XML payload wrapped within a SOAP envelope.
How JSON replace to XML? While XML works well for many application scenarios, it has some drawbacks that make it less than ideal for others. One such space where XML is often less than ideal is with Ajax-style web applications. Ajax is a technique used for building interactive web applications that provide a snappier user experience through the use of out-of-band, lightweight calls to the web server in place of full-page post backs. These asynchronous calls are initiated on the client using JavaScript and involve formatting data, sending it to a web server, and parsing and working with the returned data. While most browsers can construct, send, and parse XML, JavaScript Object Notation (or JSON) provides a standardized data exchange format that is better-suited for Ajax-style web applications.
JSON is an open, text-based data exchange format like XML, it is human-readable, platform independent, and enjoys a wide availability of implementations. For more details click here
Understanding Literal Notation in JavaScript:
Before going to see JSON literal notation let’s see what is literal? “Literals are used in programming languages to literally express fixed values” such as integer fixed value 1 or 2, string literal “JSON Literal” etc. Literals can be used in most languages wherever an expression is allowed, such as part of a condition in a control statement (like in for loop for declaring a variable int i=0 etc.), an input parameter when calling a function (like public void MyFunction(int a)), in variable assignment (like int a = 2), and so on.
Different programming languages allow for literals of different types. Most programming languages support, at minimum, literals for scalar types like integers, floating-point numbers, strings, and Boolean. What's interesting about JavaScript is that in addition to scalar types, it also supports literals for structured types like arrays and objects. This feature allows for a terse syntax for on-demand creation and initialization of arrays and objects.
An object literal defines the members of an object and their values. The list of object members and values is enclosed in curly braces ({}) and each member is delimited by a comma (,). Within each member, the name and value are delimited by a colon (:). The following example creates an object and initializes it with three members named Domain, Company, and Country with respective values ”www.mindstick.com”, “MindStick Softwares” and “India”.
var companyDescription = {
“Domain" : "www.mindstick.com",
“Company" : "MindStick Softwares",
"Country " : India
};
For accessing values from companyDescription object:
alert ("The company name is: " + companyDescription. Company);
From JavaScript Literals to JSON:
JSON is a data exchange format that was created from a subset of the literal object notation in JavaScript. While the syntax accepted by JavaScript for literal values is very flexible, it is important to note that JSON has much stricter rules. According to the JSON standard, for example, the name of an object member must be a valid JSON string. A string in JSON must be enclosed in quotation marks. JavaScript, on the other hand, allows object member names to be delimited by quotation marks or apostrophes or to omit quoting altogether so long as the member name doesn't conflict with a reserved JavaScript keyword. Likewise, an array element or an object member value in JSON is limited to a very limited set. In JavaScript, however, array elements and object member values can refer to pretty much any valid JavaScript expression, including function calls and definitions!
Comparing JSON to XML:
There are some key characteristics difference between JSON and XML which shown below:
Characteristics |
XML |
JSON |
Data types |
Does not provide any notion of data types. One must rely on XML Schema for adding type information. |
Provides scalar data types and the ability to express structured data through arrays and objects. |
Support for objects |
Objects have to be expressed by conventions, often through a mixed use of attributes and elements. |
Native object support. |
Null support |
Requires use of xsi:nil on elements in an XML instance document plus an import of the corresponding namespace. |
Natively recognizes the null value. |
Comments |
Native support and usually available through APIs. |
Not supported. |
Parsing in JavaScript |
Requires an XML DOM implementation and additional application code to map text back into JavaScript objects. |
No additional application code required to parse text; can use JavaScript's eval function. |
Namespaces |
Supports namespaces, which eliminates the risk of name collisions when combining documents. Namespaces also allow existing XML-based standards to be safely extended. |
No concept of namespaces. Naming collisions are usually avoided by nesting objects or using a prefix in an object member name (the former is preferred in practice). |
Creating and Parsing JSON Messages with JavaScript:
In the latest iteration of writing this article, www.json.org adds toJSONString() functions to array, string, Boolean, object, and other JavaScript types. The toJSONString() functions for scalar types (like Number and Boolean) are quite simple since they only need to return a string representation of the instance value. The toJSONString() function for the Boolean type, for example, returns the string "true" if the value is true, and "false" otherwise. The toJSONString() functions for Array and Object types are more interesting. For Array instances, the toJSONString() function for each contained element is called in sequence, with the results being concatenated with commas to delimit each result.
The net result of the toJSONString() functions is that any type can be converted into its JSON format with a single function call. The following JavaScript creates an Array object and adds seven String elements deliberately using non-literal method for illustrative purpose. It is going to display the arrays JSON representations.
For using JSON methods, json.js must be prior to include in page or defined script. Download json.js here
var fruitsName = new Array();
fruitsName.push("Apple");
fruitsName.push("Mango");
fruitsName.push("Banana");
fruitsName.push("Grapes");
fruitsName.push("Guava");
fruitsName.push("Pine Apple");
alert ("The JSON representation of the Fruits Name array is: " +
fruitsName.toJSONString());
Code Clarification: Push function (push ()) helps to insert element in Array. Here fruits name inserting in Array one by one and after that simply get JSON representation of the fruits name array.
Parsing JSON text is even simpler. Since JSON is merely a subset of JavaScript literals, it can be parsed into an in-memory representation using the eval(expr) function, treating the source JSON text as JavaScript source code. The eval function accepts as input a string of valid JavaScript code and evaluates the expression. Consequently, the following single line of code is all that is needed to turn JSON text into a native representation:
var fruitsName JsonText= '["Apple ", " Mango ", " Banana ", " Grapes ", " Guava ", " Pine Apple "]';
var fruitsName = eval(fruitsName JsonText);
alert (fruitsName [0] + " is one of the " + fruitsName.length + "
fruitsName.");
For more details on JSON parsing text click here
Working with JSON in .Net Framework:
JSON text can easily be created and parsed from JavaScript code, which is part of its allure. However, when JSON is used in an ASP.NET web application, only the browser enjoys JavaScript support since the server-side code is most likely written in Visual Basic or C#.
Most Ajax libraries designed for ASP.NET provide support for programmatically creating and parsing JSON text. Therefore, to work with JSON in a .NET application, consider using one of these libraries. There are plenty of open-source and third-party options, and Microsoft also has their own Ajax library named ASP.NET AJAX.
In this article we will look at examples that use Jayrock, an open-source implementation of JSON for the Microsoft .NET Framework created by coauthor Atif Aziz. We chose to use Jayrock instead of ASP.NET AJAX for three reasons:
1. Jayrock is open-source, making it possible to extend or customize as needed.
2. Jayrock can be used in ASP.NET 1.x, 2.0, and Mono applications, whereas ASP.NET AJAX is for ASP.NET version 2.0 only.
3. Jayrock's scope is limited to JSON and JSON-RPC, and the former is the main focus of this article. While ASP.NET AJAX includes some support for creating and parsing JSON text, its primary purpose is to offer a rich platform for building end-to-end Ajax-style web applications in ASP.NET. The extra bells and whistles can be distracting when your main focus is JSON.
Working with JSON in .NET using Jayrock is similar to working with XML through the XmlWriter, XmlReader, and XmlSerializer classes in the .NET Framework. The classes JsonWriter, JsonReader, JsonTextWriter, and JsonTextReader found in Jayrock mimic the semantics of the .NET Framework classes XmlWriter, XmlReader, XmlTextWriter, and XmlTextReader.
Conclusion:
JSON is a lightweight, text-based data exchange format based on a subset of the literal notation from the JavaScript programming language. It provides a succinct encoding for application data structures and is typically used in scenarios where a JavaScript implementation is available to one or both of the applications exchanging data, such as in Ajax-style web applications. The allure of JSON lies in its simplicity to understand, adopt, and implement. JSON has virtually no learning curve for developers already familiar with JavaScript or other programming languages with similar support for a rich literal notation (like Python and Ruby). Parsing JSON text in JavaScript code can be accomplished by simply calling the eval function, and creating JSON text is a breeze with the json.js script provided at http://www.json.org/json.js
Rahul Kesharwani
22-May-2020Nice Article