Home >Web Front-end >JS Tutorial >IE8 native JSON support_json
This new native JSON feature enables Internet Explorer 8 to run faster and more securely on existing AJAX applications.
What is JSON?
Most developers do not only develop AJAX programs. Let me introduce some background knowledge here. JSON is a simple, human-readable data exchange format. In AJAX programs, this format is usually used when transmitting data between the server and the web program.
For example, if you select a contact name from your favorite webmail, you can see the contact information. The data stream sent by the server to the web program (running in the browser) may look like the following:
{
"firstName": "cyra",
"lastName": "richardson",
"address": {
"streetAddress": "1 Microsoft way",
"city": "Redmond",
"state": "WA",
"postalCode": 98052
},
"phoneNumbers": [
"425-777-7777",
"206-777- 7777"
]
}
Thankfully, this format is fully compatible with JavaScript’s syntax. Many programs today use Javascript's eval() function to convert this obtained data into a Javascript object. Using eval() is unsafe and consumes resources. eval() parses this string into a Jscript expression and executes it. If the string passed to eval() has been tampered with, it may contain data we don't expect, or even someone else's code, which can be injected into your web application.
Nowadays, there are many libraries written in Javascript to parse untrusted JSON data more securely. Some parsers written in Jscript (http://www.json.org/json_parser.js) perform strict verification on data, and some libraries, like json2, js (http://www.json.org/json2. js), uses regular expressions to comprehensively check the input string, and then uses eval() to quickly parse it. The ideal solution would be a native implementation that protects the application from code injection, runs quickly, and can be used everywhere.
Native JSON in IE8 Jscript
The Jscript engine of IE8 already has a complete native implementation of JSON, and is in line with the ES3.1 Proposal Working Draft, address While maintaining the compatibility of JSON support described in http://wiki.ecmascript.org/doku.php?id=es3.1: es3.1_proposal_working_draft), it greatly improves the speed of serialization and deserialization, and Improve the security of parsing untrusted data.
API
We define a new built-in object "JSON", which can be modified or overridden. Looks a lot like math or other built-in global objects. In addition to JSON objects, specific functions like toJSON() have also been added to the prototypes of Date, Number, String, and boolean objects. JSON objects have two methods: parse() and stringify().
For example:
var jsObjString = "{"memberNull" : null, "memberNum" : 3, "memberStr" : "StringJSON", "memberBool" : true , "memberObj" : { "mnum" : 1, "mbool" : false}, "memberX" : {}, "memberArray" : [33, "StringTst",null,{}]";
var jsObjStringParsed = JSON.parse(jsObjString) ;
var jsObjStringBack = JSON.stringify(jsObjStringParsed);
The object generated by the parse() method and serialized back through the stringify() method is exactly the same as the following object:
var jsObjStringParsed =
{
"memberNull" : null,
"memberNum" : 3,
"memberStr" : "StringJSON",
"memberBool" : true ,
"memberObj" :
{
"mnum" : 1,
"mbool" : false
},
"memberX" : {},
"memberArray" :
]
};
JSON.parse(source, reviver )
The JSON.parse method performs deserialization. It uses a JSON-formatted string (specified by the parameter source) to generate a Jscript object or array.
The optional parameter revive is a user-defined function used to account for changes in parsing. The result object or array is traversed recursively, the reviver function is used on each member, and each member value is replaced by the return value of the reviver. If reviver returns null, the object members are deleted. The traversal and call to the reviver are completed in post-order traversal. That is to say: after all members of the object are "revived", the entire object is also "revived".
reviver is mainly used to identify strings like ISO and convert them into Date objects. So far, JSON format (http://www.json.org/) cannot be converted back and forth for Date objects. This is because there is no standard Date text size in Jscript. The ES3.1 draft (http://wiki.ecmascript.org/doku.php?id=es3.1: es3.1_proposal_working_draft) contains an example of how to use the reviver function to solve this problem.
JSON.stringify(value, replacer, space)
This is the serialization method. It takes the object or array specified by the value parameter as a parameter and generates a string in JSON format. Objects or arrays are accessed recursively and serialized into a specific JSON format. If the value parameter has a toJSON() method, then this method acts as the first filter, the original value is replaced by value.toJSON(key), and the final value is serialized. The parameter key is a string. When an object like (key:value) is serialized, the key is the name of the member. For the root object, the key is the empty string.
Date.prototype.toJSON() generates a string that does not require escaping and is a true serializer, because stringify() returns the original string without any changes. Date objects are serialized through the toJSON() method.
Number.prototype.toJSON (), String.prototype.toJSON(), Boolean.prototype.toJSON() function returns ValueOf(). They are used for proper serialization of objects, like "var num = new Number(3.14);"
The optional replacer parameter acts as a filter and is used recursively. It can be a function or an array. If replacer is a function, replacer(key,value) is called for each object member key:value. As for the root object, call replacer("",value). If replacer is an array, it must be an array string. The elements of the array are the names of the members to be serialized. The order of serialization is based on the order of names in the array. When serializing an array, array replacers are ignored.
The optional parameter space is about how to format the output text. If this parameter is omitted, the output text will not have any extra spaces. If it is a number, it specifies the number of spaces for each level of indentation. If it is a character (such as "t" or " "), it indents each level of characters by those characters.
What impact will it have on existing web pages?
The ES3.1 JSON proposal is the main factor used by the popular json2.js. We also use the name JSON. The global object JSON can be overridden. However, it is no longer an undefined object. This is the same as by introducing the new keyword in a scripting language. Adopting a name occasionally affects existing code. Pages using json2.js are unlikely to be affected.With very few exceptions, all of these pages will continue to work normally, just faster.
Pages that implement their own JSON object definitions may be affected, especially JSON objects defined using patterns like "if(!this.JSON) { JSON=...}". There are two main ways to solve this problem:
1. Migrate the existing code and use native JSON objects
If your JSON implementation is based on some version of json2.js, migrate it It's very simple.
2. Decide not to use native JSON support and continue to use your existing JSON object
This can be achieved by renaming or rewriting the JSON name. Renaming means changing all code that uses JSON names to something like "MyJSON". Rewriting means ensuring that your own JSON definition overrides all code that uses the default native JSON definition. In most cases, simply removing the condition "if(!this.JSON)" will work.
Given the influence of the 3.1 standard, using the name JSON is consistent with our desire to interoperate through well-defined interfaces.
There is a lot to talk about about native JSON. The parser is not based on eval(), it is a separate implementation. It is equivalent to the reference parser provided by JSON support (http://wiki.ecmascript.org/doku.php?id=es3.1: json_support). It is also as secure as http://www.json.org/json_parser.js and runs much faster. So, if you use eval(), or your own JSON library, please check out the native JSON implementation in IE8 for better performance and safer operations.