Interviewer: Tell me the difference between JSON and JSONP

Company: Tencent

What is a JSON

JSON is a text-based data interchange, or data description format, and you should first consider its advantages.

JSON benefits:

1. Based on plain text, cross-platform delivery is extremely simple; 2, Javascript native support, background language almost all support; 3, lightweight data format, occupying a very small number of characters, especially suitable for Internet transmission; 4, readable, although not as clear as XML, but after a reasonable sequence of indentation is easy to recognize; 5, easy to write and parse, of course, if you know the data structure;

What is the json

JSONP (JSON with Padding) is an unofficial protocol that allows server-side integration of Script tags back to the client and cross-domain access in the form of JavaScript Callback. Because JSON is just plain text with simple parentheses, many channels can exchange JSON messages. Because of the same origin policy, developers cannot use XMLHttpRequest when communicating with external servers. JSONP, on the other hand, is a way to circumvent the same-origin policy by returning executable JavaScript function calls or JavaScript objects directly from the server using JSON in combination with

How did JSONP come about

In fact, there are a lot of explanations about JSONP on the Internet, but they are all the same and vague. It is difficult to understand for many people who are just in touch with it, so try to explain this problem in your own way and see if it is helpful.

  1. A well-known problem, Ajax direct request ordinary files exist cross-domain access problem, no matter you are static pages, dynamic pages, Web services, WCF, as long as it is cross-domain request, will not be allowed;
  2. However, we found that the js file is called on a Web page regardless of whether it is cross-domain. (Furthermore, we also found that any tag with the SRC attribute has cross-domain capabilities, such as<script>, <img>, <iframe>);
  3. So it can be judged that at the current stage, if you want to use pure Web (ActiveX control, server proxy, belong to the future of HTML5 Websocket, etc.) to access data across the domain, there is only one possibility, that is to try to on the remote serverPut the data into a JS file for the client to call and further processing;
  4. Coincidentally, we already know that there is a pure character data format called JSON that can be used to describe complex data concisely. What’s better is that JSON is also supported by JS natively, so the client can handle data in this format almost at will.
  5. This solution can be vividly portrayed, web client and call the script exactly the same way, to invoke the cross-domain dynamically generated js format file on the server (generally in JSON as the suffix), it is obvious that the server is to dynamically generate a JSON file, the purpose is that the client needs to data into account.
  6. Once the JSON file is successfully called, the client gets the data it needs, and all that’s left is to process and present the remote data as it needs to, which looks a lot like AJAX, but it’s not.
  7. In order to facilitate the use of data by clients, an informal transport protocol, known as JSONP, was developed. One of the key points of the protocol was to allow the user to pass a callback parameter to the server, which the server would pass back to the dataThe callback argument wraps the JSON data as the function nameSo that the client can customize its own functions to automatically process the returned data.

We all know that JSONP is designed to solve cross-domain problems, but how?

Json is used for data exchange between the front and back ends of the same origin policy.

So the question is, if I want to get data from someone else’s website how do I do that? This is a cross-domain reading problem (don’t fool around and say you don’t need to read other sites, trust me, you will)

How about JSON? The answer is No Way

Why? Because JSON is just plain text, and you can get it so easily that there’s no security or confidentiality on the server, and then the Internet is going to be a mess, and that’s a problem that the spec makers have been thinking about, so they use the same origin policy to restrict access to files.

As a result, only tags like IMG, script, and iframe, which can specify a SRC attribute, have the ability to retrieve data (images, scripts, and source files are actually data) from other sites across domains.

<! -- Picture of JINGdong products -->
<img src="http://img30.360buyimg.com/jgsq-productsoa/jfs/t2407/323/1635505465/47386/f2d89d88/56615e00N7a475ee6.jpg" />
<! Baidu, CDN -- -- >
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

Copy the code

It’s not possible to get json directly. Is there another way to get the data? So jSONP was discovered by clever developers, why not invent, because no new technology was involved, just like ajax was discovered.

jsonpThe principle of

So here’s how JSONP works, website A needs to get data from Website B, and website B says let me give you A way,

  1. Do you use<script src="http://www.B.com/open.js"></script>The TAB first gets the open. Js file (site B’s responsibility), which contains the data you need.
  2. You get data post-processing method name (must deal with data) must be named foo (data the requestor’s responsibility and obligation), here is equivalent to B site and the request to get the data, set up a agreement between asked the requester must be in accordance with the rules, if the requester cannot and to abide by the above two cannot as expected to get the data. Er… “, which is equivalent to establishing an unspoken rule

Jsonp (json with padding) is a jSONp (json with padding) file that wraps a JSON object in a javascript format so that other websites can request it. Json is an ideal format for data exchange, but there is no way to get it directly across domains, so you pass the JSON wrapper (padding) as a JS file in a valid JS statement. That’s the difference between JSON and JSONP. Json is what you want, jSONP is a common way to get there, and of course, json is what you get and process. So JSON is the end, jSONP is just the means. Json is always used, whereas JSONP is only used when retrieving data across domains.

The difference between
  • Json returns a string of data; Jsonp returns script code (including a function call);
  • Json is a lightweight data interchange format. Jsonp is a cross-domain data interaction protocol.