Home >Web Front-end >JS Tutorial >JSON Getting Started Guide Friends who want to understand json can read_json
Although there is a lot of publicity about how XML has cross-platform and cross-language advantages, however, unless it is applied to Web Services, in ordinary Web applications, developers often struggle with the parsing of XML, whether it is generated on the server side. Either processing XML, or the client using JavaScript to parse XML, often leads to complex code and extremely low development efficiency. In fact, for most web applications, they do not need complex XML to transmit data at all, XML's extensibility rarely has an advantage, and many AJAX applications even directly return HTML fragments to build dynamic web pages. Compared to returning XML and parsing it, returning HTML fragments greatly reduces the complexity of the system, but it also lacks a certain degree of flexibility.
JSON now provides web application developers with an alternative data exchange format. Let’s take a look at what exactly JSON is. It offers greater simplicity and flexibility than XML or HTML fragments.
Ajax Resource Center
Visit the Ajax Resource Center, your one-stop center for information about the Ajax programming model, including documentation, tutorials, forums, blogs, wikis, and news. Any new information on Ajax can be found here.
JSON data format analysis
Like XML, JSON is also a data format based on plain text. Since JSON is inherently prepared for JavaScript, the data format of JSON is very simple. You can use JSON to transmit a simple String, Number, Boolean, an array, or a complex Object.
String, Number and Boolean are very simple to represent in JSON. For example, using JSON to represent a simple String "abc", its format is:
"abc"
In addition to the characters ",, / and some control characters (, f,
,
, ) need to be encoded, other Unicode characters can be output directly. The following figure is the complete representation structure of a String:
Figure 1. The complete representation structure of String
A Number can be represented as follows according to an integer or floating point number:
Figure 2. The representation structure of Number
This It is consistent with the representation method of most programming languages, for example:
12345 (integer)
-3.9e10 (floating point number)
Boolean type is represented as true or false. Additionally, null in JavaScript is represented as null. Note that true, false, and null do not have double quotes, otherwise they will be treated as a String.
JSON can also represent an array object, using [] to contain all elements, each element separated by commas, and the elements can be any Value. For example, the following array contains a String, Number, Boolean and a null:
["abc",12345,false,null]
Object objects are represented in JSON by {} containing a series of unordered Key-Value pairs. In fact, the Object here is equivalent to the one in Java. Map
For example, an Address object contains the following Key-Value:
city:Beijing
street:Chaoyang Road
postcode:100025 (integer)
Represented in JSON as follows:
{"city ":"Beijing","street":" Chaoyang Road ","postcode":100025}
Value can also be another Object or an array. Therefore, complex Objects can be nested to represent, for example, a Person object Contains name and address objects, which can be expressed as follows:
{"name":"Michael","address":
{"city":"Beijing","street":" Chaoyang Road ","postcode" :100025}
}
JavaScript processing JSON data
The above introduces how to use JSON to represent data. Next, we also need to solve how to generate JSON format data on the server side for sending. to the client, and how the client uses JavaScript to process JSON-formatted data.
Let’s first discuss how to use JavaScript to process JSON data in web pages. We can see how the client represents JSON data to the user through a simple JavaScript method:
function handleJson() {
var j={"name":"Michael","address":
{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
};
document.write(j.name);
document.write(j .address.city);
}
Assume that the JSON data returned by the server is as above:
{"name":"Michael","address":
{"city":"Beijing ","street":" Chaoyang Road ","postcode":100025}
}
Just assign it to a JavaScript variable, you can use the variable immediately and update the information on the page. Compared with XML Needs to read various nodes from the DOM, using JSON is very easy. All we need to do is send an Ajax request and assign the JSON data returned by the server to a variable. There are many Ajax frameworks that already include the ability to process JSON data. For example, Prototype (a popular JavaScript library: http://prototypejs.org) provides the evalJSON() method, which can directly turn the JSON text returned by the server into a JavaScript variable. :
new Ajax.Request("http://url", {
method: "get",
onSuccess: function(transport) {
var json = transport.responseText.evalJSON() ;
// TODO: document.write(json.xxx);
}
});
Output JSON format data on the server side
Let’s discuss how to The server outputs data in JSON format.Taking Java as an example, we will demonstrate encoding a Java object into JSON-formatted text.
When encoding a String object into JSON format, you only need to handle special characters. In addition, strings must be represented by (") instead of ('):