This article introduces the basic knowledge of JSON. I still don't know what JSON is before getting started with Ajax. I only saw this word when I was reading Jeffrey Zhao's deep Atlas series, so it is necessary to know about JSON. Here I will record my learning with my first understanding and a small exercise.
What is JSON?
JSON (JavaScript Object Notation) is a lightweight data exchange format. Easy to read and write. It is also easy to parse and generate machines. It is based on a subset of JavaScript (Standard ECMA-262 3rd edition-December 1999. JSON uses a completely language-independent text format, but it also uses a habit similar to the C language family (including C, C ++, C #, Java, JavaScript, Perl, Python, and so on ). These features make JSON an ideal data exchange language.
JSON is constructed in two structures:
- A collection of name/value pairs ). In different languages, it is understoodObject),Record),Structure (struct),Dictionary),Hash table),Keyed list), OrAssociative array).
- An ordered list of values ). In most languages, it is understoodArray).
These are common data structures. In fact, most modern computer languages support them in some form. This makes it possible to exchange a data format between programming languages that are also based on these structures.
For more information about JSON, visit its official website: http://www.json.org
Use JSON in Javascript
JSON is a subset of the object literal notation. Because JSON is a subset of JavaScript, we can easily use it in JavaScript.
var myJSONObject = {"bindings": [{"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},{"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},{"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}]};
In this example, an object is created and contains only one member "bindings ". "Bindings" is an array containing three objects, and each object has"Ircevent","Method"And"RegEx" three members.
These members can be obtained through "." Or subscript operations.
myJSONObject.bindings[0].method // "newURI"
We can use the eval () method of the eval () function to call the Javascript compiler to convert JSON text into an object. Because JSON is an exact subset of JavaScript, the compiler can parse JSON text correctly and then generate an object structure.
var myObject = eval('(' + myJSONtext + ')');
Eval functions are highly efficient. However, it can compile and execute any JS program, so there will be security issues. Eval is used only when the source is trusted. This is usually the case in Web applications where the server provides basic pages and JSON data. In many cases, the source is untrusted. In particular, never trust clients.
If you are concerned about security, it is best to use the JSON Parser (A parsing function is available in JS scripts ). The JSON parser only recognizes JSON text, so it is safer:
var myObject = myJSONtext.parseJSON();
The JSON string converter (stringifier) does the opposite, which converts the Javascript data structure to JSON text. JSON does not support the cyclic data structure. Therefore, you cannot submit the cyclic structure to the string converter.
var myJSONText = myObject.toJSONString();
Here is an open-source JSON parser and string converter provided by the official JSON Website: JSON. js
A simple example of using JSON. js
- Create an empty website in.
- Introduce the JSON. js file.
- <SCRIPT type = "text/JavaScript" src = "JSON. js"> </SCRIPT>
- Add an HTML page and drag and drop two textarea and three buttons on the page. The buttons are btnparser, btneval, and btnstringifier respectively. The IDS of textarea are txtjson and txtjs respectively, set Cols to 50 and rows to 10;
- Compile the Event code of the three buttons.
- <SCRIPT type = "text/JavaScript">
// <! [CDATA [
Function btnstringifier_click (){
VaR otxtjson = Document. getelementbyid ("txtjson ");
VaR myobject = new object (); // create an object
VaR obindings = new array ();
VaR ofirst = new object ();
VaR osecond = new object ();
VaR othird = new object ();
Ofirst. ircevent = "PRIVMSG ";
Ofirst. method = "newuri ";
Ofirst. RegEx = "^ http ://.*";
//
Obindings [0] = ofirst;
Obindings [1] = osecond;
Obindings [2] = othird;
// Set the obindings array to the bindings member of myobject
Myobject. bindings = obindings;
// Convert the object to JSON text and write the text to textarea
Otxtjson. value = myobject. tojsonstring ();
}
Function btnparser_click (){
VaR otxtjson = Document. getelementbyid ("txtjson ");
VaR otxtjs = Document. getelementbyid ("txtjs ");
// Convert JSON text into an object
VaR myobject = otxtjson. value. parsejson ();
// Obtain the ircevent member (attribute value) of the First bindings Member of the myobject object)
Otxtjs. Value + = myobject. bindings [0]. ircevent + "/";
}
Function btneval_click (){
VaR otxtjson = Document. getelementbyid ("txtjson ");
VaR otxtjs = Document. getelementbyid ("txtjs ");
// Convert JSON text into an object
VaR myobject = eval ('+ otxtjson. Value + ')');
// Obtain the ircevent member (attribute value) of the First bindings Member of the myobject object)
Otxtjs. Value + = myobject. bindings [0]. method + "/";
}
//]>
</SCRIPT>
- Run the HTML page and click stringifier to obtain the JSON Text of the object. Then, click parser to convert the JSON text into an object and obtain the value of the ircevent member. Finally, click eval, it also converts the JSON text into an object and obtains the value of the method member to see the effect: