Detailed explanation of Json and Jsonp theory instance code _ basic knowledge

JSON is a data exchange format, while JSONP is an unofficial cross-domain data exchange protocol created by the ingenuity of developers, this article explains in detail the use of JSON and JSONP from theory to practice. What is Json?
JSON (JavaScript Object Notation) is a lightweight data exchange format. It is based on a subset of JavaScript (Standard ECMA-262 3rd Edition-December 1999. JSON
It is completely independent of the language's text format, but it also uses a habit similar to the C language family (including C, C ++, C #, Java, JavaScript, Perl, Python, etc ). These features make JSON an ideal data exchange language. Easy to human
Reading and writing are also easy for machine parsing and generation.
JSON has two structures:
Json is simply an object and an array in javascript. Therefore, the two structures are objects and arrays. These two structures can represent various complex structures.
1. Object: the expanded content represented as "{}" in js. The data structure is {key: value, key: value ,...} the structure of the key-value pair. In the object-oriented language, the key is the object attribute, and the value is the corresponding attribute value, so it is easy to understand that the value method is the object. key, which can be a number, String, array, or object.
2. array: The array is expanded by brackets "[]" in js. The data structure is ["java", "javascript", "vb",...], the value can be obtained using indexes in the same way as in all languages. Field values can be of the following types: Numbers, strings, arrays, and objects.
After the object and array structures, you can combine them into complex data structures.
JSON format or rule:
JSON can describe the data structure in a very simple way. XML can be used to describe the data structure. Therefore, the two are completely different across platforms.
1. JSON only has two data type descriptors, braces {} and square brackets []. The remaining English colons are ing characters, English commas (,) are separators, and English double quotation marks (") are definitions.
2. braces {} are used to describe a set of "unordered key-value pairs of different types" (each key-value pair can be understood as an OOP attribute description ), square brackets [] are used to describe a group of "ordered data sets of the same type" (which can correspond to an OOP array ).
3. If multiple sub-items exist in the preceding two sets, they are separated by commas.
4. Key-value pairs are separated by a colon (:). We recommend that you add double quotation marks (") to the key names for resolution in different languages.
5. Common Data Types in JSON are strings, numbers, Boolean values, dates, and null. strings must be enclosed in double quotation marks, and other data types are not used. The date type is special, I will not discuss it here, but it is recommended that if the client does not need to sort by date, it is better to pass the date and time directly as a string, which saves a lot of trouble.
JSON instance

The Code is as follows:

// Describe a person
Var Person = {
"Name": "aehyok ",
"Age": 25,
"Company": "aehyok ",
"Engineer": true
}
// Obtain the information of this person
Var PersonAge = Person. Age;
Alert (PersonAge );
// Describe several persons
Var members = [
{
"Name": "aehyok ",
"Age": 25,
"Company": "aehyok ",
"Engineer": true
},
{
"Name": "lqm ",
"Age": 25,
"Company": "Oracle ",
"Engineer": false
},
{
"Name": "thl ",
"Age": 22,
"Company": "Microsoft ",
"Engineer": false
}
]
// Read the company name of lqm.
Var lqmCompany = members [1]. Company;
Alert (lqmCompany );
// Describe a meeting
Var conference = {
"Conference": "Future Marketing ",
"Date": "2013-5-22 ",
"Address": "ShenZhen ",
"Members ":
[
{
"Name": "aehyok ",
"Age": 25,
"Company": "IBM ",
"Engineer": true
},
{
"Name": "lqm ",
"Age": 25,
"Company": "Oracle ",
"Engineer": false
},
{
"Name": "Thl ",
"Age": 20,
"Company": "Microsoft ",
"Engineer": false
}
]
}
// Read whether Thl is an engineer
Var ThlIsAnEngineer = conference. Members [2]. Engineer;
Alert (ThlIsAnEngineer );

What is Jsonp?
1. A well-known problem is that Ajax directly requests common files without cross-domain access permissions. Render Manager determines that you are a static page, dynamic webpage, web Service, and WCF, as long as it is a cross-domain request, no;
2. However, we found that when calling js files on the web page, it is not affected by cross-origin (not only that, we also found that all tags with the "src" attribute have cross-domain capabilities, such as script, ); &lt;BR&gt; 3. You can judge whether the current stage is purely web-based (ActiveX control, server proxy, Websocket for HTML5 in the future, etc) there is only one possibility of cross-origin access data, that is, try to put the data into the js format file on the remote server for the client to call and further process; &lt;BR&gt; 4. We now know that a pure character data format called JSON can describe complex data in a concise manner. What's more, JSON is also supported by js native, therefore, the client can process data in this format as needed. &lt;BR&gt; 5. This solution is ready for use. The web client uses the same method as the call script, to call the js format files dynamically generated on the Cross-origin server (generally suffixed with JSON). Obviously, the server dynamically generates JSON files to load the data required by the client. &lt;BR&gt; 6. After the client successfully calls the JSON file, it obtains the required data. The rest is to process and display the data as needed, this method of obtaining remote data looks like AJAX, but it is actually not the same. &lt;BR&gt; 7. In order to facilitate the use of data on the client, an informal transmission protocol is gradually formed, which is called JSONP, one important aspect of this protocol is that users can pass a callback parameter to the server. When the server returns data, the callback parameter is used as the function name to enclose JSON data, in this way, the client can customize its own functions to automatically process the returned data. &lt;BR&gt; If the callback parameter is ambiguous, we will explain it in detail. &lt;BR&gt; &lt;STRONG&gt; Implementation of Jsonp client &lt;/STRONG&gt;: &lt;BR&gt; 1. First, the simplest one. First, I set up two websites in IIS. Of course, if the port is 888 and the port is 8888, we use 888 as the local server, and 8888 as the remote server. &lt;BR&gt; there is a local webpage &lt;BR&gt; &lt;p class = "codetitle"&gt; &lt;U&gt; &lt;/U&gt; with the following code: &lt;/p&gt; &lt;p class = "codebody" id = "code9777"&gt; &lt;BR&gt; <ptml&gt; &lt;BR&gt; <pead&gt; &lt;BR&gt; &lt;title&gt; index.html &lt;/title&gt; &lt;BR&gt; &lt;script type = "text/javascript" src =" http://localhost:8888/remote.js?1.1.20 "&gt; Script &lt;BR&gt; </pead&gt; &lt;BR&gt; &lt;body&gt; &lt;/body&gt; &lt;BR&gt; </ptml&gt; &lt;BR&gt; &lt;/p&gt; &lt;BR&gt; the JavaScript file references 8888 remote. js file. &lt;BR&gt; &lt;p class = "codetitle"&gt; &lt;U&gt; &lt;/U&gt; the code is as follows: &lt;/p&gt; &lt;p class = "codebody" id = "code87750"&gt; &lt;BR&gt; alert ('I am a remote file '); &lt;BR&gt; &lt;/p&gt; &lt;BR&gt; after running the local server website, the result is &lt;BR&gt; now the simplest cross-origin operation is successful. &lt;BR&gt; 2. let's modify it on the basis of 1. first look at the Code &lt;BR&gt; &lt;p class = "codetitle"&gt; &lt;U&gt; &lt;/U&gt;. The Code is as follows: &lt;/p&gt; &lt;p class = "codebody" id = "code27271"&gt; &lt;BR&gt; <ptml&gt; &lt;BR&gt; <pead&gt; &lt;BR&gt; &lt;title&gt; index.html &lt;/title&gt; &lt;BR&gt; &lt;script type = "text/javascript"&gt; &lt;BR&gt; function aehyok (data) &lt;BR &gt;{&lt; BR&gt; alert (data. result); &lt;BR &gt;}&lt; BR&gt; script &lt;BR&gt; &lt;script type = "text/javascript" src =" http://localhost:8888/remote.js?1.1.20 "&gt; Script &lt;BR&gt; </pead&gt; &lt;BR&gt; &lt;body&gt; &lt;/body&gt; &lt;BR&gt; </ptml&gt; &lt;BR&gt; &lt;/p&gt; &lt;BR&gt; first add a js function to the local file, then, call the js file of the remote server. &lt;BR&gt; &lt;p class = "codetitle"&gt; &lt;U&gt; &lt;/U&gt; the code is as follows: &lt;/p&gt; &lt;p class = "codebody" id = "code8708"&gt; &lt;BR&gt; aehyok ({"result": "data from remote js "}); &lt;BR&gt; &lt;/p&gt; &lt;BR&gt; This is the code in the remote server js file. &lt;BR&gt; effect after running &lt;BR&gt; the call is successful. It indicates that the local function is successfully called by the cross-origin remote js, and the data from the remote js is also received. I'm glad that the goal of cross-origin remote data retrieval is basically achieved, but another problem arises. How can I let remote js know the name of the local function that should be called? After all, jsonp service providers have to deal with many service objects, and these service objects have different local functions? Let's look down. &lt;BR&gt; &lt;p class = "codetitle"&gt; &lt;U&gt; &lt;/U&gt; the code is as follows: &lt;/p&gt; &lt;p class = "codebody" id = "code90955"&gt; &lt;BR&gt; &lt;script type = "text/javascript"&gt; &lt;BR&gt; $ (document ). ready (function () {&lt;BR&gt; $. ajax ({&lt;BR&gt; type: "get", &lt;BR&gt; async: false, &lt;BR&gt; url :".. /Home/aehyok ", &lt;BR&gt; dataType:" jsonp ", &lt;BR&gt; jsonp:" callback ", // The one that is passed to the request handler or page, the parameter name used to obtain the jsonp callback function name (generally: callback by default) &lt;BR&gt; jsonpCallback: "aehyok", // The Custom jsonp callback function name, the default value is the random function name automatically generated by jQuery. You can also enter "? ", JQuery automatically processes data for you &lt;BR&gt; success: function (json) {&lt;BR&gt; alert (" second time "+ json. result); &lt;BR &gt;}, &lt;BR&gt; error: function () {&lt;BR&gt; alert ('fail '); &lt;BR &gt;}&lt; BR&gt; }); &lt;BR &gt;}); &lt;/P&gt; &lt;P&gt; function aehyok (data) {&lt;BR&gt; alert ("First time" + data. result); &lt;BR &gt;}&lt; BR&gt; script &lt;BR&gt; &lt;/p&gt; &lt;BR&gt; I am in the asp.net mvc3.0 project, therefore, the &lt;BR&gt; &lt;p class = "codetitle"&gt; &lt;U&gt; &lt;/U&gt; code in the controller is as follows: &lt;/p&gt; &lt;p class = "codebody" id = "code17658"&gt; &lt;BR&gt; public string aehyok () &lt;BR &gt;{&lt; BR&gt; return "aehyok ({\" result \ ": \" data from remote js \"})"; &lt;BR &gt;}&lt; BR&gt; &lt;/p&gt; &lt;BR&gt; the execution result is &lt;BR&gt; the URL can be found through debugging. http://localhost:6247/Home/aehyok?callback=aehyok&amp;_=1369235398641 &lt;BR&gt; callback = aehyok is the callback function. After the call is completed, aehyok (data) is executed first ). &lt;BR&gt; then run success (json ). So there are two pop-up windows. &lt;BR&gt; I am only working under a project, but the truth is the same.